tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color flavor added to site

Browse Source
This commit is contained in:
BenjaminToby 2021-05-26 07:34:47 +01:00
parent 1d0f6536ee
commit f02de4fef5
2 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -20,7 +20,7 @@
<body><!-- ...................................................................................................................... Body --> <body><!-- ...................................................................................................................... Body -->
<header> <header>
<a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy'">Tben</span>design</a> <a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';color:#1D8CFF;">Tben</span>design</a>
<nav> <nav>
<ul> <ul>
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li> <li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
@ -42,7 +42,7 @@
<section class="hero-section"> <section class="hero-section">
<div class="container-1200px hero-content-container"> <div class="container-1200px hero-content-container">
<div class="column-50"> <div class="column-50">
<h1 style="background-color:white;">Benjamin Toby.</h1> <h1 style="background-color:#B8FFE1;">Benjamin Toby.</h1>
<h2 class="hero-subtext">Hi! I'm a <h2 class="hero-subtext">Hi! I'm a
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>, <a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
<a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>, <a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>,
@ -58,12 +58,12 @@
</div> </div>
<div> <div>
<h3 class="linkedin-cta-text">Find me on Linkedin</h3> <h3 class="linkedin-cta-text">Find&nbsp;me&nbsp;on&nbsp;Linkedin</h3>
</div> </div>
</div> </div>
</a> </a>
<button class="main-cta-button">Hire Me</button> <button class="main-cta-button">Hire&nbsp;Me</button>
</div> </div>
</div> </div>
@ -71,9 +71,13 @@
<div class="face-wrapper" id="my-face-wrapper"> <div class="face-wrapper" id="my-face-wrapper">
<div id="my-face"></div> <div id="my-face"></div>
<div id="color-overlay"></div> <div id="color-overlay"></div>
<div class="hero-image-blur"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="container-1200px" style="justify-content:center;align-items:center;">
<a class="scroll-down-link-block"><div class="scroll-down-icon">&rsaquo;</div></a>
</div>
</section> </section>

73
main.css
View File

@ -24,6 +24,8 @@ body {
display: block; display: block;
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
background-color: #B8FFE1;
/*background-color: #B8FFE1;*/
} }
header { header {
@ -38,6 +40,7 @@ header {
section { section {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 60px 40px; padding: 60px 40px;
@ -184,6 +187,8 @@ section.hero-section {
.nav-link-block { .nav-link-block {
font-size: 30px; font-size: 30px;
font-weight: 800; font-weight: 800;
color: rgba(0,0,0,0.8);
} }
.nav-link-block:hover { .nav-link-block:hover {
@ -205,9 +210,9 @@ section.hero-section {
} }
.hero-content-link { .hero-content-link {
color: #888; color: rgba(0,0,0,0.4);
transition: all .3s ease-out; transition: all .3s ease-out;
border-bottom: 2px solid #aaa; border-bottom: 2px solid rgba(0,0,0,0.4);
} }
.hero-content-link:hover { .hero-content-link:hover {
@ -258,7 +263,7 @@ section.hero-section {
.main-cta-button { .main-cta-button {
margin: 0; margin: 0;
border: 3px solid #333; border: 3px solid #333;
background-color: white; background-color: #B8FFE1;
color: #222; color: #222;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@ -365,6 +370,45 @@ section.hero-section {
z-index: 0; z-index: 0;
} }
.hero-image-blur {
width: 500px;
height: 500px;
background-color: rgba(0,0,0,0.1);
border-radius: 1000px;
position: absolute;
top: 0;
left: 0;
transform: translateZ(-400px);
filter: blur(50px);
z-index: -1;
}
.scroll-down-icon {
font-size:80px;
font-weight:400;
transform:rotate(90deg);
}
.scroll-down-link-block {
border: none;
opacity: .5;
transition: all .3s ease-out;
position: relative;
animation: scrolldownicon 2s infinite;
animation-timing-function: ease-out;
}
.scroll-down-link-block:hover {
border: none;
opacity: 1;
}
@keyframes scrolldownicon {
0% {top: 0;}
50% {top: 10px;}
100% {top: 0;}
}
@ -405,7 +449,7 @@ section.hero-section {
padding: 10px; padding: 10px;
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: white; background-color: #B8FFE1;
} }
.hamburger:hover { .hamburger:hover {
@ -473,7 +517,7 @@ section.hero-section {
} }
.hero-content-link { .hero-content-link {
background-color: white; background-color: #B8FFE1;
} }
.hero-ctas-block { .hero-ctas-block {
@ -496,10 +540,8 @@ section.hero-section {
.face-wrapper { .face-wrapper {
top: 0; top: 0;
width: auto; margin-top: -80vw;
height: auto; right: -50vw;
margin-top: -65vh;
right: -60vw;
} }
} }
@ -508,10 +550,19 @@ section.hero-section {
@media (max-width: 380px) { @media (max-width: 450px) {
#my-face {
margin-top: 0;
width: 400px;
height: 400px;
}
.face-wrapper { .face-wrapper {
margin-top: -160vw; margin-top: -130vw;
width: 400px;
height: 400px;
right: -50vw;
} }
} }