diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html index d1238ec..5b09257 100644 --- a/practice/practice-01/src/index.html +++ b/practice/practice-01/src/index.html @@ -14,7 +14,7 @@
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
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? @@ -129,13 +131,13 @@ - + 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? @@ -159,9 +161,11 @@ - Team + Team Our talents - + Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab, diff --git a/practice/practice-01/src/style/abstracts/variables.css b/practice/practice-01/src/style/abstracts/variables.css index 75ac2f0..4440922 100644 --- a/practice/practice-01/src/style/abstracts/variables.css +++ b/practice/practice-01/src/style/abstracts/variables.css @@ -3,6 +3,7 @@ --text-dark: #d6d6d6; --white: #ffffff; --black: #000000; + --gray: rgba(33, 37, 41, 0.50); --fs-sm: 15px; --fs-md: 20px; --fs-lg: 40px; diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css index fc37e1f..918a9ef 100644 --- a/practice/practice-01/src/style/main.css +++ b/practice/practice-01/src/style/main.css @@ -15,16 +15,37 @@ margin: auto; } +.flex-center-row-space-between { + display: flex; + align-items: center; + justify-content: space-between; +} + +.text--black-fs-md { + font-size: var(--fs-md); + font-family: var(--ff-primary-regular); +} + +.text--gray-fs-sm { + font-size: var(--fs-sm); + font-family: var(--ff-primary-regular); + color: var(--gray); +} + +.text--primary-color-uppercase { + font-family: var(--ff-primary-bold); + letter-spacing: 5px; + text-transform: uppercase; + color: var(--primary-color); +} + +/* Header */ .background { background-color: var(--primary-color); } .container { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 35px; - padding-bottom: 40px; + padding: 37px 0px; margin: auto; color: var(--white); font-family: var(--ff-primary-regular); @@ -81,9 +102,7 @@ } .welcome__description { - text-transform: none; font-size: var(--fs-sm); - letter-spacing: 0px; font-family: var(--ff-primary-regular); color: var(--white); margin-bottom: 25px; @@ -148,21 +167,12 @@ width: 411px; } -.sponsor__title { - font-family: var(--ff-primary-bold); - letter-spacing: 5px; - text-transform: uppercase; - color: var(--primary-color); -} - .sponsor__heading { font-size: var(--fs-lg); font-family: var(--ff-secondary-bold); } .sponsor__description { - font-size: var(--fs-md); - font-family: var(--ff-primary-regular); text-align: center; } @@ -171,12 +181,17 @@ gap: 68px; } +.sponsor__logo-item { + transition: 0.3s; +} + +.sponsor__logo-item:hover { + transform: scale(1.2); +} + /* Conversation Section */ .conversation__container { margin: 60px auto; - display: flex; - justify-content: space-between; - align-items: center; } .conversation__content { @@ -191,17 +206,9 @@ font-family: var(--ff-secondary-bold); } -.conversation__description { - font-size: var(--fs-sm); - font-family: var(--ff-primary-regular); -} - /* Security section */ .security__container { margin: 60px auto; - display: flex; - justify-content: space-between; - align-items: center; } .security__content { @@ -216,11 +223,6 @@ font-family: var(--ff-secondary-bold); } -.security__description { - font-size: 15px; - font-family: var(--ff-primary-regular); -} - /* Team section */ .team__container { @@ -233,23 +235,12 @@ gap: 16px; } -.team__title { - font-family: var(--ff-primary-bold); - letter-spacing: 5px; - text-transform: uppercase; - - color: var(--primary-color); -} - .team__heading { font-size: var(--fs-lg); font-family: var(--ff-secondary-bold); } .team__description { - font-size: var(--fs-md); - font-family: var(--ff-primary-regular); - text-align: center; } @@ -318,4 +309,4 @@ line-height: 125%; color: var(--white); -} +} \ No newline at end of file
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? @@ -159,9 +161,11 @@
Lorem ipsum, dolor sit amet consectetur Suscipit nemo hic quos, ab,