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

Mobile versions updated.

Browse Source
This commit is contained in:
BenjaminToby 2021-05-26 17:14:31 +01:00
parent 96b24eb8d1
commit 6ae249cdb5
2 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -48,9 +48,9 @@
<div class="column-50"> <div class="column-50">
<h1 class="my-name">Benjamin Toby.</h1> <h1 class="my-name">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&nbsp;UX&nbsp;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>,
<a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web&nbsp;Developer</a>, <a class="hero-content-link" id="frontend-dev">Frontend&nbsp;Web Developer</a>,
<a 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>

52
main.css
View File

@ -573,7 +573,7 @@ section.hero-section {
} }
.face-wrapper { .face-wrapper {
margin-top: -10vw; margin-top: 0;
right: -20vw; right: -20vw;
} }
@ -583,8 +583,25 @@ section.hero-section {
} }
#morph-shape-1 { #morph-shape-1 {
top: 20px; top: 40px;
left: 60px; left: -100px;
width: 200px;
height: 200px;
}
#morph-shape-2 {
top: auto;
bottom: 50px;
left: 0px;
width: 100px;
height: 100px;
}
#morph-shape-3 {
top: 250px;
left: -150px;
width: 120px;
height: 120px;
} }
} }
@ -612,7 +629,7 @@ section.hero-section {
} }
.container-1200px.hero-content-container { .container-1200px.hero-content-container {
padding-right: 30vw; padding-right: 40vw;
} }
.hero-content-link { .hero-content-link {
@ -639,8 +656,23 @@ section.hero-section {
.face-wrapper { .face-wrapper {
top: 0; top: 0;
margin-top: -80vw; margin-top: -500px;
right: -50vw; right: -60vw;
}
#morph-shape-1 {
top: 100px;
left: 40px;
width: 70px;
height: 70px;
}
#morph-shape-2 {
display: none;
}
#morph-shape-3 {
display: none;
} }
} }
@ -662,7 +694,7 @@ section.hero-section {
} }
.face-wrapper { .face-wrapper {
margin-top: -100vw; margin-top: -530px;
width: 400px; width: 400px;
height: 400px; height: 400px;
right: -50vw; right: -50vw;
@ -674,8 +706,8 @@ section.hero-section {
} }
#morph-shape-1 { #morph-shape-1 {
top: 40px; top: 80px;
left: 50px; left: 40px;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
@ -694,7 +726,7 @@ section.hero-section {
} }
.face-wrapper { .face-wrapper {
margin-top: -130vw; margin-top: -550px;
width: 400px; width: 400px;
height: 400px; height: 400px;
right: -50vw; right: -50vw;