personal-site/v3.css

539 lines
7.6 KiB
CSS
Raw Normal View History

2021-06-09 04:41:48 +00:00
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;
2021-06-09 07:38:13 +00:00
/*
animation-timing-function: linear;
transition-timing-function: linear;
*/
2021-06-09 04:41:48 +00:00
}
:root {
--main-color: #747bef;
--base-color: #222;
--sec-color-1: #ed7d71;
--sec-color-2: #d67772;
--sec-color-3: #f5b9eb;
--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;
2021-06-09 07:38:13 +00:00
perspective: 500;
transition: all .3s ease;
}
header * {
/* transition: all .5s ease;*/
2021-06-09 04:41:48 +00:00
}
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;
2021-06-09 07:38:13 +00:00
/* transition: all .3s ease;*/
2021-06-09 04:41:48 +00:00
position: relative;
top: 0;
}
header > a {
font-family: "Poppins";
border: none;
color: inherit;
display: flex;
align-items: center;
font-weight: 900;
position: relative;
2021-06-09 07:38:13 +00:00
perspective: 500px;
transform-style: preserve-3d;
2021-06-09 04:41:48 +00:00
}
header > a > div {
line-height: 16px;
font-size: 24px;
color: var(--dark-color);
2021-06-09 07:38:13 +00:00
/* transition: all .3s ease;*/
2021-06-09 04:41:48 +00:00
}
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;
}
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;
}
section > div {
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
perspective: 500px;
transform-style: preserve-3d;
padding: 60px;
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;
2021-06-09 11:39:27 +00:00
transition: all .3s ease-out;
2021-06-09 04:41:48 +00:00
}
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: 36px;
}
h3 {
}
h4 {
}
p {
font-size: 20px;
line-height: 1.5;
margin-top: 0px;
margin-bottom: 20px;
color: rgba(0,0,0,0.8);
width: 100%;
font-weight: 500;
}
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;
2021-06-09 11:39:27 +00:00
transition: all .2s ease-out;
2021-06-09 04:41:48 +00:00
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;
}
/*############################################################# -- Hero -- */
.hero-section {
background-color: #1b239b;
2021-06-09 07:38:13 +00:00
justify-content: space-between;
2021-06-09 04:41:48 +00:00
}
.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;
2021-06-09 07:38:13 +00:00
/* opacity: 0;*/
2021-06-09 04:41:48 +00:00
}
.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;
}
.main-text-block a:hover {
color: white;
background-position: 0px 0px;
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;
2021-06-09 11:39:27 +00:00
opacity: 0.2;
2021-06-09 04:41:48 +00:00
}
#mountains {
2021-06-09 07:38:13 +00:00
width: 100%;
min-height: 100vh;
bottom: -20vh;
2021-06-09 04:41:48 +00:00
}
.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: .8;
2021-06-09 07:38:13 +00:00
padding: 0;
2021-06-09 04:41:48 +00:00
}
.benjamin-big-text-block {
position: absolute;
font-size: 8.5vw;
bottom: -50px;
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));
}
.main-cta-button {
font-size: 24px;
padding: 15px 40px;
margin-top: 20px;
}
.main-cta-button:hover {
background-image: linear-gradient(var(--main-color),var(--main-color));
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: var(--dark-color);
}
2021-06-09 11:39:27 +00:00
/*############################################################# -- My Work -- */
.my-work-section {
}
.my-work-section > div:nth-child(2) {
background-color: var(--sec-color-1);
}
2021-06-09 04:41:48 +00:00
/* ################################################### Animations*/
/*##################################################################################################### -- Mobile Styles */
@media (max-width: 1200px) {
}
@media (max-width: 800px) {
}
@media (max-width: 600px) {
}
@media (max-width: 430px) {
}
@media (max-width: 350px) {
}