first 2 lectures
This commit is contained in:
dqnid committed
1 parent
2cf84f4efd
commit
98a7c96117
289 files changed
+14886
No files matched your search
@@ -0,0 +1,60 @@
|
||||
.footer {
|
||||
background-color: $color-grey-dark-3;
|
||||
padding: 10rem 0;
|
||||
font-size: 1.4rem;
|
||||
color: $color-grey-light-1;
|
||||
|
||||
&__logo-box {
|
||||
text-align: center;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 15rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
border-top: 1px solid $color-grey-dark;
|
||||
padding-top: 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $color-grey-light-1;
|
||||
background-color: $color-grey-dark-3;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $color-primary;
|
||||
box-shadow: 0 1rem 2rem rgba($color-black, .4);
|
||||
transform: rotate(5deg) scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
border-top: 1px solid $color-grey-dark;
|
||||
padding-top: 2rem;
|
||||
width: 80%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.row {
|
||||
max-width: $grid-width;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $gutter-vertical;
|
||||
}
|
||||
|
||||
@include clearfix;
|
||||
|
||||
[class^="col-"] {
|
||||
float: left;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $gutter-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.col-1-of-2 {
|
||||
width: calc((100% - #{$gutter-horizontal}) / 2);
|
||||
|
||||
}
|
||||
|
||||
.col-1-of-3 {
|
||||
width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
|
||||
}
|
||||
|
||||
.col-2-of-3 {
|
||||
width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-1-of-4 {
|
||||
width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
|
||||
}
|
||||
|
||||
.col-2-of-4 {
|
||||
width: calc(2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
.col-3-of-4 {
|
||||
width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.header {
|
||||
height: 95vh;
|
||||
background-image: linear-gradient(
|
||||
to right bottom,
|
||||
rgba($color-primary-light, 0.8),
|
||||
rgba($color-primary-dark, 0.8)),
|
||||
url(../img/hero.jpg);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
position: relative;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
|
||||
|
||||
&__logo-box {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 4rem;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
.navigation {
|
||||
&__checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__button {
|
||||
background-color: $color-white;
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
position: fixed;
|
||||
top: 6rem;
|
||||
right: 6rem;
|
||||
border-radius: 50%;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 1rem 3rem rgba($color-black, .1);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__background {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: 6.5rem;
|
||||
right: 6.5rem;
|
||||
background-image: radial-gradient($color-primary-light, $color-primary-dark);
|
||||
z-index: 1000;
|
||||
transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
//transform: scale(80);
|
||||
}
|
||||
|
||||
&__nav {
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
&__link {
|
||||
&:link,
|
||||
&:visited {
|
||||
display: inline-block;
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
padding: 1rem 2rem;
|
||||
color: $color-white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
|
||||
background-size: 220%;
|
||||
transition: all .4s;
|
||||
|
||||
span {
|
||||
margin-right: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-position: 100%;
|
||||
color: $color-primary;
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//FUNCTIONALITY
|
||||
&__checkbox:checked ~ &__background {
|
||||
transform: scale(80);
|
||||
}
|
||||
|
||||
&__checkbox:checked ~ &__nav {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
//ICON
|
||||
&__icon {
|
||||
position: relative;
|
||||
margin-top: 3.5rem;
|
||||
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background-color: $color-grey-dark-3;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
&::before { top: -.8rem; }
|
||||
&::after { top: .8rem; }
|
||||
}
|
||||
|
||||
&__button:hover &__icon::before {
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
&__button:hover &__icon::after {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon::before {
|
||||
top: 0;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
&__checkbox:checked + &__button &__icon::after {
|
||||
top: 0;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user