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;">
<div class="container-1200px">
<div class="container-1200px hero-content-container">
<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>
<h2 class="hero-subtext">
<a href="#" 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 href="#" class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>,
<a href="#" class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
<h1>Benjamin Toby.</h1>
<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="web-design">Web Designer</a>,
<a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>,
<a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
</h2>
<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%;
}
.hero-section {
section.hero-section {
padding: 0px 40px 40px 40px;
}
@ -202,6 +202,7 @@ input:focus {
.hero-content-link {
color: #888;
transition: all .3s ease-out;
}
.hero-content-link:hover {
@ -212,6 +213,7 @@ input:focus {
.nav-cta-button {
border: 3px solid transparent;
transition: all .3s ease-out;
}
.nav-cta-button:hover {
@ -236,6 +238,11 @@ input:focus {
/*................................................... Hero Section */
.hero-content-container {
align-items: center;
}
.my-name {
color: #3C60DE;
background-color: #E6EDFF;
@ -249,6 +256,7 @@ input:focus {
display: flex;
align-items: center;
border-radius: 100px;
transition: all .3s ease-out;
}
.linkedin-block:hover {
@ -272,7 +280,6 @@ input:focus {
width: 500px;
height: 500px;
position: relative;
margin-top: -40px;
}
.face-wrapper {
@ -366,10 +373,6 @@ input:focus {
.hamburger-line {
}
.hero-section {
padding-top: 40px;
}
#my-face {
right: -20vw;
}
@ -390,8 +393,8 @@ input:focus {
padding: 20px;
}
.hero-section {
padding: 20px;
section.hero-section {
padding: 0px 20px;
}
.hero-content-link {