diff --git a/src/assets/images/Rectangle 15 (1).png b/src/assets/images/Rectangle 15 (1).png new file mode 100644 index 0000000..7a674f6 Binary files /dev/null and b/src/assets/images/Rectangle 15 (1).png differ diff --git a/src/assets/images/Rectangle 9 (1).png b/src/assets/images/Rectangle 9 (1).png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/src/assets/images/Rectangle 9 (1).png differ diff --git a/src/index.html b/src/index.html index 560b7f3..c238de5 100644 --- a/src/index.html +++ b/src/index.html @@ -56,6 +56,13 @@ /> +
+ Imagem com um notebook +
+

Lorem ipsum

DOLOR SIT AMET

@@ -217,19 +224,19 @@
-
+
notebook abrindo de frente
-
+
notebook abrindo de frente
-
+
notebook abrindo de lado
-
-

Lorem ipsum dolor sit amet

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras - vulputate sapien non libero faucibus interdum. In eget tincidunt - ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique - auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis - venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae - sed augue. -

-
+
+
+

Lorem ipsum dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras + vulputate sapien non libero faucibus interdum. In eget tincidunt + ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique + auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis + venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae + sed augue. +

+
+ +
+
+ Imagem embaçada de computadores +
-
-
- Imagem embaçada de computadores +
+ Imagem embaçada de computadores +
+
diff --git a/src/style.css b/src/style.css index ec0098c..d5b2a41 100644 --- a/src/style.css +++ b/src/style.css @@ -142,15 +142,15 @@ section.one { margin: 10px; } -.item1 { +.img1 { grid-area: foto1; } -.item2 { +.img2 { grid-area: foto2; } -.item3 { +.img3 { grid-area: foto3; } @@ -200,6 +200,22 @@ section.one { text-align: center; } +.container-sectionTwo { + display: grid; + + grid-template-columns: auto; + grid-template-rows: auto auto; + grid-template-areas: "item1" "item2"; +} + +.item1 { + grid-area: item1; +} + +.item2 { + grid-area: item2; +} + section.two { width: 40%; margin: 0 auto 3%; @@ -267,3 +283,93 @@ section.two h2 { font-size: 11px; } +@media only screen and (max-width: 414px){ + .imagePrincipal, .content-imageSecondFooter { + display: none; + } +} + +@media only screen and (min-width: 415px){ + .imagePrincipal-mobile, .content-imageSecondFooter-mobile { + display: none; + } + + .imagePrincipal, .content-imageSecondFooter { + display: flex; + } +} + +@media only screen and (max-width: 1024px){ + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.4rem; + } + + .imagePrincipal-mobile { + width: 100%; + } + + .imagePrincipal-mobile img { + width: 100%; + } + + .content-imageSecondFooter-mobile { + width: 100%; + margin-bottom: 50px; + } + + .content-imageSecondFooter-mobile img { + width: 100%; + } + + .container-imageSecond svg { + width: 60%; + } + + section.one, section.two { + width: 100%; + padding-left: 3%; + padding-right: 3%; + } + + section.one p, section.two p { + text-align: center; + font-size: 1.1rem; + } + + .content-imageSecond { + grid-template-columns: auto auto; + grid-template-rows: 1fr 2fr; + grid-template-areas: "foto2 foto1" "foto3 foto3"; + } + + .content-cardsSecond { + flex-direction: column; + } + + .container-sectionTwo { + grid-template-areas: "item2" "item1"; + } + + .content-cards { + width: 100%; + flex-direction: column; + width: 88%; + } + + .cardOne { + max-width: 380px; + margin: 11px auto; + } + + .cardTwo { + max-width: 380px; + } + + .container-imageSecondFooter { + margin-bottom: 6%; + } +} \ No newline at end of file