diff --git a/assets/images/facebook.png b/assets/images/facebook.png new file mode 100644 index 0000000..170d82f Binary files /dev/null and b/assets/images/facebook.png differ diff --git a/assets/images/instagram.png b/assets/images/instagram.png new file mode 100644 index 0000000..922af3c Binary files /dev/null and b/assets/images/instagram.png differ diff --git a/assets/images/oculos.png b/assets/images/oculos.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/images/oculos.png differ diff --git a/assets/images/oculosdesktop.png b/assets/images/oculosdesktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/images/oculosdesktop.png differ diff --git a/assets/images/youtube.png b/assets/images/youtube.png new file mode 100644 index 0000000..2227a63 Binary files /dev/null and b/assets/images/youtube.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index f917083..b4c3e27 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -28,7 +28,6 @@ body{ .top-infocard{ display: flex; align-items: center; - justify-content: center; flex-direction: column; max-width: 100%; padding-top: 4%; @@ -96,6 +95,7 @@ body{ background-color: #E0E0E0; display: flex; justify-content: center; + margin-bottom: 10.02% } .middle-banners{ @@ -111,3 +111,104 @@ body{ width: 29.28%; } +.botton-cards{ + display: flex; + justify-content: center; + width: 92.4%; + gap: 1%; +} + +.botton-card{ + background: #FFFFFF; + display: flex; + flex-direction: column; + width: 30%; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.botton-card-img{ + width: 24%; + margin-top: 7.4%; + align-self: center; +} + +.botton-card-description{ + text-align: center; + font-size: 16px; + line-height: 24px; + padding: 3.3% 7.63% 15%; +} + +.botton-card-img-cell{ + margin-top: 7.4%; + width: 19.5%; + align-self: center; +} + +.botton-crd{ + display: flex; + justify-content: center; + margin-bottom: 5.68%; +} + + +.bottom-infocard{ + display: flex; + align-items: center; + flex-direction: column; + margin-bottom: 6.1%; +} + +.bottom-infocard-img{ + width: 71.5%; +} + +.bottom-infocard-title{ + font-size: 32px; + line-height: 38px; + text-align: center; +} + +.bottom-infocard-text{ + max-width: 29%; + text-align: center; + font-size: 16px; + line-height: 24px; + padding-bottom: 2.63%; +} + +.bottom-infocard-description{ + font-size: 16px; + line-height: 130%; + height: 94%; +} + +.footer{ + background-color: #000; + display: flex; + flex-direction: column; + padding: 2.23% 0; +} + +.texto-footer{ + color: #BDBDBD; + align-self: center; + font-size: 10px; +} + +.logos{ + display: flex; + align-items: center; + justify-content: center; + list-style-type: none; + margin-bottom: 0.4%; +} + +.lista-logo{ + margin: 0 0.5%; + display: flex; +} + +.imagens-logo{ + width: 1.25vw; +} diff --git a/index.html b/index.html index 906e653..6cdb67d 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,56 @@ - +
+
+
+ Imagem 1 do card de baixo +

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

+
+
+ Imagem 2 do card de baixo +

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

+
+
+ Imagem 3 do card de baixo +

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

+
+
+ Imagem 4 do card de baixo +

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

+
+
+
+
+
+

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.

+
+ Banner do inforcard de baixo +
+ \ No newline at end of file