website/assets/css/main.css

240 lines
4.0 KiB
CSS
Raw Normal View History

2021-09-18 18:28:38 +02:00
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
:root {
--eerie-black: #141414ff;
--royal-purple: #724e91ff;
--saffron: #f8c630ff;
--tea-green: #c5ebc3ff;
--international-orange-engineering: #b80c09ff;
}
html {
scroll-behavior: smooth;
}
2021-09-18 18:28:38 +02:00
body {
height: 100vh;
background-color: #1f1f1f;
}
#skills-logos {
margin-top: 55px;
display: flex;
margin-left: 5%;
margin-right: 5%;
justify-content: space-between;
align-content: flex-start;
flex-wrap: wrap;
}
#skills-logos > img {
height: 65px;
margin: 5px 20px;
}
.white-outline-png {
filter: drop-shadow(0px 0px 3px white);
}
#schools {
margin: 0px 50px;
margin-top: 55px;
display: flex;
}
#about > div {
margin-bottom: 75px;
2021-09-18 18:28:38 +02:00
}
#call-to-action {
margin-top: 8vh;
}
#call-to-action > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
2021-09-18 18:28:38 +02:00
font-size: 1em;
border-radius: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
#about {
padding: 50px 10% 0px 10%;
}
h3 {
color: white;
font-size: 2.25rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin-bottom: 7px;
letter-spacing: 1px;
}
h5 {
color: grey;
font-size: 1.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
#call-to-action > a:hover {
2021-09-18 18:28:38 +02:00
background-color: lightgrey;
box-shadow: 0px 0px 6px 0px lightblue;
}
#call-to-action > a:first-child {
2021-09-18 18:28:38 +02:00
margin-right: 10px;
}
#landing-zone {
background-color: var(--eerie-black);
padding: 0px 10% 0px 10%;
height: 100vh;
display: flex;
}
#presentation {
align-self: center;
2021-09-18 18:28:38 +02:00
}
.white {
color: white;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 6rem;
}
#name {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.8rem;
}
#subtitle {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 4.5rem;
letter-spacing: 3px;
word-spacing: 4px;
line-height: 1.35em;
margin-top: 55px;
margin-bottom: 25px;
}
#profile-picture {
border-radius: 100%;
height: 70px;
width: 70px;
margin: 10px;
}
.center-align-inline {
display: flex;
align-items: center;
}
#additional-information > img {
2021-09-18 18:28:38 +02:00
fill: lightgrey;
margin-right: 8px;
}
#additional-information {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1.3em;
color: lightgrey;
}
#additional-information > p {
margin-right: 50px;
}
.icons {
height: 1.8rem;
transition: cubic-bezier(.65,.05,.36,1) 100ms;
margin-left: 10px;
}
.icons:hover {
transform: translateY(-3px);
}
footer {
padding: 65px 10% 145px 10%;
background-color: #0A0A0A;
}
footer > div > p {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
flex-basis: 40%;
text-align: justify;
}
footer > div {
display: flex;
justify-content: space-between;
}
footer > div > div {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
footer > div > div > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
font-size: 1em;
border-radius: 8px;
margin-bottom: 10px;
margin-left: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
footer > div > div > a > img {
height: 0.9em;
margin-right: 5px;
}
#inspiration {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 15px;
}
#inspiration > a {
text-decoration: underline;
color: grey;
}
#copyright > a {
text-decoration: underline;
color: lightgrey;
}
#copyright {
margin-top: 35px;
color: lightgrey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}