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..cad288e 100755 --- a/src/index.html +++ b/src/index.html @@ -4,52 +4,57 @@ 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
+ Explore +
+
Header Image -
-
+
+ +
@@ -83,17 +88,20 @@ Learn More
+
- Conversation Image +
+ Conversation Image +

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 +109,7 @@
+
@@ -108,7 +117,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?

@@ -116,9 +125,12 @@
- Image Security +
+ Image Security +
+
@@ -135,10 +147,12 @@
- Avatar Image +
+ Avatar Image +
Peg legge - Ceo + Ceo
@@ -146,10 +160,12 @@
- Avatar Image +
+ Avatar Image +
Richard guerra - Cto + Cto
@@ -157,10 +173,12 @@
- Avatar Image +
+ Avatar Image +
Alexandra stolz - Designer + Designer
@@ -168,10 +186,12 @@
- Avatar Image +
+ Avatar Image +
Janet bray - Developer + Developer
@@ -179,39 +199,43 @@ View Team
+ + diff --git a/src/styles/main.css b/src/styles/main.css index 454ac19..08c1655 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); } @@ -77,10 +75,12 @@ .header { padding-top: 35px; padding-bottom: 40px; + margin: auto; + width: 1175px; } -.logo-link { - height: auto; +.logo-wrapper { + height: 50px; } .background { @@ -101,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 { @@ -118,9 +120,17 @@ margin: auto; gap: 120px; padding-bottom: 82.87px; + width: 1180px; } .welcome__content { + width: 416px; + gap: 15px; +} + +.welcome__content-text { + display: flex; + flex-direction: column; gap: 15px; } @@ -136,8 +146,21 @@ } .welcome__description { - color: var(--white); - margin-bottom: 25px; + color: rgba(255, 255, 255, 0.75); +} + +.welcome__btn { + margin-top: 25px; +} + +.welcome-image-container { + height: 378px; + width: 644px; +} + +.welcome__image { + width: 100%; + height: 100%; } .btn { @@ -146,9 +169,8 @@ display: flex; align-items: center; justify-content: center; - width: 170px; - height: 48px; - border: none; + width: 168px; + height: 46px; /* Text */ text-decoration: none; @@ -162,11 +184,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 +206,8 @@ /* Pattern Section */ .sponsor__container { - margin: 60 auto; + padding-top: 60px; + margin: auto; gap: 55px; } @@ -203,10 +228,13 @@ .sponsor__logos { gap: 68px; + width: 1159px; + height: 50px; } .sponsor__logo-item { transition: 0.3s; + cursor: pointer; } .sponsor__logo-item:hover { @@ -215,7 +243,7 @@ /* Conversation Section */ .conversation__container { - margin: 60px auto; + margin-top: 73px; } .conversation__content { @@ -223,9 +251,19 @@ gap: 16px; } +.conversation__wrapper-image { + width: 600px; + height: 431px; +} + +.conversation__image { + width: 100%; + height: 100%; +} + /* Security section */ .security__container { - margin: 60px auto; + margin-top: 73px; } .security__content { @@ -233,13 +271,28 @@ gap: 16px; } +.security__wrapper-image { + width: 600px; + height: 566px; +} + +.security__image { + width: 100%; + height: 100%; +} + /* Team section */ .team__container { + margin-top: 102px; gap: 45px; margin-bottom: 54px; } +.team__heading { + text-transform: capitalize; +} + .team__content { width: 404px; gap: 16px; @@ -258,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 { @@ -270,6 +324,11 @@ } .team__image { + width: 100%; + height: 100%; +} + +.team__wrapper-image { width: 175px; height: 175px; } @@ -290,17 +349,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; +}