diff --git a/assets/images/DO_Logo_Vertical_Black.png b/assets/images/DO_Logo_Vertical_Black.png new file mode 100644 index 0000000..541f38f Binary files /dev/null and b/assets/images/DO_Logo_Vertical_Black.png differ diff --git a/assets/images/DO_Logo_Vertical_White.png b/assets/images/DO_Logo_Vertical_White.png new file mode 100644 index 0000000..d71b071 Binary files /dev/null and b/assets/images/DO_Logo_Vertical_White.png differ diff --git a/assets/images/car-key.png b/assets/images/car-key.png new file mode 100644 index 0000000..e61a4fb Binary files /dev/null and b/assets/images/car-key.png differ diff --git a/assets/styles/components/Footer.scss b/assets/styles/components/Footer.scss new file mode 100644 index 0000000..4f9680f --- /dev/null +++ b/assets/styles/components/Footer.scss @@ -0,0 +1,34 @@ +.footer{ + width: $width; + height:$heightOthers; + padding: 20px 50px; + display: grid; + justify-content:$justify-content; + background-color: $colorDark; + + #article-footer{ + align-self: center; + + } + + #article-footer p{ + text-align: $text-alignp; + font-size: $font-sizep; + line-height: $line-heightp; + padding: $paddingp; + color:$colorLight; + + } + #article-footer p > a{ + text-decoration: none; + color:gray; + } + #article-footer p > a:hover{ + color:$colorLight; + } + + + + + +} \ 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..e17b446 --- /dev/null +++ b/assets/styles/components/Header.scss @@ -0,0 +1,25 @@ + +.container-header { + width: $width; + padding: 100px 0; + display: grid; + text-align: center; + + article { + h1{ + display: inline-block; + font-weight:bolder; + font-size: $font-size; + margin: 0; + } + + h3 { + font-weight: lighter; + font-size: 1.5em; + } + } + + #figure-header h3{ + padding: $paddingp; + } +} diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss index 9c2069a..fef22bb 100644 --- a/assets/styles/components/_main.scss +++ b/assets/styles/components/_main.scss @@ -1,3 +1,39 @@ -h1 { - color: $colorDark; +body { + section { + width: $width; + height: $heightOthers; + padding: 20px 50px; + display: grid; + justify-content: center; + background-color: rgba(10, 10, 10, .10); + + article { + h2 { + text-align: center; + font-size: $font-size; + } + } + } + + h1 { + color: $colorDark; + } + + p{ + font-size: $font-sizep; + line-height: $line-heightp; + text-align: center; + + } + + figure{ + padding:$paddingp; + + img{ + width: $width; + max-width:$max-width; + border-radius: $borderRadius; + } + } } + diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss index 24a485a..c706783 100644 --- a/assets/styles/modules/_breakpoints.scss +++ b/assets/styles/modules/_breakpoints.scss @@ -1,7 +1,43 @@ //BREAKPOINTS MOBILE FIRST - +@import "variables"; // Medium devices (tablets, 768px and up) -@media (min-width: 768px) {} +@media (min-width: 768px) { + article p{ + text-align: center; + } + #mainSection{ + + display: grid; + align-self: center; + article{ + align-self: center; + } + } + +} // Large devices (desktops, 992px and up) -@media (min-width: 992px) {} +@media (min-width: 992px) { + .container-header{ + display: grid; + grid-template-columns: 1fr 1fr; + article { + align-self: center; + } + } + section{ + display: grid; + grid-template-columns: 1fr 1fr; + article { + align-self: center; + p{ + text-align: center; + } + } + } + #mainSection { + display: grid; + grid-template-columns: 1fr 10px; + justify-content: center; + } +} diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss index 62b9166..0c9bb69 100644 --- a/assets/styles/modules/_variables.scss +++ b/assets/styles/modules/_variables.scss @@ -1,2 +1,18 @@ + $colorLight: #fff; $colorDark: #000; +$width: 100%; +$borderRadius: 20px; +$paddingH: 100px; +$paddingp: 1em 1em 0 1em; +$justify-content: center; +$height: 100vh; +$heightOthers: 75vh; +$font-size: 42px; +$text-align: center; +$font-sizeSub: 80px; +$font-sizep: 16px; +$line-heightp: 1.6em; +$text-alignp: center; +$max-width: 800px; + diff --git a/assets/styles/styles.css b/assets/styles/styles.css index b24e8b5..a9d31b6 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -8,6 +8,45 @@ text-rendering: optimizeLegibility; } +@media (min-width: 768px) { + article p { + text-align: center; + } + + #mainSection { + display: grid; + align-self: center; + } + #mainSection article { + align-self: center; + } +} +@media (min-width: 992px) { + .container-header { + display: grid; + grid-template-columns: 1fr 1fr; + } + .container-header article { + align-self: center; + } + + section { + display: grid; + grid-template-columns: 1fr 1fr; + } + section article { + align-self: center; + } + section article p { + text-align: center; + } + + #mainSection { + display: grid; + grid-template-columns: 1fr 10px; + justify-content: center; + } +} html { font-family: "Inter", sans-serif; } @@ -17,8 +56,79 @@ html { font-family: "Inter var", sans-serif; } } -h1 { +body section { + width: 100%; + height: 75vh; + padding: 20px 50px; + display: grid; + justify-content: center; + background-color: rgba(10, 10, 10, 0.1); +} +body section article h2 { + text-align: center; + font-size: 42px; +} +body h1 { color: #000; } +body p { + font-size: 16px; + line-height: 1.6em; + text-align: center; +} +body figure { + padding: 1em 1em 0 1em; +} +body figure img { + width: 100%; + max-width: 800px; + border-radius: 20px; +} + +.container-header { + width: 100%; + padding: 100px 0; + display: grid; + text-align: center; +} +.container-header article h1 { + display: inline-block; + font-weight: bolder; + font-size: 42px; + margin: 0; +} +.container-header article h3 { + font-weight: lighter; + font-size: 1.5em; +} +.container-header #figure-header h3 { + padding: 1em 1em 0 1em; +} + +.footer { + width: 100%; + height: 75vh; + padding: 20px 50px; + display: grid; + justify-content: center; + background-color: #000; +} +.footer #article-footer { + align-self: center; +} +.footer #article-footer p { + text-align: center; + font-size: 16px; + line-height: 1.6em; + padding: 1em 1em 0 1em; + color: #fff; +} +.footer #article-footer p > a { + text-decoration: none; + color: gray; +} +.footer #article-footer p > a:hover { + color: #fff; +} /*# sourceMappingURL=styles.css.map */ diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map index b8df8d2..2be85b4 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","components/_main.scss","modules/_variables.scss","components/Header.scss","components/Footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ACHF;EACE;IACE;;;EAEF;IAEE;IACA;;EACA;IACE;;;AAON;EACI;IACI;IACA;;EACA;IACE;;;EAGR;IACI;IACA;;EACA;IACE;;EACA;IACC;;;EAIP;IACE;IACA;IACA;;;AFvCJ;EAAO;;;AACP;EACE;IAAO;;;AGFP;EACE,OCCI;EDAJ,QCMW;EDLX;EACA;EACA;EACA;;AAGE;EACE;EACA,WCFI;;ADOV;EACE,OChBQ;;ADmBV;EACE,WCTS;EDUT,aCTW;EDUX;;AAIF;EACE,SCvBO;;ADyBP;EACE,OC7BE;ED8BF,WCjBM;EDkBN,eC9BS;;;ACHf;EACE,ODCM;ECAN;EACA;EACA;;AAGE;EACE;EACA;EACA,WDDM;ECEN;;AAGF;EACE;EACA;;AAIJ;EACE,SDhBO;;;AENX;EACE,OFEM;EEDN,QFOa;EENb;EACA;EACA,iBFEgB;EEDhB,kBFJU;;AEMV;EACE;;AAIF;EACE,YFCU;EEAV,WFFS;EEGT,aFFW;EEGX,SFXO;EEYP,OFjBS;;AEoBX;EACE;EACA;;AAEH;EACG,OFzBS","file":"styles.css"} \ No newline at end of file diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss index 8909608..f2eb0d3 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/main.scss"; +@import "components/hero.scss"; +@import "components/Header.scss"; +@import "components/Footer.scss"; \ No newline at end of file diff --git a/index.html b/index.html index 5ac1c71..40eaa91 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,81 @@ - - - - - Sass Project - - -

Hello world!

- - + + + + + + + Sass Project + + +
+
+

Lorem Picsum

+

The Lorem Ipsum for photos.

+
+
+ image +
+
+
+
+

Easy to use, stylish placeholders

+

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

+
+
+
+
+

Specific Image

+

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

+
+
+ image +
+
+
+
+ image +
+
+

Static Random Image

+

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

+
+
+
+
+

Grayscale

+

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

+
+
+ image +
+
+
+
+ image +
+
+

Blur

+

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

+
+
+
+
+

Advanced Usage

+

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

+
+
+ image +
+
+ +