diff --git a/index.html b/index.html index 1b8846b..a134da5 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +

Ironhack News

- + +
@@ -37,7 +39,8 @@

Main Article

- + +
Article 1 Image @@ -69,9 +72,9 @@

Article 3

+
- diff --git a/styles/style.css b/styles/style.css index 9571ab1..18b285b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,18 +4,28 @@ html { box-sizing: border-box; font-size: 16px; } - -*, *:before, *:after { + +*, +*:before, +*:after { box-sizing: inherit; } - -body, h1, h2, h3, h4, h5, h6, p, ol, ul { + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; } - /* DO NOT REMOVE - Styling for the label showing the viewport width */ .viewport-dimensions { position: fixed; @@ -27,7 +37,7 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul { padding: 5px 8px; font-size: 14px; } - + /* STYLES */ /* Fonts */ @@ -175,5 +185,70 @@ header { .btn-blue { background-color: #007bff; } - + /* Write your CSS below */ + + + +/* PRIMERA PARTE max-width: 760px*/ +/* nav bar */ +@media screen and (max-width: 760px) { + header { + display: flex; + flex-direction: column; + } + .navbar { + display: flex; + flex-direction: column; + align-items: center; + } + +} +/* nav bar */ + +/* primer articulo */ +@media screen and (max-width: 760px) { + .main-article { + display: flex; + + flex-direction: column; + align-items: center; + } + + +/* primer articulo */ + +/* segundo articulo */ +@media screen and (max-width: 760px) { + .articles-container { + display: flex; + flex-direction: column; + } + .article{ + display: flex; + + flex-direction: column; + } +} +/* segundo articulo */ +/* PRIMERA PARTE max-width: 760px*/ + + + +/* SEGUNDA PARTE width > 760px and width < 1024px*/ +@media screen and (min-width: 760px) and (max-width: 900px) { + + header { + display: flex; + justify-content: center; + } +} + +.articles-container{ + display: flex; + flex-wrap: wrap-reverse; +} + + + +/* SEGUNDA PARTE width > 760px and width < 1024px*/ \ No newline at end of file