diff --git a/assets/img/Group.png b/assets/img/Group.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/img/Group.png differ diff --git a/assets/img/laptop 1.png b/assets/img/laptop 1.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/img/laptop 1.png differ diff --git a/assets/img/money (1) 2.png b/assets/img/money (1) 2.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/assets/img/money (1) 2.png differ diff --git a/index.html b/index.html index d24c16e..4e682fd 100644 --- a/index.html +++ b/index.html @@ -43,53 +43,92 @@ - -
-
- - card_decoration 1 -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla - interdum. -

-
-
-
- - card decoration 2 -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla - interdum. -

-
-
-
- - card decoration 3 -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla - interdum. -

-
-
-
- -
- - - preview 1 - - - preview 2 - - - - preview 3 - - -
- +
+
+ + card_decoration 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + card decoration 2 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + card decoration 3 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ +
+ + + preview 1 + + + preview 2 + + + + preview 3 + + +
+ + + +
+
+ + card_decoration 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + card_decoration 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + card decoration 2 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + card decoration 3 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
diff --git a/style.css b/style.css index 2c9a7b7..033a411 100644 --- a/style.css +++ b/style.css @@ -86,11 +86,12 @@ body { .second_container { padding: 3rem; - max-height: 420px; + height: 420px; background-color: #E0E0E0; display: flex; gap: 24px; width: 100%; + justify-content: center; } .preview_img { @@ -98,6 +99,7 @@ body { } +/*----------------------------------------------------------------------------*/ @media screen and (max-width: 413px) { .primary_banner { @@ -118,6 +120,7 @@ body { } +/*----------------------------------------------------------------------------*/ @media screen and (min-width:414px) { .banner_mobile { display: none; @@ -132,6 +135,7 @@ body { } +/*----------------------------------------------------------------------------*/ @media screen and (max-width:1120px) { .container { display: flex; @@ -145,4 +149,42 @@ body { width: 350px; margin: 0 32px 24px; } +} + +/*----------------------------------------------------------------------------*/ +@media screen and (min-width:2199px) { + .second_container { + display: flex; + justify-content: center; + height: 680px; + } + + .preview_img { + width: 100%; + width: 720px; + } + + .info_subtitle { + margin-top: 76px; + font-weight: 400; + font-size: 56px; + line-height: 39px; + text-transform: uppercase; + } + + .info_title { + font-weight: 500; + font-size: 64px; + line-height: 58px; + text-transform: uppercase; + margin-top: 40px; + } + + .info_description { + font-weight: 400; + font-size: 44px; + line-height: 56px; + margin-top: 76px; + margin-bottom: 76px; + } } \ No newline at end of file