diff --git a/index.html b/index.html new file mode 100644 index 0000000..0f0988f --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + Flexbox Responsive + + + +
+ + +
+

Hero

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, porta condimentum mauris eu, auctor ornare dui.

+
+
+ + +
+
+

Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, porta condimentum mauris eu, auctor ornare dui. Nunc semper consectetur libero, eget pharetra elit tempor sed. Integer vel molestie ligula, et varius lacus. In commodo placerat ligula, ut scelerisque ex auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+

In ut posuere ligula. Proin volutpat dapibus nibh, nec lacinia ligula vulputate et. Sed lacinia, arcu a eleifend blandit, lacus libero cursus nunc, nec interdum purus urna nec massa. Donec volutpat sollicitudin risus, eget iaculis mauris tincidunt vel. Nullam ac dapibus ex. Phasellus dapibus nunc eu nunc volutpat sollicitudin. Phasellus convallis mollis mi faucibus faucibus.

+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..74afd5c --- /dev/null +++ b/style.css @@ -0,0 +1,226 @@ +/* Medidas para móvil max 450px */ +@media screen, (max-width : 450px) { + + body{ + background-color : black; + margin: 10px; + } + + /* Con heading agrupo el header y el hero del HTML */ + #heading{ + display : flex; + flex-direction : column; + width : 100%; + margin-top : 7px; + } + + #header { + width : 100%; + height : 90px; + color : white; + font-size : 30px; + background-color : #33CCFF; + font-size : 20px; + margin-top : 3px; + } + + p { + margin-top : 12px; + margin-left : 12px; + margin-right : 10px; + font-size : 15px; + } + + #hero { + width : 100%; + height : 110px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : 3px; + } + + #content { + width : 100%; + height : 285px; + color : white; + font-size : 30px; + background-color : green; + margin-top : 3px; + padding-top : 1px; + padding-bottom : 15px; + } + + #sidebar { + width: 100%; + height : 140px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : 3px; + padding-top : 1px; + + } + + #footer { + width : 100%; + height : 180px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : 3px; + padding-top : 1px; + } + +} + +/* Medidas para la tablet 451px */ +@media ( min-width: 451px ) { + + body{ + background-color: black; + margin: 12px; + } + + #heading{ + display : flex; + flex-direction : column; + width : 100%; + margin-top : 7px; + } + + #header { + width : 100%; + height : 80px; + color : white; + font-size : 30px; + background-color : #33CCFF; + font-size : 20px; + margin-top : 3px; + + } + + #hero { + width : 100%; + height : 110px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : 3px; + + } + + #contenedor{ + display: flex; + flex-direction: row; + } + + #content { + width : 60%; + height : 450px; + color : white; + font-size : 30px; + background-color : green; + margin-top : 3px; + } + + #sidebar { + width : 40%; + height : 465px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : 3px; + margin-left : 3px; + + } + + #footer { + width : 100%; + height : 165px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : 3px; + } + +} + +/* medidas para Desktop 1024px */ +@media (min-width: 1024px) { + + body{ + background-color: black; + } + + #heading{ + display: flex; + flex-direction: column; + width: 100%; + margin-top: 7px; + } + + #header { + width : 100%; + height : 80px; + color : white; + font-size : 30px; + background-color : #33CCFF; + font-size : 20px; + margin-top : 3px; + + } + + #hero { + width : 100%; + height : 110px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : 3px; + + } + + #contenedor{ + display: flex; + flex-direction: row; + width: 75%; + margin: auto; + } + + + #content { + width : 70%; + height : 380px; + color : white; + font-size : 30px; + background-color : green; + margin-top : 3px; + + } + + #sidebar { + width: 40%; + height : 395px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : 3px; + margin-left : 3px; + + } + + #footer { + width : 100%; + height : 105px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : 3px; + margin-bottom: 5px; + } + +} \ No newline at end of file