diff --git a/assets/styles/components/_footer.scss b/assets/styles/components/_footer.scss new file mode 100644 index 0000000..0a53c47 --- /dev/null +++ b/assets/styles/components/_footer.scss @@ -0,0 +1,13 @@ +footer{ + display: grid; + background-color: $footerMainColor; + margin-top: 6.25rem; + padding: 6.25rem 0 6.25rem 0; + p{ + color: $footerParaphColor; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + } +} \ No newline at end of file diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss new file mode 100644 index 0000000..5d63c68 --- /dev/null +++ b/assets/styles/components/_header.scss @@ -0,0 +1,57 @@ +#header_container{ + /*display: inline-grid;*/ + display: grid; + padding: 6.25rem 0 6.25rem 0; + place-items: center; + justify-content: center; + img { + padding: 0; + border-radius: 8px; + } + /* img:last-child{ //IMPORTANTE PREGUNTAR A DAVID + height: 200px; + }*/ + img:nth-last-child(1){ //IMPORTANTE + filter: blur(0.2px); + } + figure{ + display: flex; + justify-content: center; + align-items: center; + } +} + +#section_header_container{ + display: flex; + flex-direction: column; + align-items: center; + margin: 1.56rem 1rem 0 1.56rem; + h2{ + margin: 0.75rem 0 0.75rem 0; + font-weight: 300; + } + h1{ + font-weight: 600; + font-size: 2.625rem; + } +} + +#second_header_container{ + padding: 6.25rem 0 6.25rem 0; + background-color: $secondHeaderContainer; + text-align: center; + h1{ + font-weight: 600; + margin-bottom: 0.5em; + font-family: $primaryFontFamily, $secondaryFontFamily; + } + p{ + font-size: 1rem; + line-height: 1.6em; + } + p:nth-last-child(1){ + margin-top: 2.4rem; + } +} + + diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss deleted file mode 100644 index e69de29..0000000 diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 9c2069a..093e691 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -1,3 +1,45 @@ -h1 { - color: $colorDark; -} +#main_container { + display: grid; + width: 90%; + margin: 0 auto; + img { + padding: 0; + border-radius: 8px; + } + + .articles_container_one, .articles_container_three, .articles_container_five { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2 { + margin-bottom: .75rem; + font-weight: 600; + } + p { + width: 80%; + } + figure { + margin-top: 1rem; + img { + border-radius: 8px; + } + } + } + + .articles_container_two, .articles_container_four { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; + h2 { + margin-bottom: .75rem; + font-weight: 600; + } + p { + width: 80%; + } + figure { + margin-top: 1rem; + img { + border-radius: 8px; + } + } + } +} \ No newline at end of file diff --git a/assets/styles/components/_page_images.scss b/assets/styles/components/_page_images.scss new file mode 100644 index 0000000..bc4c04a --- /dev/null +++ b/assets/styles/components/_page_images.scss @@ -0,0 +1,7 @@ +.page_images{ + width: $imageWidth; + height: $imageHeight; + padding: $imagePadding $imagePadding 0 $imagePadding; + justify-content: center; + border-radius: 8px; +} diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index 24a485a..5e8cab1 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -1,7 +1,64 @@ +@import "variables.scss"; //BREAKPOINTS MOBILE FIRST // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { + figure .page_images{ + width: $imageNewWidthIpad; + height: $imageNewHeightIpad; + } +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media (min-width: 992px) { + + #header_container{ + padding: 0 1rem 0 1rem; + margin: 6rem 0 5rem 0; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "text image"; + .header_container_text{ + display: flex; + justify-content: space-around; + } + .header_main_img{ + grid-area: image; + } + .header_container_text{ + grid-area: text; + } + } + + .article_left{ + margin:0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "text image"; + .text_container{ + grid-area: text; + } + .img_container{ + grid-area: image; + } + } + + .article_right{ + margin:0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "image text"; + .img_container{ + grid-area: image; + } + .text_container{ + grid-area:text; + } + } +} diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..b136a19 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,20 @@ -$colorLight: #fff; -$colorDark: #000; +//Page colors +$headerColor: #282A36; +$secondHeaderContainer :#f4f7fc; +$footerMainColor: black; +$footerParaphColor: white; + +//375 image sizes +$imageWidth: 288px; +$imageHeight: 190px; + +//768 image sizes +$imageNewWidthIpad: 536px; +$imageNewHeightIpad: 354px; + +//images spaces +$imagePadding: 1rem; + +//font styles +$primaryFontFamily: Roboto; +$secondaryFontFamily: sans-serif; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index b24e8b5..6003e3c 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,60 @@ text-rendering: optimizeLegibility; } +@media (min-width: 768px) { + figure .page_images { + width: 536px; + height: 354px; + } +} +@media (min-width: 992px) { + #header_container { + padding: 0 1rem 0 1rem; + margin: 6rem 0 5rem 0; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "text image"; + } + #header_container .header_container_text { + display: flex; + justify-content: space-around; + } + #header_container .header_main_img { + grid-area: image; + } + #header_container .header_container_text { + grid-area: text; + } + + .article_left { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "text image"; + } + .article_left .text_container { + grid-area: text; + } + .article_left .img_container { + grid-area: image; + } + + .article_right { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "image text"; + } + .article_right .img_container { + grid-area: image; + } + .article_right .text_container { + grid-area: text; + } +} html { font-family: "Inter", sans-serif; } @@ -17,8 +71,126 @@ html { font-family: "Inter var", sans-serif; } } -h1 { - color: #000; +#header_container { + /*display: inline-grid;*/ + display: grid; + padding: 6.25rem 0 6.25rem 0; + place-items: center; + justify-content: center; + /* img:last-child{ //IMPORTANTE PREGUNTAR A DAVID + height: 200px; + }*/ +} +#header_container img { + padding: 0; + border-radius: 8px; +} +#header_container img:nth-last-child(1) { + filter: blur(0.2px); +} +#header_container figure { + display: flex; + justify-content: center; + align-items: center; +} + +#section_header_container { + display: flex; + flex-direction: column; + align-items: center; + margin: 1.56rem 1rem 0 1.56rem; +} +#section_header_container h2 { + margin: 0.75rem 0 0.75rem 0; + font-weight: 300; +} +#section_header_container h1 { + font-weight: 600; + font-size: 2.625rem; +} + +#second_header_container { + padding: 6.25rem 0 6.25rem 0; + background-color: #f4f7fc; + text-align: center; +} +#second_header_container h1 { + font-weight: 600; + margin-bottom: 0.5em; + font-family: Roboto, sans-serif; +} +#second_header_container p { + font-size: 1rem; + line-height: 1.6em; +} +#second_header_container p:nth-last-child(1) { + margin-top: 2.4rem; +} + +.page_images { + width: 288px; + height: 190px; + padding: 1rem 1rem 0 1rem; + justify-content: center; + border-radius: 8px; +} + +#main_container { + display: grid; + width: 90%; + margin: 0 auto; +} +#main_container img { + padding: 0; + border-radius: 8px; +} +#main_container .articles_container_one, #main_container .articles_container_three, #main_container .articles_container_five { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_one h2, #main_container .articles_container_three h2, #main_container .articles_container_five h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_one p, #main_container .articles_container_three p, #main_container .articles_container_five p { + width: 80%; +} +#main_container .articles_container_one figure, #main_container .articles_container_three figure, #main_container .articles_container_five figure { + margin-top: 1rem; +} +#main_container .articles_container_one figure img, #main_container .articles_container_three figure img, #main_container .articles_container_five figure img { + border-radius: 8px; +} +#main_container .articles_container_two, #main_container .articles_container_four { + padding: 0 1rem 0 1rem; + margin: 5rem 0 4rem 0; +} +#main_container .articles_container_two h2, #main_container .articles_container_four h2 { + margin-bottom: 0.75rem; + font-weight: 600; +} +#main_container .articles_container_two p, #main_container .articles_container_four p { + width: 80%; +} +#main_container .articles_container_two figure, #main_container .articles_container_four figure { + margin-top: 1rem; +} +#main_container .articles_container_two figure img, #main_container .articles_container_four figure img { + border-radius: 8px; +} + +footer { + display: grid; + background-color: black; + margin-top: 6.25rem; + padding: 6.25rem 0 6.25rem 0; +} +footer p { + color: white; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; } /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index b8df8d2..9b00c59 100644 --- a/assets/styles/styles.css.map +++ b/assets/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_main.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","modules/_variables.scss","components/_header.scss","components/_page_images.scss","components/_main.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACFF;EACE;IACE,OCKgB;IDJhB,QCKiB;;;ADArB;EAEE;IACE;IACA;IACA;IACA;IACA;IACA,qBACE;;EACD;IACE;IACA;;EAEH;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;EAIJ;IACE;IACA;IACA;IACA;IACA,qBACE;;EACF;IACE;;EAEF;IACE;;;AF3DN;EAAO;;;AACP;EACE;IAAO;;;AIHT;AACE;EACA;EACA;EACA;EACA;AAKD;AAAA;AAAA;;AAJC;EACE;EACA;;AAKF;EACE;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;;AAIJ;EACE;EACA,kBDtCsB;ECuCtB;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;;ACpDJ;EACE,OFMW;EELX,QFMY;EELZ;EACA;EACA;;;ACLF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;AAKN;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;;ACxCR;EACE;EACA,kBJCgB;EIAhB;EACA;;AACA;EACE,OJFgB;EIGhB;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 8909608..0fb6242 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -1,10 +1,12 @@ // CONFIG MODULES -@import "modules/app"; -@import "modules/breakpoints"; -@import "modules/mixins"; -@import "modules/typography"; -@import "modules/variables"; +@import "modules/app.scss"; +@import "modules/breakpoints.scss"; +@import "modules/mixins.scss"; +@import "modules/typography.scss"; +@import "modules/variables.scss"; // COMPONENTS -@import "components/main"; -@import "components/hero"; +@import "components/header.scss"; +@import "components/page_images.scss"; +@import "components/main.scss"; +@import "components/footer.scss"; \ No newline at end of file diff --git a/index.html b/index.html index 5ac1c71..ce9ba5e 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,97 @@ + + Sass Project + -

Hello world!

+
+
+ +

Lorem ipsum lorem ipsum
for photos

+
+
+ header_image +
+
+ +
+

Easy to use, stylish placeholders

+

Just add your desired image size (width & height) after our URL, and you'll get a random image.

+

To get a square image, just add the size.

+
+ +
+ +
+
+

Specify image

+

Get a specific image by adding /id/{image} to the start of the url.

+

You can find a list of all the images here.

+
+
+ img +
+ +
+ +
+
+

Static Random Image

+

Get the same random image every time based on a seed, by adding /seed/{seed} to the start of the url.

+
+
+ img +
+
+ +
+
+

Grayscale

+

Get a grayscale image by appending ?grayscale to the end of the url.

+
+
+ img +
+
+ +
+
+

Blur

+

You can adjust the amount of blur by providing a number between 1 and 10.

+
+
+ img +
+
+ +
+
+

Advanced Usage

+

You may combine any of the options above. For example, to get a specific image that is grayscale and + blurred.

+
+
+ img +
+
+
+ +