From a83cbedc7aa2f95cd9d59f55a18e04d2b7254e1a Mon Sep 17 00:00:00 2001 From: Santo Date: Thu, 25 Mar 2021 02:59:17 -0500 Subject: [PATCH 1/3] Fist Mobile --- assets/styles/components/_footer.scss | 15 +++ assets/styles/components/_header.scss | 33 ++++++ assets/styles/components/_hero.scss | 0 assets/styles/components/_image.scss | 8 ++ assets/styles/components/_main.scss | 101 ++++++++++++++++++ assets/styles/modules/_app.scss | 11 ++ assets/styles/modules/_variables.scss | 13 ++- assets/styles/styles.css | 141 ++++++++++++++++++++++++++ assets/styles/styles.css.map | 2 +- assets/styles/styles.scss | 4 +- index.html | 98 +++++++++++++++++- 11 files changed, 421 insertions(+), 5 deletions(-) create mode 100644 assets/styles/components/_footer.scss create mode 100644 assets/styles/components/_header.scss delete mode 100644 assets/styles/components/_hero.scss create mode 100644 assets/styles/components/_image.scss diff --git a/assets/styles/components/_footer.scss b/assets/styles/components/_footer.scss new file mode 100644 index 0000000..0ceb788 --- /dev/null +++ b/assets/styles/components/_footer.scss @@ -0,0 +1,15 @@ +footer{ + display: grid; + background-color: $backgroundFooter; + margin-top: 6.25rem; + padding: 6.25rem 0; + + p{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + color: white; + margin-top: 1rem; + padding: 0 1rem;} +} \ 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..2ff4968 --- /dev/null +++ b/assets/styles/components/_header.scss @@ -0,0 +1,33 @@ +.hero{ + display: grid; + place-items: center; + + .container-hero{ + margin: 5rem 0; + padding: 0 1rem 0 1rem; + text-align: center; + h1{ + font-size: 2.8rem; + font-weight: 600; + margin-bottom: 1rem; + } + p{ + font-size: 1.5rem; + font-weight: 300; + } + + img{ + width: 40px; + height: 40px; + border-radius: 19px; + padding: 0; + border: 1px solid black; + } + } + +} + + + + + 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/_image.scss b/assets/styles/components/_image.scss new file mode 100644 index 0000000..747abf7 --- /dev/null +++ b/assets/styles/components/_image.scss @@ -0,0 +1,8 @@ + + .images{ + img{ + width: $img-width; + height: $img-height; + + } +} \ No newline at end of file diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index e69de29..8118f01 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,101 @@ +.main-container{ + display: grid; + + .text-main{ + background-color: $backgroundSection; + padding: 6.25rem 0; + text-align: center; + + h2{ + font-size: 2.25rem; + font-weight: 600; + margin-bottom: 1rem; + } + p{ + font-size: 1rem; + } + + } + + .type-1{ + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; + + .section-text h3{ + font-size: 1.5rem; + margin: 0 0 .75rem; + } + .section-text p{ + font-size: 1rem; + } + .images{ + padding: 1rem 1rem 0 1rem; + } + } + + .type-2{ + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; + + .section-text h3{ + font-size: 1.5rem; + margin: 0 0 .75rem; + } + .section-text p{ + font-size: 1rem; + } + .images{ + padding: 1rem 1rem 0 1rem; + } + } + + .type-3{ + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; + + .section-text h3{ + font-size: 1.5rem; + margin: 0 0 .75rem; + } + .section-text p{ + font-size: 1rem; + } + .images{ + padding: 1rem 1rem 0 1rem; + } + } + + .type-4{ + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; + + .section-text h3{ + font-size: 1.5rem; + margin: 0 0 .75rem; + } + .section-text p{ + font-size: 1rem; + } + .images{ + padding: 1rem 1rem 0 1rem; + } + } + + .type-5{ + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; + + .section-text h3{ + font-size: 1.5rem; + margin: 0 0 .75rem; + } + .section-text p{ + font-size: 1rem; + } + .images{ + padding: 1rem 1rem 0 1rem; + } + } + +} + diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index cdfd8ae..a6de950 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -6,3 +6,14 @@ text-decoration: none; text-rendering: optimizeLegibility; } + +body{ + font-size: 16px; + font-family: 'Lato', sans-serif; +} + +/*img{ + max-width: 100%; +}*/ + + diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..d04f892 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,11 @@ -$colorLight: #fff; -$colorDark: #000; + + +$colorHeader: #6e6767; +$colorMain: #54117e; +$backgroundSection: #F4F7FC; +$backgroundFooter: #222121; + + +$img-width: 288px; +$img-height: 190px + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..ce4ef64 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,14 @@ text-rendering: optimizeLegibility; } +body { + font-size: 16px; + font-family: "Lato", sans-serif; +} + +/*img{ + max-width: 100%; +}*/ html { font-family: "Inter", sans-serif; } @@ -17,5 +25,138 @@ html { font-family: "Inter var", sans-serif; } } +.hero { + display: grid; + place-items: center; +} +.hero .container-hero { + margin: 5rem 0; + padding: 0 1rem 0 1rem; + text-align: center; +} +.hero .container-hero h1 { + font-size: 2.8rem; + font-weight: 600; + margin-bottom: 1rem; +} +.hero .container-hero p { + font-size: 1.5rem; + font-weight: 300; +} +.hero .container-hero img { + width: 40px; + height: 40px; + border-radius: 19px; + padding: 0; + border: 1px solid black; +} + +.main-container { + display: grid; +} +.main-container .text-main { + background-color: #F4F7FC; + padding: 6.25rem 0; + text-align: center; +} +.main-container .text-main h2 { + font-size: 2.25rem; + font-weight: 600; + margin-bottom: 1rem; +} +.main-container .text-main p { + font-size: 1rem; +} +.main-container .type-1 { + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; +} +.main-container .type-1 .section-text h3 { + font-size: 1.5rem; + margin: 0 0 0.75rem; +} +.main-container .type-1 .section-text p { + font-size: 1rem; +} +.main-container .type-1 .images { + padding: 1rem 1rem 0 1rem; +} +.main-container .type-2 { + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; +} +.main-container .type-2 .section-text h3 { + font-size: 1.5rem; + margin: 0 0 0.75rem; +} +.main-container .type-2 .section-text p { + font-size: 1rem; +} +.main-container .type-2 .images { + padding: 1rem 1rem 0 1rem; +} +.main-container .type-3 { + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; +} +.main-container .type-3 .section-text h3 { + font-size: 1.5rem; + margin: 0 0 0.75rem; +} +.main-container .type-3 .section-text p { + font-size: 1rem; +} +.main-container .type-3 .images { + padding: 1rem 1rem 0 1rem; +} +.main-container .type-4 { + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; +} +.main-container .type-4 .section-text h3 { + font-size: 1.5rem; + margin: 0 0 0.75rem; +} +.main-container .type-4 .section-text p { + font-size: 1rem; +} +.main-container .type-4 .images { + padding: 1rem 1rem 0 1rem; +} +.main-container .type-5 { + margin: 0 1rem; + padding: 6.2rem 0 4.2rem; +} +.main-container .type-5 .section-text h3 { + font-size: 1.5rem; + margin: 0 0 0.75rem; +} +.main-container .type-5 .section-text p { + font-size: 1rem; +} +.main-container .type-5 .images { + padding: 1rem 1rem 0 1rem; +} + +.images img { + width: 288px; + height: 190px; +} + +footer { + display: grid; + background-color: #222121; + margin-top: 6.25rem; + padding: 6.25rem 0; +} +footer p { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + color: white; + margin-top: 1rem; + padding: 0 1rem; +} /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index f39486f..4ede368 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"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_header.scss","components/_main.scss","components/_image.scss","modules/_variables.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;ADbA;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACvBN;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AC7FJ;EACE,OCKQ;EDJR,QCKS;;;ACTb;EACE;EACA,kBDGiB;ECFjB;EACA;;AAEA;EACE;EACA;EACA;EACA;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 43949c9..714a3a3 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -6,5 +6,7 @@ @import "modules/variables.scss"; // COMPONENTS +@import "components/header.scss"; @import "components/main.scss"; -@import "components/hero.scss"; +@import "components/image.scss"; +@import "components/footer.scss"; diff --git a/index.html b/index.html index 747a38f..5ab053c 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,107 @@ + + + + + Sass Project -

Hello world!

+ + +
+ +
+ +

Lorem ipsum

+

Lorem ipsum dolor sit amet.

+
+ +
+ image1 +
+ + + +
+ +
+ +
+

Lorem ipsum consectetur adipisicing

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda

+
+ + +
+
+

consectetur

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+
+ +
+ image2 +
+
+ +
+ +
+

amet

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+
+ +
+ image2 +
+
+ +
+
+

ipsum

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+
+ +
+ image2 +
+
+ +
+ +
+

Corporis

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+
+
+ image2 +
+
+ +
+
+

sit

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+
+
+ image2 +
+
+ +
+ + + From 4f4499632eb71c7244b6e130af95a057fbe17d29 Mon Sep 17 00:00:00 2001 From: Santo Date: Sat, 27 Mar 2021 00:54:53 -0500 Subject: [PATCH 2/3] SCSS proyect has been finished --- assets/styles/components/_header.scss | 27 +++- assets/styles/components/_image.scss | 7 +- assets/styles/components/_main.scss | 80 +++-------- assets/styles/modules/_breakpoints.scss | 118 +++++++++++++++- assets/styles/styles.css | 171 +++++++++++++++--------- assets/styles/styles.css.map | 2 +- index.html | 53 ++++---- 7 files changed, 290 insertions(+), 168 deletions(-) diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss index 2ff4968..b7508e6 100644 --- a/assets/styles/components/_header.scss +++ b/assets/styles/components/_header.scss @@ -1,30 +1,43 @@ -.hero{ +.hero { display: grid; place-items: center; + width: 100%; - .container-hero{ + .container-hero { margin: 5rem 0; padding: 0 1rem 0 1rem; text-align: center; - h1{ + + h1 { font-size: 2.8rem; font-weight: 600; margin-bottom: 1rem; } - p{ + + p { font-size: 1.5rem; font-weight: 300; } - img{ - width: 40px; - height: 40px; + img { + width: 80px; + height: 80px; border-radius: 19px; padding: 0; border: 1px solid black; } } + .images { + width: 80%; + .img-hero { + width: 100%; + border-radius: 10px; + } + + } + + } diff --git a/assets/styles/components/_image.scss b/assets/styles/components/_image.scss index 747abf7..87024ed 100644 --- a/assets/styles/components/_image.scss +++ b/assets/styles/components/_image.scss @@ -1,8 +1,11 @@ +/* .images{ - img{ + .img-hero{ width: $img-width; height: $img-height; + max-width: 100%; + border-radius: 20px; } -} \ No newline at end of file +}*/ diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 8118f01..ed878f3 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -1,5 +1,8 @@ .main-container{ display: grid; + margin: 0 auto; + width: 90%; + .text-main{ background-color: $backgroundSection; @@ -17,85 +20,32 @@ } - .type-1{ - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; - - .section-text h3{ - font-size: 1.5rem; - margin: 0 0 .75rem; - } - .section-text p{ - font-size: 1rem; - } - .images{ - padding: 1rem 1rem 0 1rem; - } - } + .type-all{ - .type-2{ - margin: 0 1rem; padding: 6.2rem 0 4.2rem; + width: 100%; .section-text h3{ font-size: 1.5rem; margin: 0 0 .75rem; - } - .section-text p{ - font-size: 1rem; - } - .images{ - padding: 1rem 1rem 0 1rem; - } - } - .type-3{ - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; - - .section-text h3{ - font-size: 1.5rem; - margin: 0 0 .75rem; } .section-text p{ font-size: 1rem; } - .images{ + .image-container{ + display: flex; + justify-content: center; + align-items: center; padding: 1rem 1rem 0 1rem; - } - } - - .type-4{ - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; + //height: 20rem; + img{ + width: 80%; + height: 15rem; + border-radius: 12px; - .section-text h3{ - font-size: 1.5rem; - margin: 0 0 .75rem; - } - .section-text p{ - font-size: 1rem; - } - .images{ - padding: 1rem 1rem 0 1rem; + } } } - - .type-5{ - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; - - .section-text h3{ - font-size: 1.5rem; - margin: 0 0 .75rem; - } - .section-text p{ - font-size: 1rem; - } - .images{ - padding: 1rem 1rem 0 1rem; - } - } - } diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index bbbea70..e1ebd3d 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -2,7 +2,121 @@ @import "variables"; // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { + +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media screen and (min-width: 992px) { + + .hero{ + margin: 0 auto; + height: 90vh; + display: grid; + grid: auto / repeat(2, 50%); + grid-template-areas: + "text img"; + + .container-hero{ + grid-area: text; + + } + .images { + grid-area: img; + padding: 1rem 1rem 0 1rem; + } + } + .type-container1{ + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "text img"; + + .section-text{ + grid-area: text; + } + + .images{ + grid-area: img; + padding: 1rem 1rem 0 1rem; + + } + } + + .type-container2{ + margin: 0 auto; + height: 50vh; + //width: 90%; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + grid-template-areas: + "img text"; + + .section-text{ + grid-area: text; + } + + .images{ + grid-area: img; + padding: 1rem 1rem 0 1rem; + } + } +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +/* .main-container{ + width: 100%; + margin: 0 auto; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + } + grid-template-areas: + "section section" + "type-1 type-1" + "type-2 type-2" + "type-1 type-1" + "type-2 type-2" + "type-1 type-1"; + + .text-main{ + text-align: center; + grid-area: section; + } + + .type-1{ + grid-area: type-1; + } + + .type-2{ + grid-area: type2; + }*/ diff --git a/assets/styles/styles.css b/assets/styles/styles.css index ce4ef64..6bb50b5 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -16,6 +16,78 @@ body { /*img{ max-width: 100%; }*/ +@media screen and (min-width: 992px) { + .hero { + margin: 0 auto; + height: 90vh; + display: grid; + grid: auto/repeat(2, 50%); + grid-template-areas: "text img"; + } + .hero .container-hero { + grid-area: text; + } + .hero .images { + grid-area: img; + padding: 1rem 1rem 0 1rem; + } + + .type-container1 { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "text img"; + } + .type-container1 .section-text { + grid-area: text; + } + .type-container1 .images { + grid-area: img; + padding: 1rem 1rem 0 1rem; + } + + .type-container2 { + margin: 0 auto; + height: 50vh; + display: grid; + grid: 100px auto 100px/repeat(2, 50%); + grid-template-areas: "img text"; + } + .type-container2 .section-text { + grid-area: text; + } + .type-container2 .images { + grid-area: img; + padding: 1rem 1rem 0 1rem; + } +} +/* .main-container{ + width: 100%; + margin: 0 auto; + display: grid; + grid: 100px auto 100px / repeat(2, 50%); + } + grid-template-areas: + "section section" + "type-1 type-1" + "type-2 type-2" + "type-1 type-1" + "type-2 type-2" + "type-1 type-1"; + + .text-main{ + text-align: center; + grid-area: section; + } + + .type-1{ + grid-area: type-1; + } + + .type-2{ + grid-area: type2; + }*/ html { font-family: "Inter", sans-serif; } @@ -28,6 +100,7 @@ html { .hero { display: grid; place-items: center; + width: 100%; } .hero .container-hero { margin: 5rem 0; @@ -44,15 +117,24 @@ html { font-weight: 300; } .hero .container-hero img { - width: 40px; - height: 40px; + width: 80px; + height: 80px; border-radius: 19px; padding: 0; border: 1px solid black; } +.hero .images { + width: 80%; +} +.hero .images .img-hero { + width: 100%; + border-radius: 10px; +} .main-container { display: grid; + margin: 0 auto; + width: 90%; } .main-container .text-main { background-color: #F4F7FC; @@ -67,82 +149,39 @@ html { .main-container .text-main p { font-size: 1rem; } -.main-container .type-1 { - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; -} -.main-container .type-1 .section-text h3 { - font-size: 1.5rem; - margin: 0 0 0.75rem; -} -.main-container .type-1 .section-text p { - font-size: 1rem; -} -.main-container .type-1 .images { - padding: 1rem 1rem 0 1rem; -} -.main-container .type-2 { - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; -} -.main-container .type-2 .section-text h3 { - font-size: 1.5rem; - margin: 0 0 0.75rem; -} -.main-container .type-2 .section-text p { - font-size: 1rem; -} -.main-container .type-2 .images { - padding: 1rem 1rem 0 1rem; -} -.main-container .type-3 { - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; -} -.main-container .type-3 .section-text h3 { - font-size: 1.5rem; - margin: 0 0 0.75rem; -} -.main-container .type-3 .section-text p { - font-size: 1rem; -} -.main-container .type-3 .images { - padding: 1rem 1rem 0 1rem; -} -.main-container .type-4 { - margin: 0 1rem; +.main-container .type-all { padding: 6.2rem 0 4.2rem; + width: 100%; } -.main-container .type-4 .section-text h3 { +.main-container .type-all .section-text h3 { font-size: 1.5rem; margin: 0 0 0.75rem; } -.main-container .type-4 .section-text p { +.main-container .type-all .section-text p { font-size: 1rem; } -.main-container .type-4 .images { +.main-container .type-all .image-container { + display: flex; + justify-content: center; + align-items: center; padding: 1rem 1rem 0 1rem; } -.main-container .type-5 { - margin: 0 1rem; - padding: 6.2rem 0 4.2rem; -} -.main-container .type-5 .section-text h3 { - font-size: 1.5rem; - margin: 0 0 0.75rem; -} -.main-container .type-5 .section-text p { - font-size: 1rem; -} -.main-container .type-5 .images { - padding: 1rem 1rem 0 1rem; +.main-container .type-all .image-container img { + width: 80%; + height: 15rem; + border-radius: 12px; } -.images img { - width: 288px; - height: 190px; -} +/* + .images{ + .img-hero{ + width: $img-width; + height: $img-height; + max-width: 100%; + border-radius: 20px; + } +}*/ footer { display: grid; background-color: #222121; diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 4ede368..c4d3a18 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/_header.scss","components/_main.scss","components/_image.scss","modules/_variables.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;ADbA;EAAO;;;AACP;EACE;IAAO;;;AEHT;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACvBN;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AC7FJ;EACE,OCKQ;EDJR,QCKS;;;ACTb;EACE;EACA,kBDGiB;ECFjB;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","components/_header.scss","components/_main.scss","modules/_variables.scss","components/_image.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;ACLA;EAEE;IACE;IACA;IACA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;EAGJ;IACE;IACA;IACA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;EAKJ;IACE;IACA;IAEA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;AAkCN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AF/FA;EAAO;;;AACP;EACE;IAAO;;;AGHT;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AACA;EACE;EACA;;;AClCN;EACE;EACA;EACA;;AAGA;EACE,kBCHgB;EDIhB;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;;AAKJ;EAEE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AE3CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;ACDA;EACE;EACA,kBFGiB;EEFjB;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index 5ab053c..15c8b2c 100644 --- a/index.html +++ b/index.html @@ -17,17 +17,15 @@
- +

Lorem ipsum

Lorem ipsum dolor sit amet.

- +
- image1 + image1
- -
@@ -39,58 +37,63 @@

Lorem ipsum consectetur adipisicing

-
+

consectetur

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta + dolore

-
- image2 +
+ image2
-
+

amet

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta + dolore

-
- image2 +
+ image2
-
+

ipsum

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta + dolore

-
- image2 +
+ image2
-
+

Corporis

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta + dolore

-
- image2 +
+ image2
-
+

sit

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta dolore

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta + dolore

-
- image2 +
+ image2
From 2dc475458d58864356b242503c91d001f07b693f Mon Sep 17 00:00:00 2001 From: Santo Date: Sat, 27 Mar 2021 01:09:38 -0500 Subject: [PATCH 3/3] Final push --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 15c8b2c..37120a8 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@

Lorem ipsum

Lorem ipsum consectetur adipisicing

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet, adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda