diff --git a/practice/practice-01/src/index.html b/practice/practice-01/src/index.html index 24fd6f5..14de3aa 100644 --- a/practice/practice-01/src/index.html +++ b/practice/practice-01/src/index.html @@ -7,136 +7,155 @@ + -
- -
-
- - -
-
+ Learn More +
+ - -
-
- 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 -
+ +
+
+ + 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? +

+ Learn More +
+
+
+ + +
+
+ +
+

+ 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? +

+ Learn More +
+ + + Image Security +
+
+ - - - - - -
-
- - 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? -

- Learn More -
-
-
- - -
-
- -
-

- 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? -

- Learn More -
- - - Image Security -
-
diff --git a/practice/practice-01/src/style/abstracts/variables.css b/practice/practice-01/src/style/abstracts/variables.css index edcf682..75ac2f0 100644 --- a/practice/practice-01/src/style/abstracts/variables.css +++ b/practice/practice-01/src/style/abstracts/variables.css @@ -6,7 +6,7 @@ --fs-sm: 15px; --fs-md: 20px; --fs-lg: 40px; - --width: 1180px; + --max-width: 1180px; --ff-secondary-regular: CrimsonText-Regular; --ff-secondary-bold: CrimsonText-Bold; --ff-primary-medium: WorkSans-Medium; diff --git a/practice/practice-01/src/style/main.css b/practice/practice-01/src/style/main.css index f8bbc98..7b9cdf8 100644 --- a/practice/practice-01/src/style/main.css +++ b/practice/practice-01/src/style/main.css @@ -1,13 +1,22 @@ @import url("./abstracts/variables.css"); @import url("./base/typo.css"); +.wrapper { + width: 1440px; + margin: auto; +} + +.width-container { + width: 1180px; + margin: auto; +} + .header__background { background-color: var(--primary-color); } .container { display: flex; - width: 1175px; align-items: center; justify-content: space-between; padding-top: 35px; @@ -42,7 +51,6 @@ /* Welcome section */ .welcome { margin: auto; - width: 1180px; display: flex; gap: 120px; padding-bottom: 82.87px; @@ -129,7 +137,6 @@ /* Pattern Section */ .sponsor__container { - width: var(--width); margin: 60 auto; gap: 55px; } @@ -174,7 +181,6 @@ /* Conversation Section */ .conversation__container { - width: var(--width); margin: 60px auto; display: flex; justify-content: space-between;