initial commit
commit
e1da96d233
@ -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%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1 @@
|
||||
.sass-cache/
|
||||
@ -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 */
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["../scss/app.scss"],
|
||||
"names": [],
|
||||
"file": "app.css"
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<script src="js/app.js"></script>
|
||||
</head>
|
||||
<html>
|
||||
<body>
|
||||
<div class="content-wrapper">
|
||||
<header class="header">
|
||||
<div class="header-logo">
|
||||
<img src="/img/logo-white.png" class="logo" alt="white-logo" />
|
||||
</div>
|
||||
<div class="hero-text-box">
|
||||
<h1 class="hero-primary">
|
||||
<span class="hero-title-main">Outdoors</span>
|
||||
<span class="hero-title-sub">is where life happens</span>
|
||||
</h1>
|
||||
<a href="#" class="btn btn-white btn-animated">Discover Our Tours</a>
|
||||
</div>
|
||||
</header>
|
||||
<section class="pitch">
|
||||
<h1 class="dark-hero-title">Some text...</h1>
|
||||
</section>
|
||||
<section class="cards">
|
||||
<div class="banana-slug-back">
|
||||
<img
|
||||
class="banana-slug"
|
||||
src="img/banana-slug.jpg"
|
||||
alt="Drew with a banana slug mustache"
|
||||
/>
|
||||
<h2>Honey you look fly.</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pitch"></section>
|
||||
<footer class="footer"></footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue