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

Simplified hero

Browse Source
This commit is contained in:
BenjaminToby 2021-05-25 20:14:25 +01:00
parent ae5385087d
commit 2294d0cf3a
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -40,14 +40,14 @@
<section class="hero-section" style="padding-top: 40px;"> <section class="hero-section" style="padding-top: 40px;">
<div class="container-1200px"> <div class="container-1200px hero-content-container">
<div class="column-50"> <div class="column-50">
<h1><span style="font-family:'Satisfy';font-size:.7em;color:#888;">Hi!&nbsp;I'm&nbsp;<span style="font-family:'Poppins';color:#ddd;font-size:.5em;white-space:nowrap;">---------------------------</span></span><br>Benjamin Toby.</h1> <h1>Benjamin Toby.</h1>
<h2 class="hero-subtext"> <h2 class="hero-subtext">Hi! I'm a
<a href="#" 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 href="#" class="hero-content-link" id="web-design">Web Designer</a>, <a class="hero-content-link" id="web-design">Web Designer</a>,
<a href="#" class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>, <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>,
<a href="#" class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>. <a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
</h2> </h2>
<a href="#" style="border:none;margin-top:15px;display:flex;justify-content:flex-start;"> <a href="#" style="border:none;margin-top:15px;display:flex;justify-content:flex-start;">

21
main.css
View File

@ -170,8 +170,8 @@ input:focus {
width: 50%; width: 50%;
} }
.hero-section { section.hero-section {
padding: 0px 40px 40px 40px;
} }
@ -202,6 +202,7 @@ input:focus {
.hero-content-link { .hero-content-link {
color: #888; color: #888;
transition: all .3s ease-out;
} }
.hero-content-link:hover { .hero-content-link:hover {
@ -212,6 +213,7 @@ input:focus {
.nav-cta-button { .nav-cta-button {
border: 3px solid transparent; border: 3px solid transparent;
transition: all .3s ease-out;
} }
.nav-cta-button:hover { .nav-cta-button:hover {
@ -236,6 +238,11 @@ input:focus {
/*................................................... Hero Section */ /*................................................... Hero Section */
.hero-content-container {
align-items: center;
}
.my-name { .my-name {
color: #3C60DE; color: #3C60DE;
background-color: #E6EDFF; background-color: #E6EDFF;
@ -249,6 +256,7 @@ input:focus {
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 100px; border-radius: 100px;
transition: all .3s ease-out;
} }
.linkedin-block:hover { .linkedin-block:hover {
@ -272,7 +280,6 @@ input:focus {
width: 500px; width: 500px;
height: 500px; height: 500px;
position: relative; position: relative;
margin-top: -40px;
} }
.face-wrapper { .face-wrapper {
@ -366,10 +373,6 @@ input:focus {
.hamburger-line { .hamburger-line {
} }
.hero-section {
padding-top: 40px;
}
#my-face { #my-face {
right: -20vw; right: -20vw;
} }
@ -390,8 +393,8 @@ input:focus {
padding: 20px; padding: 20px;
} }
.hero-section { section.hero-section {
padding: 20px; padding: 0px 20px;
} }
.hero-content-link { .hero-content-link {