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

Change font, add perspective.

Browse Source
This commit is contained in:
BenjaminToby 2021-06-06 17:27:30 +01:00
parent 1cd1ef1142
commit bc7dbb470b
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
v2.css
View File

@ -45,7 +45,7 @@ header {
}
header > a {
font-family: "hennigar";
font-family: "Anton";
font-size: 36px;
text-transform: uppercase;
border: none;
@ -123,7 +123,7 @@ a:hover {
}
h1, h2, h3, h4 {
font-family: "hennigar";
font-family: "Anton";
margin-top: 0px;
margin-bottom: 15px;
width: 100%;
@ -350,7 +350,7 @@ input:focus {
align-content: center;
justify-content: space-between;
cursor: pointer;
z-index: 2000;
z-index: 1000;
border-radius: 5px;
}
@ -422,7 +422,7 @@ input:focus {
}
#toby-hero-text {
font-family: "hennigar";
font-family: "Anton";
font-size: 205px;
text-transform: uppercase;
letter-spacing: 0px;
@ -552,11 +552,11 @@ input:focus {
.hero-watermark {
position: absolute;
font-size: 40em;
font-family: "hennigar";
font-family: "Anton";
z-index: -1;
top: -20px;
color: rgba(0,0,0,0.05);
letter-spacing: 20px;
letter-spacing: -5px;
white-space: nowrap;
}
@ -612,7 +612,7 @@ input:focus {
}
.section-watermark {
font-family: "hennigar";
font-family: "Anton";
position: absolute;
color: rgba(0,0,0,0.05);
font-size: 15em;

12
v2.html
View File

@ -10,7 +10,7 @@
<title>Tben Design</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons|Anton" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
@ -117,12 +117,12 @@
<section class="below-fold translate menu-color-change" data-speed=".1" id="section-2" style="perspective:600px;">
<div style="perspective:400px;transform-style:preserve-3d;">
<div class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
<div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
<h2 class="scroll-into-view">Some of my Work</h2>
<p style="max-width:350px;color:inherit;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</div>
<div class="right-column" style="transform-style:preserve-3d;">
<div class="right-column" style="perspective:400px;transform-style:preserve-3d;">
<a class="portfolio-item scroll-into-view">
<div><img src="images/portfolio-item-3.jpg" alt=""></div>
<h4>Portfolio Item Title</h4>
@ -153,11 +153,11 @@
<section style="z-index:-10;padding-top:500px;">
<div style="perspective:400px;transform-style:preserve-3d;" class="mobile-flip">
<div class="container translate" data-speed="0.04" style="transform-style:preserve-3d;">
<div class="about-me-img-block"></div>
<div class="container translate" data-speed="0.04" style="perspective:400px;transform-style:preserve-3d;">
<div class="about-me-img-block scroll-into-view"></div>
</div>
<div class="right-column translate" data-speed="0.05" style="transform-style:preserve-3d;">
<div class="right-column translate" data-speed="0.05" style="perspective:400px;transform-style:preserve-3d;">
<h2 class="scroll-into-view">A little about Me</h2>
<p style="max-width:350px;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
</div>