From 6b2f01509f6419bea44fe152c73dd01d783a120a Mon Sep 17 00:00:00 2001 From: williamandres Date: Thu, 25 Mar 2021 11:52:38 -0500 Subject: [PATCH 1/3] first changes --- assets/styles/components/_hero.scss | 15 ++++++++ assets/styles/components/_main.scss | 19 ++++++++++ assets/styles/components/section1.css | 9 +++++ assets/styles/components/section1.css.map | 1 + assets/styles/components/section1.scss | 9 +++++ assets/styles/modules/_variables.scss | 4 +++ assets/styles/styles.css | 21 +++++++++++ assets/styles/styles.css.map | 2 +- index.html | 44 +++++++++++++++++++++-- 9 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 assets/styles/components/section1.css create mode 100644 assets/styles/components/section1.css.map create mode 100644 assets/styles/components/section1.scss diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e69de29..e1f76da 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -0,0 +1,15 @@ +.hero{ + display: grid; + grid-template: 60vh 40vh/ 80% ; + justify-content: center; + align-items: center; +} + + +h1 +{ + text-align: center; + font-size: $titleSize; + margin-bottom: 150px; +} + diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index e69de29..ddb5969 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,19 @@ +.container-image-hero +{ + width: $figure; +} + + +.image +{ + width: $widthImagesPhone; + border-radius: $borderRadius; +} + + + + + + + + diff --git a/assets/styles/components/section1.css b/assets/styles/components/section1.css new file mode 100644 index 0000000..cc488a8 --- /dev/null +++ b/assets/styles/components/section1.css @@ -0,0 +1,9 @@ +.section1 { + grid-template: 1vh/80%; +} + +h2 { + color: red; +} + +/*# sourceMappingURL=section1.css.map */ diff --git a/assets/styles/components/section1.css.map b/assets/styles/components/section1.css.map new file mode 100644 index 0000000..25a0853 --- /dev/null +++ b/assets/styles/components/section1.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["section1.scss"],"names":[],"mappings":"AAAA;EAEE;;;AAGF;EAEE","file":"section1.css"} \ No newline at end of file diff --git a/assets/styles/components/section1.scss b/assets/styles/components/section1.scss new file mode 100644 index 0000000..c7fccfb --- /dev/null +++ b/assets/styles/components/section1.scss @@ -0,0 +1,9 @@ +.section1 +{ + grid-template: 1vh / 80%; +} + +h2 +{ + color: red; +} \ No newline at end of file diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..9c10cdc 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,6 @@ $colorLight: #fff; $colorDark: #000; +$widthImagesPhone: 100%; +$figure: 100%; +$borderRadius: 20px; +$titleSize: 6rem; \ No newline at end of file diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..d1f6dd4 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -17,5 +17,26 @@ html { font-family: "Inter var", sans-serif; } } +.container-image-hero { + width: 100%; +} + +.image { + width: 100%; + border-radius: 20px; +} + +.hero { + display: grid; + grid-template: 60vh 40vh/80%; + justify-content: center; + align-items: center; +} + +h1 { + text-align: center; + font-size: 6rem; + margin-bottom: 150px; +} /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index f39486f..2a28e03 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/_main.scss","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EAEG,OCCM;;;ADGT;EAEG,OCNgB;EDOhB,eCLY;;;ACJf;EACE;EACA;EACA;EACA;;;AAIF;EAEE;EACA,WDNU;ECOV","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index 747a38f..95e9590 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,49 @@ - Sass Project + Lorem Picsum -

Hello world!

+
+
+ +
+

Lorem picsum

+

+ Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Aut consequatur consequuntur, + culpa distinctio dolor doloremque ea fugiat ipsum + laboriosam minus neque officia perferendis quae quia + saepe sint sit tempora voluptas? +

+
+
+ image +
+
+
+

Easy to use, stylish placeholders

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusantium consequuntur cupiditate debitis distinctio dolore + error est expedita, harum illum impedit incidunt inventore neque + possimus similique soluta suscipit unde veniam voluptatibus? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad + adipisci asperiores aut corporis debitis earum, error id molestias + nostrum omnis optio, porro quam quod repudiandae rerum soluta + tempora veritatis voluptates. +

+
+
+ h2. +
+
+
+
+
+ From 7091a11afcb064942f7fd0d36506da77691807c8 Mon Sep 17 00:00:00 2001 From: williamandres Date: Thu, 25 Mar 2021 12:04:12 -0500 Subject: [PATCH 2/3] include section1 style --- assets/styles/components/_hero.scss | 2 ++ assets/styles/components/_main.scss | 1 + assets/styles/components/_section1.scss | 0 assets/styles/components/section1.css | 9 --------- assets/styles/components/section1.css.map | 1 - assets/styles/components/section1.scss | 9 --------- index.html | 2 +- 7 files changed, 4 insertions(+), 20 deletions(-) create mode 100644 assets/styles/components/_section1.scss delete mode 100644 assets/styles/components/section1.css delete mode 100644 assets/styles/components/section1.css.map delete mode 100644 assets/styles/components/section1.scss diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e1f76da..6352210 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -13,3 +13,5 @@ h1 margin-bottom: 150px; } + + diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index ddb5969..767a56d 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -8,6 +8,7 @@ { width: $widthImagesPhone; border-radius: $borderRadius; + } diff --git a/assets/styles/components/_section1.scss b/assets/styles/components/_section1.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/styles/components/section1.css b/assets/styles/components/section1.css deleted file mode 100644 index cc488a8..0000000 --- a/assets/styles/components/section1.css +++ /dev/null @@ -1,9 +0,0 @@ -.section1 { - grid-template: 1vh/80%; -} - -h2 { - color: red; -} - -/*# sourceMappingURL=section1.css.map */ diff --git a/assets/styles/components/section1.css.map b/assets/styles/components/section1.css.map deleted file mode 100644 index 25a0853..0000000 --- a/assets/styles/components/section1.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["section1.scss"],"names":[],"mappings":"AAAA;EAEE;;;AAGF;EAEE","file":"section1.css"} \ No newline at end of file diff --git a/assets/styles/components/section1.scss b/assets/styles/components/section1.scss deleted file mode 100644 index c7fccfb..0000000 --- a/assets/styles/components/section1.scss +++ /dev/null @@ -1,9 +0,0 @@ -.section1 -{ - grid-template: 1vh / 80%; -} - -h2 -{ - color: red; -} \ No newline at end of file diff --git a/index.html b/index.html index 95e9590..bd16d84 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

Lorem picsum

image -
+

Easy to use, stylish placeholders

Lorem ipsum dolor sit amet, consectetur adipisicing elit. From 3f6499d70d74354c02dbf0e914435a2cdc5d523d Mon Sep 17 00:00:00 2001 From: williamandres Date: Thu, 25 Mar 2021 15:20:26 -0500 Subject: [PATCH 3/3] movile version ready --- assets/styles/components/_hero.scss | 34 ++++++++++++++ assets/styles/components/_main.scss | 12 +++++ assets/styles/components/_section1.scss | 5 ++ assets/styles/modules/_variables.scss | 3 +- assets/styles/styles.css | 32 +++++++++++++ assets/styles/styles.css.map | 2 +- index.html | 62 +++++++++++++++++++------ 7 files changed, 134 insertions(+), 16 deletions(-) diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index 6352210..f6c5ef4 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -6,6 +6,21 @@ } +.section1 +{ + + display: grid; + align-items: center; + justify-content: center; + padding: 100px 10% 100px 10%; +} + +h2 +{ + font-size: $titleSize; + margin-bottom: $marginBottomTitle; +} + h1 { text-align: center; @@ -13,5 +28,24 @@ h1 margin-bottom: 150px; } +.section2 +{ + display: grid; + grid-template: 40vh 40vh/ 80% ; + justify-content: center; + align-items: center; +} + +footer +{ + background: black; + color: white; + width: 100%; + padding: 50px; + text-align: center; + margin-top: 100px; +} + + diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 767a56d..65ff2f4 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -11,6 +11,18 @@ } +.subtitle +{ + +} + +section +{ + margin-top: 100px; +} + + + diff --git a/assets/styles/components/_section1.scss b/assets/styles/components/_section1.scss index e69de29..4cfef60 100644 --- a/assets/styles/components/_section1.scss +++ b/assets/styles/components/_section1.scss @@ -0,0 +1,5 @@ +.section1 +{ + display: grid; + grid-template: 20vh 40vh 40vh / 80%; +} diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 9c10cdc..c3d977c 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -3,4 +3,5 @@ $colorDark: #000; $widthImagesPhone: 100%; $figure: 100%; $borderRadius: 20px; -$titleSize: 6rem; \ No newline at end of file +$titleSize: 6rem; +$marginBottomTitle: 150px; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index d1f6dd4..7456bb0 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -26,6 +26,10 @@ html { border-radius: 20px; } +section { + margin-top: 100px; +} + .hero { display: grid; grid-template: 60vh 40vh/80%; @@ -33,10 +37,38 @@ html { align-items: center; } +.section1 { + display: grid; + align-items: center; + justify-content: center; + padding: 100px 10% 100px 10%; +} + +h2 { + font-size: 6rem; + margin-bottom: 150px; +} + h1 { text-align: center; font-size: 6rem; margin-bottom: 150px; } +.section2 { + display: grid; + grid-template: 40vh 40vh/80%; + justify-content: center; + align-items: center; +} + +footer { + background: black; + color: white; + width: 100%; + padding: 50px; + text-align: center; + margin-top: 100px; +} + /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index 2a28e03..addf613 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","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EAEG,OCCM;;;ADGT;EAEG,OCNgB;EDOhB,eCLY;;;ACJf;EACE;EACA;EACA;EACA;;;AAIF;EAEE;EACA,WDNU;ECOV","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","components/_main.scss","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EAEG,OCCM;;;ADGT;EAEG,OCNgB;EDOhB,eCLY;;;ADcf;EAEG;;;AEpBH;EACE;EACA;EACA;EACA;;;AAIF;EAGE;EACA;EACA;EACA;;;AAGF;EAEE,WDdU;ECeV,eDdkB;;;ACiBpB;EAEE;EACA,WDrBU;ECsBV;;;AAGF;EAEE;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/index.html b/index.html index bd16d84..62d2cb8 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Lorem Picsum @@ -21,32 +22,65 @@

Lorem picsum

- image + image
+
-

Easy to use, stylish placeholders

+ +

Easy to use, stylish

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusantium consequuntur cupiditate debitis distinctio dolore + error est expedita, harum illum impedit incidunt inventore neque + possimus similique soluta suscipit unde veniam voluptatibus? +

+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad + adipisci asperiores aut corporis debitis earum, error id molestias + nostrum omnis optio, porro quam quod repudiandae rerum soluta + tempora veritatis voluptates. +

+
+ +

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Accusantium consequuntur cupiditate debitis distinctio dolore - error est expedita, harum illum impedit incidunt inventore neque - possimus similique soluta suscipit unde veniam voluptatibus? + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus + est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate + eum itaque molestiae, nesciunt non quo saepe, sint totam.

+ image +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus + est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate + eum itaque molestiae, nesciunt non quo saepe, sint totam. +

+ image +
+

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad - adipisci asperiores aut corporis debitis earum, error id molestias - nostrum omnis optio, porro quam quod repudiandae rerum soluta - tempora veritatis voluptates. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus + est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate + eum itaque molestiae, nesciunt non quo saepe, sint totam.

+ image
- h2. +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus + est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate + eum itaque molestiae, nesciunt non quo saepe, sint totam. +

+ image
-
-
-
+