diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e69de29..f6c5ef4 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -0,0 +1,51 @@ +.hero{ + display: grid; + grid-template: 60vh 40vh/ 80% ; + justify-content: center; + align-items: center; +} + + +.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; + font-size: $titleSize; + 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 e69de29..65ff2f4 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,32 @@ +.container-image-hero +{ + width: $figure; +} + + +.image +{ + width: $widthImagesPhone; + border-radius: $borderRadius; + +} + +.subtitle +{ + +} + +section +{ + margin-top: 100px; +} + + + + + + + + + + diff --git a/assets/styles/components/_section1.scss b/assets/styles/components/_section1.scss new file mode 100644 index 0000000..4cfef60 --- /dev/null +++ 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 62b9166..c3d977c 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,7 @@ $colorLight: #fff; $colorDark: #000; +$widthImagesPhone: 100%; +$figure: 100%; +$borderRadius: 20px; +$titleSize: 6rem; +$marginBottomTitle: 150px; diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..7456bb0 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -17,5 +17,58 @@ html { font-family: "Inter var", sans-serif; } } +.container-image-hero { + width: 100%; +} + +.image { + width: 100%; + border-radius: 20px; +} + +section { + margin-top: 100px; +} + +.hero { + display: grid; + grid-template: 60vh 40vh/80%; + justify-content: center; + 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 f39486f..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"],"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;;;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 747a38f..62d2cb8 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,83 @@ - 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

+

+ 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. 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. 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 +
+
+ +