diff --git a/assets/images/midel card 3.png b/assets/images/midel card 3.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/images/midel card 3.png differ diff --git a/assets/images/midle card 1.png b/assets/images/midle card 1.png new file mode 100644 index 0000000..566c46f Binary files /dev/null and b/assets/images/midle card 1.png differ diff --git a/assets/images/midle card 2.png b/assets/images/midle card 2.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/images/midle card 2.png differ diff --git a/index.html b/index.html index 6034768..057c879 100644 --- a/index.html +++ b/index.html @@ -54,6 +54,30 @@

+
+
+ laptop 1 +
+
+ laptop 2 +
+
+ laptop 3 +
+
+
+
+
+ laptop 2 +
+
+ laptop 1 +
+
+
+ laptop 3 +
+
\ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 23e6a06..3ba49b6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -75,7 +75,6 @@ body { align-items: center; gap: 21px; display: flex; - grid-template-columns: 1fr 1fr 1fr; } .image-card { @@ -88,6 +87,26 @@ body { margin-top: 179px; } +.midle-card-section { + display: flex; + flex-direction: row; + background: #E0E0E0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + margin-top: 80px; + justify-content: center; + align-items: center; + gap: 40px; +} +.midle-card { + +} + +.midle-card-div { + position: relative; + top: 62px; + max-width: 88.44%; +} + .image-card-image { display: block; margin-top: 36px; @@ -103,12 +122,38 @@ body { line-height: 24px; } +.midle-card-mobile-figure { + display: none; +} + +.midle-card-div-mobile2 { + display: none; +} + + @media screen and (max-width: 1024px) { + .banner-1-desktop { + display: none; + } + + .banner-1-mobile { + display: unset; + } + + .text-1 { + width: 86.47%; + } + + .first-section p { + text-align: center; + } + .section-cards { display: flex; flex-direction: column; margin-top: 90px; } + .image-card { max-width: 84.54%; margin-top: 0%; @@ -117,22 +162,27 @@ body { padding-right: 26px; padding-bottom: 27px; } + .image-computer { width: 57.73%; } + + .midle-card-mobile-figure { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 14px; } -@media screen and (max-width: 1024px) { - .banner-1-desktop { + .midle-card-mobile { + background: #E0E0E0; + } + + .midle-card-div-mobile2 { + display: flex; + } + .midle-card-div { display: none; } - .banner-1-mobile { - display: unset; - } - .text-1 { - width: 86.47%; - } - .first-section p { - text-align: center; - } -} \ No newline at end of file +}