Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
krzoskad.github.io/main.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
486 lines (424 sloc)
9.23 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Lato&family=Slabo+27px&display=swap"); | |
* { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
.home { | |
height: 100%; | |
width: 100%; | |
padding-top: 40vh; | |
overflow: hidden; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
text-align: center; | |
background: url(../img/me1.jpg) center top; | |
background-size: cover; | |
} | |
.home_name { | |
font-size: 5rem; | |
padding-bottom: 1rem; | |
margin-bottom: 1rem; | |
border-bottom: 2px solid white; | |
} | |
.home_name_last { | |
color: #FB710E; | |
font-weight: 700; | |
} | |
.menu_button { | |
position: absolute; | |
z-index: 1; | |
right: 1rem; | |
top: 1rem; | |
height: 20px; | |
width: 20px; | |
cursor: pointer; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.menu_button_inside { | |
position: absolute; | |
right: 0; | |
top: 0.5rem; | |
width: 24px; | |
height: 3px; | |
background: white; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.menu_button_inside::before { | |
content: ''; | |
position: absolute; | |
top: -8px; | |
width: 28px; | |
height: 3px; | |
background-color: white; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.menu_button_inside::after { | |
content: ''; | |
position: absolute; | |
top: 8px; | |
width: 20px; | |
height: 3px; | |
background-color: white; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.menu_button_inside.open { | |
-webkit-transform: rotate(720deg); | |
transform: rotate(720deg); | |
background: transparent; | |
} | |
.menu_button_inside.open::before { | |
-webkit-transform: rotate(45deg) translate(5px, 8px); | |
transform: rotate(45deg) translate(5px, 8px); | |
} | |
.menu_button_inside.open::after { | |
width: 28px; | |
-webkit-transform: rotate(-45deg) translate(3px, -7px); | |
transform: rotate(-45deg) translate(3px, -7px); | |
} | |
.nav { | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
width: 100vw; | |
opacity: 0.98; | |
visibility: hidden; | |
} | |
.nav.open { | |
visibility: visible; | |
} | |
.nav .menu-nav { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-flow: column wrap; | |
flex-flow: column wrap; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
height: 100vh; | |
overflow: hidden; | |
background: #28232F; | |
list-style-type: none; | |
padding-right: 1rem; | |
-webkit-transform: translateY(-100%); | |
transform: translateY(-100%); | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.nav .menu-nav.open { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.nav .menu-nav-item { | |
-webkit-transform: translateX(100vw); | |
transform: translateX(100vw); | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.nav .menu-nav-item.open { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
.nav .menu-nav-item.active > a { | |
color: #FB710E; | |
} | |
.nav .menu-nav-link { | |
display: inline-block; | |
font-size: 2rem; | |
text-transform: uppercase; | |
padding: 1rem 0; | |
font-weight: 300; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.nav .menu-nav-link:hover { | |
color: #FB710E; | |
} | |
.menu-nav-item:nth-child(1) { | |
-webkit-transition-delay: 0.3s; | |
transition-delay: 0.3s; | |
} | |
.menu-nav-item:nth-child(2) { | |
-webkit-transition-delay: 0.45s; | |
transition-delay: 0.45s; | |
} | |
.menu-nav-item:nth-child(3) { | |
-webkit-transition-delay: 0.6s; | |
transition-delay: 0.6s; | |
} | |
.menu-nav-item:nth-child(4) { | |
-webkit-transition-delay: 0.75s; | |
transition-delay: 0.75s; | |
} | |
.about { | |
padding-bottom: 2rem; | |
} | |
.about-bio-image { | |
height: 50vh; | |
width: 100%; | |
background: url(../img/me2.jpg) center top; | |
background-size: cover; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: end; | |
-ms-flex-pack: end; | |
justify-content: flex-end; | |
} | |
.about-bio-image p { | |
margin-bottom: 2rem; | |
} | |
.about h2 { | |
color: #FFB947; | |
} | |
.about-bio { | |
width: 80%; | |
text-align: center; | |
} | |
.about .text-secondary { | |
padding-bottom: 1rem; | |
} | |
.about .education { | |
width: 60vw; | |
margin-top: 2rem; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 0px; | |
display: -ms-grid; | |
display: grid; | |
-ms-grid-columns: 1fr; | |
grid-template-columns: 1fr; | |
grid-gap: 2rem; | |
} | |
.about .education-school { | |
background: #342e3e; | |
padding: 0,5rem; | |
border-bottom: 5px solid #FB710E; | |
} | |
.about .education-school h2, .about .education-school h3 { | |
margin: 0.5rem 0; | |
} | |
.about .social-icons { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
.about footer { | |
-webkit-transform: rotate(90deg) translate(-3rem, -5rem); | |
transform: rotate(90deg) translate(-3rem, -5rem); | |
} | |
.projects { | |
padding-bottom: 2rem; | |
} | |
.projects-bio { | |
height: 30vh; | |
width: 100%; | |
background: -webkit-gradient(linear, left top, right top, from(rgba(40, 35, 47, 0.9)), to(rgba(40, 35, 47, 0.3))), url("../img/me1.jpg") center top; | |
background: linear-gradient(to right, rgba(40, 35, 47, 0.9), rgba(40, 35, 47, 0.3)), url("../img/me1.jpg") center top; | |
background-size: cover; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: end; | |
-ms-flex-pack: end; | |
justify-content: flex-end; | |
} | |
.projects-bio .text-secondary { | |
font-size: 2rem; | |
margin-bottom: 2rem; | |
} | |
.projects-items { | |
width: 60vw; | |
margin: 2rem auto 0 auto; | |
display: -ms-grid; | |
display: grid; | |
-ms-grid-columns: 1fr; | |
grid-template-columns: 1fr; | |
grid-gap: 2rem; | |
} | |
.projects-item { | |
position: relative; | |
border-bottom: 5px solid #FB710E; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.projects-item img { | |
width: 100%; | |
} | |
.projects-item::after { | |
content: ''; | |
position: absolute; | |
top: 100%; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background: #FB710E; | |
opacity: 0; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.projects-item:hover::after { | |
top: 0; | |
opacity: 0.9; | |
} | |
.projects-item:hover .projects-button { | |
opacity: 1; | |
} | |
.projects-buttons { | |
position: absolute; | |
top: 0; | |
height: 100%; | |
width: 100%; | |
z-index: 1; | |
display: -ms-grid; | |
display: grid; | |
-ms-grid-columns: (1fr)[2]; | |
grid-template-columns: repeat(2, 1fr); | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
text-align: center; | |
} | |
.projects-button { | |
opacity: 0; | |
color: white; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
.projects-button:hover { | |
color: black; | |
} | |
.projects .social-icons { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
.projects footer { | |
-webkit-transform: rotate(90deg) translate(-3rem, -5rem); | |
transform: rotate(90deg) translate(-3rem, -5rem); | |
} | |
.contact { | |
height: 100%; | |
width: 100%; | |
padding-top: 40vh; | |
overflow: hidden; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
background: url(../img/me1.jpg) center top; | |
background-size: cover; | |
} | |
.contact h2 { | |
font-size: 3rem; | |
margin-bottom: 2rem; | |
} | |
.contact-list { | |
display: -ms-grid; | |
display: grid; | |
-ms-grid-columns: 1fr; | |
grid-template-columns: 1fr; | |
grid-gap: 2rem; | |
font-size: 1.5rem; | |
} | |
.contact .social-icons { | |
position: initial; | |
margin-top: 2rem; | |
} | |
body { | |
background: #28232F; | |
color: white; | |
height: 100vh; | |
font-family: 'Lato', sans-serif; | |
line-height: 1; | |
} | |
h1, h2, h3 { | |
font-weight: 400; | |
} | |
a { | |
color: white; | |
text-decoration: none; | |
} | |
.text-secondary { | |
color: #FB710E; | |
} | |
header { | |
position: fixed; | |
z-index: 2; | |
width: 100%; | |
padding: 1rem; | |
} | |
main { | |
height: 100%; | |
width: 100%; | |
} | |
main .social-icons { | |
position: fixed; | |
bottom: 1rem; | |
left: 1rem; | |
} | |
main .social-icons a { | |
padding: 0.4rem; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
main .social-icons a:hover { | |
color: #FB710E; | |
-webkit-transition: all 0.5s ease-in-out; | |
transition: all 0.5s ease-in-out; | |
} | |
footer { | |
font-size: 1rem; | |
position: fixed; | |
bottom: 0.4rem; | |
right: 1rem; | |
text-align: right; | |
padding: 1rem; | |
color: white; | |
} | |
/*# sourceMappingURL=main.css.map */ | |
.projects h2{ | |
justify-content: center; | |
text-align: center; | |
color: #FBFBFF | |
} |