diff --git a/assets/img/computadores.png b/assets/img/midle-computer.png similarity index 100% rename from assets/img/computadores.png rename to assets/img/midle-computer.png diff --git a/index.html b/index.html index b1b7196..244e843 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,20 @@ + +
+
+

Lorem ipsum

+

Dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+ Computadores alinhados. Um em cuma e dois embaixo, ligados por setas. + + +
+
diff --git a/style/style.css b/style/style.css index 2464afa..15f82fe 100644 --- a/style/style.css +++ b/style/style.css @@ -48,6 +48,58 @@ main { display: none; } + +/* AREA ABAIXO DO BANNER */ + +.container-midle { + width: 100%; +} + +.container-midle-flex { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 74px; + border: 2px solid red; +} + +.container-midle-title { + width: 22%; + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.container-midle-subtitle { + width: 11.75%; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.container-midle-paragraph { + width: 40%; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 30px 0 74px; +} + + +/* .container-midle-banner { + max-width: 315px; +} */ + +.container-midle-img { + border: 1px solid; + width: 16%; + height: 16%; + display: block; +} + @media (max-width:1024px) { /* BANNER MOBILE */ .banner-img-desktop {