personal-site/main.css
2021-06-19 11:03:18 +01:00

673 lines
9.9 KiB
CSS

html {
width: 100%;
overflow-x: hidden;
font-display: swap;
scroll-behavior: smooth;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Poppins", Helvetica;
font-display: swap;
font-size: 18px;
line-height: 1.5;
color: #222;
position: relative;
/*
animation-timing-function: linear;
transition-timing-function: linear;
*/
}
:root {
--main-color: #747bef;
--base-color: #222;
--sec-color-1: #ed7d71;
--sec-color-2: #faa096;
--sec-color-3: #75F0E6;
--dark-color: #1c3766;
}
/*................................................... Body */
body {
width: 100%;
margin: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 1000;
padding: 40px;
display: flex;
align-items: center;
justify-content: space-between;
height: 140px;
overflow: hidden;
perspective: 500;
transition: all .3s ease;
}
header * {
/* transition: all .5s ease;*/
}
header.scrolled {
padding: 20px;
background-color: white;
/* box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);*/
height: 80px;
}
#header-controller {
position: absolute;
width: 100%;
height: 15vh;
top: 0;
left: 0;
background: lightgray;
}
header img {
width: 40px;
margin-right: 10px;
/* transition: all .3s ease;*/
position: relative;
top: 0;
}
header > a {
font-family: "Poppins";
border: none;
color: inherit;
display: flex;
align-items: center;
font-weight: 900;
position: relative;
perspective: 500px;
transform-style: preserve-3d;
}
header > a > div {
line-height: 16px;
font-size: 24px;
color: var(--dark-color);
/* transition: all .3s ease;*/
}
nav {
display: flex;
align-items: center;
color: inherit;
}
nav > a:not(.social-media-links) {
font-size: 16px;
font-weight: 500;
padding: 10px 15px;
background-size: 100%;
background-repeat: no-repeat;
background-position: -200px 41px;
background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
color: inherit;
transition: background .3s ease;
}
nav > a:not(.social-media-links):hover {
color: var(--sec-color-1);
background-position: 0px 41px;
}
section {
display: flex;
position: relative;
width: 100%;
perspective: 500px;
padding: 0;
margin: 0;
height: 100vh;
overflow: hidden;
align-items: stretch;
}
section > div {
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
perspective: 500px;
transform-style: preserve-3d;
padding: 15%;
position: relative;
}
section > div p{
width: 350px;
color: inherit;
}
/*############################################# -- Text */
a {
text-decoration: none;
color: var(--dark-color);
border: none;
cursor: pointer;
font-size: inherit;
/* transition: all .3s ease-out;*/
}
a:hover {
border: none;
}
h1, h2, h3, h4 {
font-family: "Poppins";
margin-top: 0px;
margin-bottom: 15px;
width: 100%;
line-height: 1.2;
color: inherit;
font-weight: 700;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 32px;
width: auto;
}
h3 {
}
h4 {
}
p {
font-size: 20px;
line-height: 1.5;
margin-top: 0px;
margin-bottom: 20px;
width: 100%;
font-weight: 400;
}
span {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
color: inherit;
letter-spacing: inherit;
line-height: inherit;
}
span > a {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
color: inherit;
letter-spacing: inherit;
line-height: inherit;
border: inherit;
border-color: inherit;
}
span > a:hover {
border: inherit;
border-color: inherit;
}
/*###################################################### -- Interactives */
button {
border: none;
background-color: var(--dark-color);
padding: 10px 20px;
color: white;
cursor: pointer;
background-image: linear-gradient(var(--main-color),var(--main-color));
background-repeat: no-repeat;
background-position: 0px 67px;
}
button:hover {
background-position: 0px 0px;
}
input, textarea {
padding: 15px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.2);
margin-bottom: 15px;
width: 100%;
font-size: 14px;
}
input:focus {
border: 1px solid blue;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
}
/*############################################################# -- General classes and IDs -- */
.social-media-links {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
background-color: var(--sec-color-1);
}
#mail {
background-color: var(--sec-color-2);
}
#linkedin {
background-color: var(--main-color);
}
#behance {
background-color: var(--dark-color);
margin-right: 0;
}
.scroll-into-view {
padding: 0;
width: 0;
transition: all .7s cubic-bezier(0.93, 0, 0.09, 1);
}
.scrolled-into-view {
width: 50%;
padding: 40px;
}
.scroll-into-view-content {
transform: translateY(80px) rotateX(5deg);
transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
opacity: 0;
}
.scrolled-into-view-content {
transform: none;
opacity: 1;
}
/*############################################################# -- Hero -- */
.hero-section {
background-color: #1b239b;
justify-content: space-between;
}
.hero-section > div:nth-child(1) {
}
.hero-section > div:nth-child(2) {
background-color: white;
padding: 25vh 40px 40px 6.2vw;
font-size: 2.5vw;
display: inline;
z-index: 100;
/* opacity: 0;*/
}
.main-text-block {
font-size: inherit;
max-width: 80%;
}
.main-text-block a {
color: var(--main-color);
background-image: linear-gradient(var(--main-color),var(--main-color));
background-position: 0px 3.2vw;
background-repeat: no-repeat;
transition: all .3s ease-out;
}
.main-text-block a:hover {
color: white;
background-position: 0px 0px;
background-image: linear-gradient(var(--dark-color),var(--dark-color));
padding: 5px 10px;
}
.main-hero-text {
font-size: inherit;
font-weight: 500;
width: auto;
display: inline;
}
.hero-section img {
position: absolute;
z-index: -1;
}
#clouds {
min-width: 100%;
min-height: 100vh;
left: 0px;
top: 0px;
opacity: 0.2;
}
#mountains {
width: 100%;
min-height: 100vh;
bottom: -20vh;
}
.benjamin-image-block {
width: 15vw;
height: 80vh;
position: absolute;
bottom: -10px;
background-color: var(--sec-color-2);
left: 15vw;
background-image: url("images/hero-image-ben.jpg");
background-size: cover;
opacity: .2;
padding: 0;
}
.benjamin-big-text-block {
position: absolute;
font-size: 8.5vw;
bottom: -40px;
left: 5%;
font-weight: 900;
line-height: 1em;
color: white;
mix-blend-mode: overlay;
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
padding: 40px;
}
.main-cta-button {
font-size: 24px;
padding: 15px 40px;
margin-top: 20px;
background-color: var(--sec-color-1);
transition: all .3s ease-out;
background-image: linear-gradient(var(--dark-color),var(--dark-color));
}
.main-cta-button:hover {
background-image: linear-gradient(var(--dark-color),var(--dark-color));
background-position: 0px 0px;
background-repeat: no-repeat;
}
/*############################################################# -- My Work -- */
.my-work-section {
}
.my-work-section > div:nth-child(1) {
color: rgba(0,0,0,0.6);
align-items: flex-end;
}
.my-work-section > div:nth-child(2) {
background-color: var(--sec-color-2);
/* width: 20%;*/
}
.my-work-section h2 {
text-align: right;
color: rgba(0,0,0,.8);
}
.my-work-section p {
text-align: right;
}
/*############################################################# -- About Me -- */
.about-me-section {
justify-content: flex-end;
}
.about-me-section > div:nth-child(1) {
background-color: var(--sec-color-3);
/* width: 20%;*/
}
/*############################################################# -- My Specialties -- */
.my-specialties-section {
justify-content: flex-start;
align-items: center;
flex-direction: column;
background-color: var(--dark-color);
color: white;
text-align: center;
padding: 100px;
}
.my-specialties-section h2 {
}
.my-specialties-section p {
color: rgba(255,255,255,0.70);
max-width: 800px;
}
.my-specialties-section > div {
max-width: 1140px;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 20px 0 0 0;
}
.my-specialties-section > div > div {
width: 100px;
height: 100px;
background-color: var(--main-color);
margin: 10px;
border-radius: 50%;
transform-style: preserve-3d;
}
/*############################################################# -- Contact Me -- */
.contact-section {
position: relative;
}
.contact-section > div:nth-of-type(2) {
background-color: var(--sec-color-1);
}
.contact-section-controller {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
padding: 0;
}
/* ################################################### Animations*/
/*##################################################################################################### -- Mobile Styles */
@media (max-width: 1200px) {
}
@media (max-width: 800px) {
}
@media (max-width: 600px) {
}
@media (max-width: 430px) {
}
@media (max-width: 350px) {
}