diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss index e69de29..ccfb21e 100644 --- a/assets/styles/components/_hero.scss +++ b/assets/styles/components/_hero.scss @@ -0,0 +1,29 @@ +.hero { + text-align: center; + &_continer { + display: grid; + place-content: center; + } + &_header-img { + display: flex; + justify-content: center; + } + + &__heder-img img { + place-self: center; + width: 42px; + height: 42px; + } + &__header h1 { + padding-inline: 1rem; + } + &_brand-icon { + width: 42px; + height: 42px; + } +} + +.hero h2 { + font-family: "Open Sans", sans-serif; + font-size: 1.5rem; +} diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index e69de29..326ecfc 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -0,0 +1,6 @@ +.align-center { + text-align: center; +} +.section-background { + background-color: #f4f8fc; +} diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss index cdfd8ae..d2b2352 100644 --- a/assets/styles/modules/_app.scss +++ b/assets/styles/modules/_app.scss @@ -6,3 +6,45 @@ text-decoration: none; text-rendering: optimizeLegibility; } + +.shadow { + border-radius: 0.5rem; + box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), + 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), + 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03); +} + +html { + box-sizing: border-box; + text-rendering: optimizeLegibility; + font-size: 100%; + font-family: "Inter", sans-serif; +} + +body { + margin: 0; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} +.container { + max-width: 992px; + margin-left: auto; + margin-right: auto; + padding: 1rem; +} + +.section { + padding: 100px 0; + background-color: #fff; +} + +.align-center { + text-align: center; +} diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index bbbea70..5d2b5d1 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -1,8 +1,23 @@ //BREAKPOINTS MOBILE FIRST @import "variables"; +.grid { + display: grid; +} + +.small { + margin-bottom: 1rem; +} // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media (min-width: 992px) { + .grid { + grid-template-columns: auto auto; + } +} diff --git a/assets/styles/modules/_typography.scss b/assets/styles/modules/_typography.scss index f6d5096..d957523 100644 --- a/assets/styles/modules/_typography.scss +++ b/assets/styles/modules/_typography.scss @@ -1,5 +1,50 @@ -@import url('https://rsms.me/inter/inter.css'); -html { font-family: 'Inter', sans-serif; } +@import url("https://rsms.me/inter/inter.css"); +html { + font-family: "Inter", sans-serif; +} @supports (font-variation-settings: normal) { - html { font-family: 'Inter var', sans-serif; } + html { + font-family: "Inter var", sans-serif; + } +} +a { + text-decoration: none; + color: #386bf3; +} + +h1, +h2, +h3 { + margin: 0; +} + +h1 { + font-size: 2.625rem; +} +p { + line-height: 1.6; +} + +code { + background-color: #f4f7fc; + padding: 0.25rem; + border-radius: 0.25rem; + font-size: 0.875rem; +} + +pre { + white-space: nowrap; + padding: 0.875rem; + margin-bottom: 1.625rem; + border-radius: 0.5rem; + background-color: #f4f7fc; + font-size: 0.875rem; +} + +.sub-title-large { + font-size: 2.25rem; +} + +.sub-title-small { + font-weight: 300; } diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..222cfb6 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,3 @@ $colorLight: #fff; $colorDark: #000; + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 84eb7fe..3f24dc9 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,65 @@ text-rendering: optimizeLegibility; } +.shadow { + border-radius: 0.5rem; + box-shadow: 0 13px 27px -5px hsla(240deg, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0deg, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0deg, 0%, 0%, 0.03); +} + +html { + box-sizing: border-box; + text-rendering: optimizeLegibility; + font-size: 100%; + font-family: "Inter", sans-serif; +} + +body { + margin: 0; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} + +.container { + max-width: 992px; + margin-left: auto; + margin-right: auto; + padding: 1rem; +} + +.section { + padding: 100px 0; + background-color: #fff; +} + +.align-center { + text-align: center; +} + +.grid { + display: grid; +} + +.small { + margin-bottom: 1rem; +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 992px) { + .grid { + grid-template-columns: auto auto; + } +} html { font-family: "Inter", sans-serif; } @@ -17,5 +76,82 @@ html { font-family: "Inter var", sans-serif; } } +a { + text-decoration: none; + color: #386bf3; +} + +h1, +h2, +h3 { + margin: 0; +} + +h1 { + font-size: 2.625rem; +} + +p { + line-height: 1.6; +} + +code { + background-color: #f4f7fc; + padding: 0.25rem; + border-radius: 0.25rem; + font-size: 0.875rem; +} + +pre { + white-space: nowrap; + padding: 0.875rem; + margin-bottom: 1.625rem; + border-radius: 0.5rem; + background-color: #f4f7fc; + font-size: 0.875rem; +} + +.sub-title-large { + font-size: 2.25rem; +} + +.sub-title-small { + font-weight: 300; +} + +.align-center { + text-align: center; +} + +.section-background { + background-color: #f4f8fc; +} + +.hero { + text-align: center; +} +.hero_continer { + display: grid; + place-content: center; +} +.hero_header-img { + display: flex; + justify-content: center; +} +.hero__heder-img img { + place-self: center; + width: 42px; + height: 42px; +} +.hero__header h1 { + padding-inline: 1rem; +} +.hero_brand-icon { + width: 42px; + height: 42px; +} -/*# sourceMappingURL=styles.css.map */ +.hero h2 { + font-family: "Open Sans", sans-serif; + font-size: 1.5rem; +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index f39486f..5ddc007 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,"sources":["modules/_typography.scss","modules/_app.scss","styles.css","modules/_breakpoints.scss","components/_main.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ,8CAAA;ACAR;EACE,sBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,qBAAA;EACA,kCAAA;ACEF;;ADCA;EACE,qBAAA;EACA,+IAAA;ACEF;;ADGA;EACE,sBAAA;EACA,kCAAA;EACA,eAAA;EACA,gCAAA;ACAF;;ADGA;EACE,SAAA;ACAF;;ADGA;EACE,qBAAA;ACAF;;ADGA;EACE,eAAA;EACA,YAAA;ACAF;;ADEA;EACE,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,aAAA;ACCF;;ADEA;EACE,gBAAA;EACA,sBAAA;ACCF;;ADEA;EACE,kBAAA;ACCF;;AC/CA;EACE,aAAA;ADkDF;;AC/CA;EACE,mBAAA;ADkDF;;AC9CA;EACE;IACE,gBAAA;EDiDF;AACF;AC7CA;EACE;IACE,gCAAA;ED+CF;AACF;AFnEA;EACE,gCAAA;AEqEF;;AFnEA;EACE;IACE,oCAAA;EEsEF;AACF;AFpEA;EACE,qBAAA;EACA,cAAA;AEsEF;;AFnEA;;;EAGE,SAAA;AEsEF;;AFnEA;EACE,mBAAA;AEsEF;;AFpEA;EACE,gBAAA;AEuEF;;AFpEA;EACE,yBAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;AEuEF;;AFpEA;EACE,mBAAA;EACA,iBAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;AEuEF;;AFpEA;EACE,kBAAA;AEuEF;;AFpEA;EACE,gBAAA;AEuEF;;AEvHA;EACE,kBAAA;AF0HF;;AExHA;EACE,yBAAA;AF2HF;;AG/HA;EACE,kBAAA;AHkIF;AGjIE;EACE,aAAA;EACA,qBAAA;AHmIJ;AGjIE;EACE,aAAA;EACA,uBAAA;AHmIJ;AGhIE;EACE,kBAAA;EACA,WAAA;EACA,YAAA;AHkIJ;AGhIE;EACE,oBAAA;AHkIJ;AGhIE;EACE,WAAA;EACA,YAAA;AHkIJ;;AG9HA;EACE,oCAAA;EACA,iBAAA;AHiIF","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 43949c9..7ece4df 100644 --- a/assets/styles/styles.scss +++ b/assets/styles/styles.scss @@ -8,3 +8,5 @@ // COMPONENTS @import "components/main.scss"; @import "components/hero.scss"; + +// diff --git a/index.html b/index.html index 747a38f..79e3eec 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,169 @@ + - - - - Sass Project + + + + + + -

Hello world!

+
+
+
+
+
+ Picsum icon +

Lorem Picsum

+

The Lorem Ipsum for photos.

+
+
+ Random photo from picsum.photos + + +
+ +
+
+
+ +
+
+

Easy to use, stylish placeholders

+

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

+ 
+            https://some-url.com
+
+

To get square image, just add the size

+ 
+            https://some-url.com
+
+
+
+ + +
+
+
+ + +

Specific Image

+

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

+ 
+            https://some-url.com
+
+

You can find a list all the images here.

+
+ Dark puppy +
+
+ + +
+
+
+ + +

Static Random Image

+

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

+ 
+            https://some-url.com
+
+
+ Snow-capped hills +
+
+ +
+
+
+ + +

Grayscale

+

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

+ 
+            https://some-url.com
+
+
+ Walrus grayscale image +
+
+ +
+
+
+

Blur

+

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

+ 
+            https://some-url.com
+
+

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

+ 
+            https://some-url.com
+
+
+ Cafeteria +
+
+ +
+
+
+ +

Advanced Usage

+

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

+ 
+            https://some-url.com
+
+

+ To request multiple images of the same size in your browser, add the + random query param to prevent the images from being + cached: +

+ 
+            Some https query arguments
+
+

+ If you need a file ending, you can add .jpg to the end + of the url. +

+ 
+            https://some-url.com
+
+

+ To get an image in the WebP format, you can add + .webp to the end of the url. +

+ 
+            https://some-url.com
+
+
+ Beacon +
+
+
- + + \ No newline at end of file