From 0c1c645e3febf80e025a198df74f923c7c33fffc Mon Sep 17 00:00:00 2001 From: Nez27 Date: Thu, 6 Jul 2023 12:00:17 +0700 Subject: [PATCH 1/2] Fix comments --- .prettierrc | 2 +- .vscode/settings.json | 3 ++ src/index.html | 90 ++++++++++++++++++++++++------------------- src/styles/main.css | 54 +++++++++++++++++--------- 4 files changed, 91 insertions(+), 58 deletions(-) create mode 100755 .vscode/settings.json diff --git a/.prettierrc b/.prettierrc index 9fb01bb..cfae452 100755 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "bracketSameLine": false, + "bracketSameLine": true, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "printWidth": 120, diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100755 index 0000000..65a1965 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/src/index.html b/src/index.html index ac32a17..2b6863b 100755 --- a/src/index.html +++ b/src/index.html @@ -4,19 +4,20 @@ Practice 01 -
-
+
- + +
+ +
+
+ - +
Welcome -

Lorem ipsum dolor sit amet consectetur

+

Lorem ipsum dolor sit amet consectetur

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum, voluptate culpa nesciunt delectus iste?

Explore
- Header Image +
+ Header Image +
+
@@ -83,6 +88,7 @@ Learn More +
@@ -93,7 +99,7 @@

Lorem ipsum dolor sit amet consectetur

-

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum, voluptate culpa nesciunt delectus iste?

@@ -101,6 +107,7 @@
+
@@ -108,7 +115,7 @@

Lorem ipsum dolor sit amet consectetur

-

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum, voluptate culpa nesciunt delectus iste?

@@ -119,6 +126,7 @@ Image Security
+
@@ -138,7 +146,7 @@ Avatar Image
Peg legge - Ceo + Ceo
@@ -149,7 +157,7 @@ Avatar Image
Richard guerra - Cto + Cto
@@ -160,7 +168,7 @@ Avatar Image
Alexandra stolz - Designer + Designer
@@ -171,7 +179,7 @@ Avatar Image
Janet bray - Developer + Developer
@@ -179,39 +187,43 @@ View Team
+ + diff --git a/src/styles/main.css b/src/styles/main.css index 454ac19..ce29db0 100755 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,9 +1,6 @@ @import url("./abstracts/variables.css"); @import url("./bases/typo.css"); - -* { - line-height: 125%; -} +@import url("./bases/reset.css"); .wrapper { width: 1440px; @@ -18,13 +15,14 @@ .text { font-size: var(--fs-md); font-family: var(--ff-primary-regular); + line-height: 125%; } .text--bold { font-family: var(--ff-primary-bold); } -.text--gray { +.text--secondary-color { color: var(--gray); } @@ -79,8 +77,8 @@ padding-bottom: 40px; } -.logo-link { - height: auto; +.logo-wrapper { + height: 50px; } .background { @@ -121,6 +119,7 @@ } .welcome__content { + width: 416px; gap: 15px; } @@ -140,15 +139,24 @@ margin-bottom: 25px; } +.welcome-image-container { + height: 378px; + width: 644px; +} + +.welcome__image { + max-width: 100%; + max-height: 100%; +} + .btn { /* Display & Box Models */ border-radius: 5px; display: flex; align-items: center; justify-content: center; - width: 170px; - height: 48px; - border: none; + width: 168px; + height: 46px; /* Text */ text-decoration: none; @@ -162,11 +170,13 @@ .btn-primary { color: var(--black); background-color: var(--white); + border: 1px solid var(--white); } .btn-primary:hover { background-color: var(--black); color: var(--white); + border: 1px solid var(--black); } .btn-secondary { @@ -182,7 +192,8 @@ /* Pattern Section */ .sponsor__container { - margin: 60 auto; + padding-top: 60px; + margin: auto; gap: 55px; } @@ -215,7 +226,7 @@ /* Conversation Section */ .conversation__container { - margin: 60px auto; + margin-top: 73px; } .conversation__content { @@ -225,7 +236,7 @@ /* Security section */ .security__container { - margin: 60px auto; + margin-top: 73px; } .security__content { @@ -236,10 +247,15 @@ /* Team section */ .team__container { + margin-top: 102px; gap: 45px; margin-bottom: 54px; } +.team__heading { + text-transform: capitalize; +} + .team__content { width: 404px; gap: 16px; @@ -290,17 +306,19 @@ /* Footer */ .footer__content { - padding: 50px 131px; - width: var(--max-width); - margin: auto; + padding-top: 51px; + padding-bottom: 49px; } .footer__logos { gap: 20px; + align-items: center; } .footer__text { - line-height: 125%; - color: var(--white); } + +.footer__link { + height: 19px; +} From 841a9c6f9159357739afdaa10c0fbac703c12c5f Mon Sep 17 00:00:00 2001 From: Nez27 Date: Thu, 6 Jul 2023 14:52:23 +0700 Subject: [PATCH 2/2] Fix comments 2 --- src/index.html | 100 +++++++++++++++++++++++++------------------- src/styles/main.css | 51 ++++++++++++++++++++-- 2 files changed, 103 insertions(+), 48 deletions(-) diff --git a/src/index.html b/src/index.html index 2b6863b..cad288e 100755 --- a/src/index.html +++ b/src/index.html @@ -9,52 +9,52 @@
-
- -
-
- -
- -
- - -
-
- + +
+
+ +
+ +
+ + +
+
+ - -
-
+ +
+
+
Welcome

Lorem ipsum dolor sit amet consectetur

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit nemo hic quos, ab, dolor aperiam nobis cum est eos error ipsum, voluptate culpa nesciunt delectus iste?

- Explore
-
- Header Image -
-
- -
+ Explore +
+
+ Header Image +
+ +
@@ -94,7 +94,9 @@
- Conversation Image +
+ Conversation Image +
@@ -123,7 +125,9 @@
- Image Security +
+ Image Security +
@@ -143,7 +147,9 @@
- Avatar Image +
+ Avatar Image +
Peg legge Ceo @@ -154,7 +160,9 @@
- Avatar Image +
+ Avatar Image +
Richard guerra Cto @@ -165,7 +173,9 @@
- Avatar Image +
+ Avatar Image +
Alexandra stolz Designer @@ -176,7 +186,9 @@
- Avatar Image +
+ Avatar Image +
Janet bray Developer diff --git a/src/styles/main.css b/src/styles/main.css index ce29db0..08c1655 100755 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -75,6 +75,8 @@ .header { padding-top: 35px; padding-bottom: 40px; + margin: auto; + width: 1175px; } .logo-wrapper { @@ -99,12 +101,14 @@ .nav__lists { list-style: none; gap: 30px; + display: inline-flex; } .nav__item-link { text-decoration: none; color: var(--white); transition: 0.3s; + padding: 0.5px; } .nav__item-link:hover { @@ -116,6 +120,7 @@ margin: auto; gap: 120px; padding-bottom: 82.87px; + width: 1180px; } .welcome__content { @@ -123,6 +128,12 @@ gap: 15px; } +.welcome__content-text { + display: flex; + flex-direction: column; + gap: 15px; +} + .welcome__title { letter-spacing: 5px; text-transform: uppercase; @@ -135,8 +146,11 @@ } .welcome__description { - color: var(--white); - margin-bottom: 25px; + color: rgba(255, 255, 255, 0.75); +} + +.welcome__btn { + margin-top: 25px; } .welcome-image-container { @@ -145,8 +159,8 @@ } .welcome__image { - max-width: 100%; - max-height: 100%; + width: 100%; + height: 100%; } .btn { @@ -214,10 +228,13 @@ .sponsor__logos { gap: 68px; + width: 1159px; + height: 50px; } .sponsor__logo-item { transition: 0.3s; + cursor: pointer; } .sponsor__logo-item:hover { @@ -234,6 +251,16 @@ gap: 16px; } +.conversation__wrapper-image { + width: 600px; + height: 431px; +} + +.conversation__image { + width: 100%; + height: 100%; +} + /* Security section */ .security__container { margin-top: 73px; @@ -244,6 +271,16 @@ gap: 16px; } +.security__wrapper-image { + width: 600px; + height: 566px; +} + +.security__image { + width: 100%; + height: 100%; +} + /* Team section */ .team__container { @@ -274,6 +311,7 @@ height: 299px; box-shadow: 3px 4px 12px 1px rgba(0, 0, 0, 0.25); transition: 0.3s; + cursor: pointer; } .team__frame:hover { @@ -286,6 +324,11 @@ } .team__image { + width: 100%; + height: 100%; +} + +.team__wrapper-image { width: 175px; height: 175px; }