commit e1da96d2339ca4bb39153c009aa85421cb05a26f Author: androiddrew Date: Thu Jul 18 13:11:50 2019 -0400 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..9107a66 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# CSS / SCSS Udemy course + +##General Advice + +- set the boxsizing property on the _, _::after, and \*::before. Then use the body tag to flow inheritance down to all elements. + +```scss +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 1.6rem; + color: #777; + padding: 3rem; + line-height: 1.7; + box-sizing: border-box; +} +``` + +- Use rem units where ever you would use a px unit. Set the rem on html as a percentage to allow user styles to override yours, but keep the default a multiple of 10. Since most browsers are 16px default for rem 10/16 = 62.25%. + +```scss +html { + // Set's the rem to 10px in most browsers (16px) + font-size: 62.5%; +} +``` diff --git a/natour/.gitignore b/natour/.gitignore new file mode 100644 index 0000000..1c40133 --- /dev/null +++ b/natour/.gitignore @@ -0,0 +1 @@ +.sass-cache/ \ No newline at end of file diff --git a/natour/css/app.css b/natour/css/app.css new file mode 100644 index 0000000..3f660f9 --- /dev/null +++ b/natour/css/app.css @@ -0,0 +1,184 @@ +/* Resets */ +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 300; + src: local("Lato Light"), local("Lato-Light"), url("../fonts/Lato-Light.ttf") format("truetype"); } +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/Lato-Regular.ttf") format("truetype"); } +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: local("Lato Bold"), local("Lato-Bold"), url("../fonts/Lato-Bold.ttf") format("truetype"); } +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: inherit; } + +html { + font-size: 62.5%; } + +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 1.6rem; + color: #777; + padding: 3rem; + line-height: 1.7; + box-sizing: border-box; } + +.content-wrapper { + background: #fafafa; } + +.header { + position: relative; + height: 95vh; + background-image: linear-gradient(rgba(56, 218, 116, 0.7), rgba(38, 189, 93, 0.7)), url("../img/train.jpg"); + background-position: center; + clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); } + +.header-logo { + position: absolute; + top: 4rem; + left: 4rem; } + +.logo { + height: 3.5rem; } + +.hero-text-box { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; } + +.hero-primary { + text-transform: uppercase; + color: #ffffff; + backface-visibility: hidden; + margin-bottom: 6rem; } + +.hero-title-main { + display: block; + top: 25%; + font-weight: 400; + font-size: 6rem; + letter-spacing: 3.5rem; + animation: moveInLeft 0.8s ease-out; } + +.hero-title-sub { + display: block; + position: relative; + top: 25%; + font-weight: 700; + font-size: 2rem; + letter-spacing: 1.75rem; + animation: moveInRight 0.8s ease-out; } + +.dark-hero-title { + color: #777; } + +.pitch { + height: 150vh; } + +.banana-slug-back { + position: absolute; + top: -200px; + left: 4rem; + height: 40rem; + width: 40rem; + background-image: linear-gradient(#fafafa, #fafafa); + border-radius: 100%; } + +.banana-slug { + height: 40rem; + width: 40rem; + border-radius: 100%; + border: 0.3rem solid #fafafa; + animation: moveInBottom 1s ease-out; + animation-fill-mode: backwards; } + +.cards { + position: relative; + height: 90vh; + background-image: url("../img/bg-cube-pattern.png"), linear-gradient(rgba(45, 114, 243, 0.8), rgba(45, 114, 243, 0.8)); } + +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translate(-5rem); } + 80% { + transform: translate(1rem); } + 100% { + opacity: 1; + transform: translate(0); } } +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translate(5rem); } + 80% { + transform: translate(-1rem); } + 100% { + opacity: 1; + transform: translate(0); } } +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translate(0, 5rem); } + 100% { + opacity: 1; + transform: translate(0); } } +.btn:link, +.btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1.5rem 4rem; + display: inline-block; + border-radius: 10rem; + transition: all 0.2s; + position: relative; } + +.btn-white { + background-color: #ffffff; + color: #777; } + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); } + +.btn:active { + transform: translateY(-1px); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); } + +.btn::after { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + border-radius: 10rem; + position: absolute; + top: 0; + left: 0; + z-index: -1; + transition: all 0.4s; } + +.btn-white::after { + background-color: #ffffff; } + +.btn:hover::after { + transform: scaleX(1.4) scaleY(1.6); + opacity: 0; } + +.btn-animated { + animation: moveInBottom 0.8s ease-out; + animation-fill-mode: backwards; } + +/*# sourceMappingURL=app.css.map */ diff --git a/natour/css/app.css.map b/natour/css/app.css.map new file mode 100644 index 0000000..e1d3752 --- /dev/null +++ b/natour/css/app.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../scss/app.scss"], +"names": [], +"file": "app.css" +} \ No newline at end of file diff --git a/natour/fonts/Lato-Bold.ttf b/natour/fonts/Lato-Bold.ttf new file mode 100755 index 0000000..620c85e Binary files /dev/null and b/natour/fonts/Lato-Bold.ttf differ diff --git a/natour/fonts/Lato-Light.ttf b/natour/fonts/Lato-Light.ttf new file mode 100755 index 0000000..1d023d7 Binary files /dev/null and b/natour/fonts/Lato-Light.ttf differ diff --git a/natour/fonts/Lato-LightItalic.ttf b/natour/fonts/Lato-LightItalic.ttf new file mode 100755 index 0000000..b28954b Binary files /dev/null and b/natour/fonts/Lato-LightItalic.ttf differ diff --git a/natour/fonts/Lato-Regular.ttf b/natour/fonts/Lato-Regular.ttf new file mode 100755 index 0000000..ade05be Binary files /dev/null and b/natour/fonts/Lato-Regular.ttf differ diff --git a/natour/fonts/Lato-RegularItalic.ttf b/natour/fonts/Lato-RegularItalic.ttf new file mode 100755 index 0000000..bc2a622 Binary files /dev/null and b/natour/fonts/Lato-RegularItalic.ttf differ diff --git a/natour/img/banana-slug.jpg b/natour/img/banana-slug.jpg new file mode 100755 index 0000000..eb3747a Binary files /dev/null and b/natour/img/banana-slug.jpg differ diff --git a/natour/img/bg-cube-pattern.png b/natour/img/bg-cube-pattern.png new file mode 100644 index 0000000..cfd7911 Binary files /dev/null and b/natour/img/bg-cube-pattern.png differ diff --git a/natour/img/logo-white.png b/natour/img/logo-white.png new file mode 100755 index 0000000..865fe23 Binary files /dev/null and b/natour/img/logo-white.png differ diff --git a/natour/img/train.jpg b/natour/img/train.jpg new file mode 100644 index 0000000..b914b38 Binary files /dev/null and b/natour/img/train.jpg differ diff --git a/natour/index.html b/natour/index.html new file mode 100644 index 0000000..9d5a99b --- /dev/null +++ b/natour/index.html @@ -0,0 +1,40 @@ + + + + + + + + + +
+
+ +
+

+ Outdoors + is where life happens +

+ Discover Our Tours +
+
+
+

Some text...

+
+
+
+ Drew with a banana slug mustache +

Honey you look fly.

+
+
+
+ +
+ + diff --git a/natour/scss/app.scss b/natour/scss/app.scss new file mode 100644 index 0000000..2bfa15b --- /dev/null +++ b/natour/scss/app.scss @@ -0,0 +1,276 @@ +/* Resets */ + +// @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap'); +// font-family: 'Lato', sans-serif; +$global-background: rgb(250, 250, 250); + +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 300; + src: local("Lato Light"), local("Lato-Light"), + url("../fonts/Lato-Light.ttf") format("truetype"); +} + +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 400; + src: local("Lato Regular"), local("Lato-Regular"), + url("../fonts/Lato-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Lato"; + font-style: normal; + font-display: swap; + font-weight: 700; + src: local("Lato Bold"), local("Lato-Bold"), + url("../fonts/Lato-Bold.ttf") format("truetype"); +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + // Set's the rem to 10px in most browsers (16px) + font-size: 62.5%; +} + +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 1.6rem; + color: #777; + padding: 3rem; + line-height: 1.7; + box-sizing: border-box; +} + +.content-wrapper { + background: $global-background; +} + +.header { + position: relative; + height: 95vh; + background-image: linear-gradient( + rgba(56, 218, 116, 0.7), + rgba(38, 189, 93, 0.7) + ), + url("../img/train.jpg"); + background-position: center; + clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); +} + +.header-logo { + position: absolute; + top: 4rem; + left: 4rem; +} + +.logo { + height: 3.5rem; +} + +.hero-text-box { + position: absolute; + top: 40%; + left: 50%; + // Here we are translating this element so that it's dirct center + // is in the absolution position described above. No margin auto! + transform: translate(-50%, -50%); + text-align: center; +} + +.hero-primary { + text-transform: uppercase; + color: #ffffff; + //used to prevent gitter in the animation + backface-visibility: hidden; + margin-bottom: 6rem; +} + +.hero-title-main { + display: block; + top: 25%; + font-weight: 400; + font-size: 6rem; + letter-spacing: 3.5rem; + animation: moveInLeft 0.8s ease-out; +} + +.hero-title-sub { + display: block; + position: relative; + top: 25%; + font-weight: 700; + font-size: 2rem; + letter-spacing: 1.75rem; + animation: moveInRight 0.8s ease-out; +} + +.dark-hero-title { + color: #777; +} + +.pitch { + height: 150vh; +} + +.banana-slug-back { + position: absolute; + top: -200px; + left: 4rem; + height: 40rem; + width: 40rem; + background-image: linear-gradient($global-background, $global-background); + border-radius: 100%; +} + +.banana-slug { + // position: absolute; + // top: -200px; + // left: 40px; + height: 40rem; + width: 40rem; + border-radius: 100%; + border: 0.3rem solid $global-background; + animation: moveInBottom 1s ease-out; + animation-fill-mode: backwards; +} + +.cards { + position: relative; + height: 90vh; + background-image: url("../img/bg-cube-pattern.png"), + linear-gradient(rgba(45, 114, 243, 0.8), rgba(45, 114, 243, 0.8)); +} + +@keyframes moveInLeft { + 0% { + opacity: 0; + transform: translate(-5rem); + } + + 80% { + transform: translate(1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInRight { + 0% { + opacity: 0; + transform: translate(5rem); + } + + 80% { + transform: translate(-1rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInBottom { + 0% { + opacity: 0; + transform: translate(0, 5rem); + } + + 100% { + opacity: 1; + transform: translate(0); + } +} + +// the :link and :visited which are psuedo classes + +.btn:link, +.btn:visited { + text-transform: uppercase; + text-decoration: none; + padding: 1.5rem 4rem; + // Anchor tags are inline elements so we need to change the display property to have it behave line a block. + // Since it is an inline element it is treated as if it was text. So to place it in the center of the box, + // all we have to do is set the parent container's text-align: center; This does not change the h1 content, + // Since it's elements are display: block; + display: inline-block; + border-radius: 10rem; + //The transition properties has to be on the initial state, and the transform operations in the other psuedo + // Selectors will follow this transition declaration. + transition: all 0.2s; + position: relative; +} + +.btn-white { + background-color: #ffffff; + color: #777; +} + +.btn:hover { + transform: translateY(-3px); + // x-offset, y-offset, blur, color + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); +} + +//When we click an element it is called the "active state". +// This is how the material library does snazzy animations when you click a button. +.btn:active { + // This translation is in relation to the initial state, not the hover state. + transform: translateY(-1px); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); +} + +//This psudeo selector is like a virtual element after the element it is selecting. +// In this case we are adding an element that will look exactly like the element we +//have, but we are putting it behind the element. When we hover out this psuedo +//elment hides back behind the button. +.btn::after { + //Always need a content and display property for after elements. + content: ""; + display: inline-block; + // This works because the ::after psudeo element is treated like a child of the + // item it is selecting. So 100% the width of the button. + height: 100%; + width: 100%; + border-radius: 10rem; + // To place it behind the button we can use absolute positioning + position: absolute; + top: 0; + left: 0; + // Places this element behind the button. + z-index: -1; + //tranition here because it is the initial state for the .btn:hover::after selector + transition: all 0.4s; +} + +.btn-white::after { + background-color: #ffffff; +} + +//When we hover the button we want some certain styles for the ::after element. +.btn:hover::after { + transform: scaleX(1.4) scaleY(1.6); + //fading out + opacity: 0; +} + +.btn-animated { + animation: moveInBottom 0.8s ease-out; + // This property automatically applies the animate styles before the animation starts. + animation-fill-mode: backwards; +}