From 52e595ada252f08e843a56a4b06bf4fc713949b7 Mon Sep 17 00:00:00 2001 From: OmarjLand Date: Fri, 10 Feb 2023 21:51:31 +0100 Subject: [PATCH 1/3] Just finished the exercice --- index.html | 37 +++++++++ style.css | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 263 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..7ba1f03 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + Flexbox Responsive + + + + +
+ Header +
+ +
+ +
+ Hero +
+ + +
+
Content
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5a9b454 --- /dev/null +++ b/style.css @@ -0,0 +1,226 @@ +header{ + background-color : #33CCFF; + width : 100%; + height : 60px; + color : white; +} + +body{ + border: 1px solid black; + margin: auto; +} + +/* Medidas móvil */ +@media screen, ( max-width:450px ) { + + body{ + border: 1px solid black; + margin: auto; + } + + header { + + width: 96%; + height: 40px; + font-size: 30px; + background-color: #33CCFF; + margin-top: 7px; + margin-left: 5px; + padding-left: 8px; + + } + + #hero { + width : 96%; + height : 150px; + color : white; + font-size: 30px; + background-color: red; + font-size: 30px; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + #content { + width : 96%; + height : 200px; + color : white; + font-size: 30px; + background-color: green; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + #sidebar { + width: 96%; + height : 250px; + color : white; + font-size: 30px; + background-color: #7400E1; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + footer { + width: 96%; + height : 30px; + font-size: 30px; + color : white; + background-color : #808080; + margin-top: 5px; + margin-left: 5px; + margin-bottom : 5px; + padding-left: 8px; + } + +} + +/* Medidas Tablet */ +@media (min-width: 451px) { + + header { + width: 96%; + height: 40px; + font-size: 30px; + background-color: #33CCFF; + margin-top: 7px; + margin-left: 5px; + padding-left: 8px; + } + + #hero { + width : 96%; + height : 100px; + color : white; + font-size: 30px; + background-color: red; + font-size: 30px; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + } + + #container{ + display: flex; + } + + #content { + width: 56%; + height: 440px; + color: white; + font-size: 30px; + background-color: green; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + #sidebar { + width: 37%; + height: 440px; + color: white; + font-size: 30px; + background-color: #7400E1; + margin-top: 5px; + margin-left: 5px; + padding-left: 10px; + + } + + + footer { + width: 96%; + height : 30px; + font-size: 30px; + color : white; + background-color : #808080; + margin-top: 5px; + margin-left: 5px; + margin-bottom : 5px; + padding-left: 8px; + } + +} + + +/* Medidas de escritorio */ +@media ( min-width: 1024px ) { + + #big-container{ + /* display: contents; + flex-direction: column; + justify-content: center; + align-items: center; */ + width: 50%; + padding-left: 25%; + padding-right: 25%; + } + + header { + width: 98%; + height: 60px; + font-size: 30px; + background-color: #33CCFF; + margin-top: 7px; + margin-left: 5px; + padding-left: 8px; + } + + #hero { + width: 98%; + height: 150px; + color: white; + font-size: 30px; + background-color: red; + font-size: 30px; + margin-top: 5px; + margin-left: 5px; + padding-left: 5px; + + } + + #content { + width : 98%; + height : 390px; + color : white; + font-size: 30px; + background-color: green; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + #sidebar { + width: 50%; + height: 390px; + color: white; + font-size: 30px; + background-color: #7400E1; + margin-top: 5px; + margin-left: 5px; + padding-left: 8px; + + } + + footer { + width: 98%; + height : 60px; + font-size: 30px; + color : white; + background-color : #808080; + margin-top: 5px; + margin-left: 5px; + margin-bottom : 5px; + padding-left: 8px; + } + + +} \ No newline at end of file From abdbf84ddff329dc5c86c623d3beadc70beb3466 Mon Sep 17 00:00:00 2001 From: OmarjLand Date: Sat, 11 Feb 2023 10:51:23 +0100 Subject: [PATCH 2/3] Added text and aligned few things --- index.html | 26 +++-- style.css | 294 ++++++++++++++++++++++++++++------------------------- 2 files changed, 171 insertions(+), 149 deletions(-) diff --git a/index.html b/index.html index 7ba1f03..71aa34b 100644 --- a/index.html +++ b/index.html @@ -11,26 +11,36 @@
- Header +

Header

+

Lorem ipsum dolo

-
+
+

Hero

+

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

+
-
- Hero -
+
-
Content
- +
+

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.

+
+
- Footer +

Footer

+

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.

diff --git a/style.css b/style.css index 5a9b454..f6d0e3f 100644 --- a/style.css +++ b/style.css @@ -1,225 +1,237 @@ -header{ - background-color : #33CCFF; +/* header{ width : 100%; height : 60px; color : white; -} + background-color : black; +} */ body{ - border: 1px solid black; - margin: auto; + border : 1px solid black; + margin : auto; } -/* Medidas móvil */ -@media screen, ( max-width:450px ) { +/* Medidas móvil max-width:450px */ +@media screen, ( max-width:463px ) { body{ - border: 1px solid black; - margin: auto; + border : 1px solid black; + margin : auto; + background-color : black; } header { - width: 96%; - height: 40px; - font-size: 30px; - background-color: #33CCFF; - margin-top: 7px; - margin-left: 5px; - padding-left: 8px; + width : 96%; + height : 80px; + color : white; + font-size : 30px; + background-color : #33CCFF; + font-size : 20px; + margin-top : -10px; + margin-left : 5px; + padding-left : 8px; + } + p { + padding-top : 5px; + font-size : 15px; } #hero { - width : 96%; - height : 150px; - color : white; - font-size: 30px; - background-color: red; - font-size: 30px; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 96%; + height : 110px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : -12px; + margin-left : 5px; + padding-left : 8px; } #content { - width : 96%; - height : 200px; - color : white; - font-size: 30px; - background-color: green; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 96%; + height : 285px; + color : white; + font-size : 30px; + background-color : green; + margin-top : -12px; + margin-left : 5px; + padding-left : 8px; } #sidebar { width: 96%; - height : 250px; - color : white; - font-size: 30px; - background-color: #7400E1; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + height : 140px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : -12px; + margin-left : 5px; + padding-left : 8px; } footer { - width: 96%; - height : 30px; - font-size: 30px; - color : white; - background-color : #808080; - margin-top: 5px; - margin-left: 5px; - margin-bottom : 5px; - padding-left: 8px; + width : 96%; + height : 140px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : -12px; + margin-left : 5px; + margin-bottom : 5px; + padding-left : 8px; } } /* Medidas Tablet */ -@media (min-width: 451px) { +@media (min-width: 464px) { header { - width: 96%; - height: 40px; - font-size: 30px; - background-color: #33CCFF; - margin-top: 7px; - margin-left: 5px; - padding-left: 8px; + width : 96%; + height : 75px; + font-size : 30px; + background-color : #33CCFF; + margin-top : -10px; + margin-left : 5px; + padding-left : 8px; } #hero { - width : 96%; - height : 100px; - color : white; - font-size: 30px; - background-color: red; - font-size: 30px; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 96%; + height : 100px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : -12px; + margin-left : 5px; + padding-left : 8px; } #container{ - display: flex; + display : flex; + /* flex-direction: row; */ } #content { - width: 56%; - height: 440px; - color: white; - font-size: 30px; - background-color: green; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 56%; + height : 450px; + color : white; + font-size : 30px; + background-color : green; + margin-top : 3px; + margin-left : 5px; + padding-left : 7px; } #sidebar { - width: 37%; - height: 440px; - color: white; - font-size: 30px; - background-color: #7400E1; - margin-top: 5px; - margin-left: 5px; - padding-left: 10px; + width : 37%; + height : 450px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : 3px; + margin-left : 3px; + padding-left : 12px; } footer { - width: 96%; - height : 30px; - font-size: 30px; - color : white; + width : 96%; + height : 150px; + font-size : 30px; + color : white; background-color : #808080; - margin-top: 5px; - margin-left: 5px; - margin-bottom : 5px; - padding-left: 8px; + margin-top : -11px; + margin-left : 5px; + margin-bottom : 5px; + padding-left : 8px; } } -/* Medidas de escritorio */ +/* Medidas de escritorio min-width: 1024px */ @media ( min-width: 1024px ) { - #big-container{ - /* display: contents; - flex-direction: column; - justify-content: center; - align-items: center; */ - width: 50%; - padding-left: 25%; - padding-right: 25%; + #big-container { + width : 85%; + padding-left : 7%; + padding-right : 25%; + } + + .desktop { + width : 98%; } header { - width: 98%; - height: 60px; - font-size: 30px; - background-color: #33CCFF; - margin-top: 7px; - margin-left: 5px; - padding-left: 8px; + width : 98%; + height : 90px; + font-size : 30px; + background-color : #33CCFF; + margin-top : 7px; + margin-left : 5px; + padding-left : 8px; + } + + p { + font-size : 15px; } #hero { - width: 98%; - height: 150px; - color: white; - font-size: 30px; - background-color: red; - font-size: 30px; - margin-top: 5px; - margin-left: 5px; - padding-left: 5px; + width : 98%; + height : 90px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : -10px; + margin-left : 5px; + padding-left : 8px; } #content { - width : 98%; - height : 390px; - color : white; - font-size: 30px; - background-color: green; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 98%; + height : 390px; + color : white; + font-size : 30px; + background-color : green; + margin-top : 5px; + margin-left : 5px; + padding-left : 8px; } #sidebar { - width: 50%; - height: 390px; - color: white; - font-size: 30px; - background-color: #7400E1; - margin-top: 5px; - margin-left: 5px; - padding-left: 8px; + width : 50%; + height : 390px; + color : white; + font-size : 30px; + background-color : #7400E1; + margin-top : 5px; + margin-left : 5px; + padding-left : 8px; } footer { - width: 98%; - height : 60px; - font-size: 30px; - color : white; - background-color : #808080; - margin-top: 5px; - margin-left: 5px; - margin-bottom : 5px; - padding-left: 8px; + width : 98%; + height : 90px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : -10px; + margin-left : 5px; + margin-bottom : 5px; + padding-left : 8px; } From 187651e8e37f2d8a99dd18fd36403762126ce283 Mon Sep 17 00:00:00 2001 From: OmarjLand Date: Tue, 14 Feb 2023 00:10:29 +0100 Subject: [PATCH 3/3] Updated structure by flex --- index.html | 53 +++++------ style.css | 254 +++++++++++++++++++++++++---------------------------- 2 files changed, 148 insertions(+), 159 deletions(-) diff --git a/index.html b/index.html index 71aa34b..0f0988f 100644 --- a/index.html +++ b/index.html @@ -8,40 +8,41 @@ Flexbox Responsive + +
+ - -
-

Header

-

Lorem ipsum dolo

-
- -
-

Hero

-

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

+
+

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.

-
- + +
+
+

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.

+
-
-

Footer

-

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.

-
+ + \ No newline at end of file diff --git a/style.css b/style.css index f6d0e3f..74afd5c 100644 --- a/style.css +++ b/style.css @@ -1,238 +1,226 @@ -/* header{ - width : 100%; - height : 60px; - color : white; - background-color : black; -} */ - -body{ - border : 1px solid black; - margin : auto; -} - -/* Medidas móvil max-width:450px */ -@media screen, ( max-width:463px ) { +/* Medidas para móvil max 450px */ +@media screen, (max-width : 450px) { body{ - border : 1px solid black; - margin : auto; - background-color : black; + background-color : black; + margin: 10px; } - header { + /* Con heading agrupo el header y el hero del HTML */ + #heading{ + display : flex; + flex-direction : column; + width : 100%; + margin-top : 7px; + } - width : 96%; - height : 80px; + #header { + width : 100%; + height : 90px; color : white; font-size : 30px; background-color : #33CCFF; font-size : 20px; - margin-top : -10px; - margin-left : 5px; - padding-left : 8px; + margin-top : 3px; } p { - padding-top : 5px; - font-size : 15px; + margin-top : 12px; + margin-left : 12px; + margin-right : 10px; + font-size : 15px; } #hero { - width : 96%; + width : 100%; height : 110px; color : white; font-size : 30px; background-color : red; font-size : 30px; - margin-top : -12px; - margin-left : 5px; - padding-left : 8px; - + margin-top : 3px; } #content { - width : 96%; + width : 100%; height : 285px; color : white; font-size : 30px; background-color : green; - margin-top : -12px; - margin-left : 5px; - padding-left : 8px; - + margin-top : 3px; + padding-top : 1px; + padding-bottom : 15px; } #sidebar { - width: 96%; + width: 100%; height : 140px; color : white; font-size : 30px; background-color : #7400E1; - margin-top : -12px; - margin-left : 5px; - padding-left : 8px; + margin-top : 3px; + padding-top : 1px; } - footer { - width : 96%; - height : 140px; + #footer { + width : 100%; + height : 180px; font-size : 30px; color : white; background-color : #808080; - margin-top : -12px; - margin-left : 5px; - margin-bottom : 5px; - padding-left : 8px; + margin-top : 3px; + padding-top : 1px; } } -/* Medidas Tablet */ -@media (min-width: 464px) { +/* 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; - header { - width : 96%; - height : 75px; - font-size : 30px; - background-color : #33CCFF; - margin-top : -10px; - margin-left : 5px; - padding-left : 8px; } #hero { - width : 96%; - height : 100px; - color : white; - font-size : 30px; - background-color : red; - font-size : 30px; - margin-top : -12px; - margin-left : 5px; - padding-left : 8px; + width : 100%; + height : 110px; + color : white; + font-size : 30px; + background-color : red; + font-size : 30px; + margin-top : 3px; + } - #container{ - display : flex; - /* flex-direction: row; */ + #contenedor{ + display: flex; + flex-direction: row; } #content { - width : 56%; + width : 60%; height : 450px; color : white; font-size : 30px; background-color : green; margin-top : 3px; - margin-left : 5px; - padding-left : 7px; - } #sidebar { - width : 37%; - height : 450px; + width : 40%; + height : 465px; color : white; font-size : 30px; background-color : #7400E1; margin-top : 3px; margin-left : 3px; - padding-left : 12px; } - - footer { - width : 96%; - height : 150px; - font-size : 30px; - color : white; - background-color : #808080; - margin-top : -11px; - margin-left : 5px; - margin-bottom : 5px; - padding-left : 8px; + #footer { + width : 100%; + height : 165px; + font-size : 30px; + color : white; + background-color : #808080; + margin-top : 3px; } } +/* medidas para Desktop 1024px */ +@media (min-width: 1024px) { -/* Medidas de escritorio min-width: 1024px */ -@media ( min-width: 1024px ) { - - #big-container { - width : 85%; - padding-left : 7%; - padding-right : 25%; + body{ + background-color: black; } - .desktop { - width : 98%; + #heading{ + display: flex; + flex-direction: column; + width: 100%; + margin-top: 7px; } - header { - width : 98%; - height : 90px; - font-size : 30px; - background-color : #33CCFF; - margin-top : 7px; - margin-left : 5px; - padding-left : 8px; - } + #header { + width : 100%; + height : 80px; + color : white; + font-size : 30px; + background-color : #33CCFF; + font-size : 20px; + margin-top : 3px; - p { - font-size : 15px; } #hero { - width : 98%; - height : 90px; - color : white; - font-size : 30px; - background-color : red; - font-size : 30px; - margin-top : -10px; - margin-left : 5px; - padding-left : 8px; + 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 : 98%; - height : 390px; + width : 70%; + height : 380px; color : white; font-size : 30px; background-color : green; - margin-top : 5px; - margin-left : 5px; - padding-left : 8px; + margin-top : 3px; } #sidebar { - width : 50%; - height : 390px; + width: 40%; + height : 395px; color : white; font-size : 30px; background-color : #7400E1; - margin-top : 5px; - margin-left : 5px; - padding-left : 8px; + margin-top : 3px; + margin-left : 3px; } - footer { - width : 98%; - height : 90px; + #footer { + width : 100%; + height : 105px; font-size : 30px; color : white; background-color : #808080; - margin-top : -10px; - margin-left : 5px; - margin-bottom : 5px; - padding-left : 8px; + margin-top : 3px; + margin-bottom: 5px; } - } \ No newline at end of file