Change font, add perspective.
This commit is contained in:
parent
1cd1ef1142
commit
bc7dbb470b
14
v2.css
14
v2.css
@ -45,7 +45,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header > a {
|
header > a {
|
||||||
font-family: "hennigar";
|
font-family: "Anton";
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border: none;
|
border: none;
|
||||||
@ -123,7 +123,7 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
h1, h2, h3, h4 {
|
||||||
font-family: "hennigar";
|
font-family: "Anton";
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -350,7 +350,7 @@ input:focus {
|
|||||||
align-content: center;
|
align-content: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 2000;
|
z-index: 1000;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -422,7 +422,7 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#toby-hero-text {
|
#toby-hero-text {
|
||||||
font-family: "hennigar";
|
font-family: "Anton";
|
||||||
font-size: 205px;
|
font-size: 205px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
@ -552,11 +552,11 @@ input:focus {
|
|||||||
.hero-watermark {
|
.hero-watermark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 40em;
|
font-size: 40em;
|
||||||
font-family: "hennigar";
|
font-family: "Anton";
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
color: rgba(0,0,0,0.05);
|
color: rgba(0,0,0,0.05);
|
||||||
letter-spacing: 20px;
|
letter-spacing: -5px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -612,7 +612,7 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-watermark {
|
.section-watermark {
|
||||||
font-family: "hennigar";
|
font-family: "Anton";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: rgba(0,0,0,0.05);
|
color: rgba(0,0,0,0.05);
|
||||||
font-size: 15em;
|
font-size: 15em;
|
||||||
|
12
v2.html
12
v2.html
@ -10,7 +10,7 @@
|
|||||||
<title>Tben Design</title>
|
<title>Tben Design</title>
|
||||||
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
|
<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 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="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
|
||||||
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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;">
|
<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 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>
|
<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>
|
<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>
|
||||||
|
|
||||||
<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">
|
<a class="portfolio-item scroll-into-view">
|
||||||
<div><img src="images/portfolio-item-3.jpg" alt=""></div>
|
<div><img src="images/portfolio-item-3.jpg" alt=""></div>
|
||||||
<h4>Portfolio Item Title</h4>
|
<h4>Portfolio Item Title</h4>
|
||||||
@ -153,11 +153,11 @@
|
|||||||
|
|
||||||
<section style="z-index:-10;padding-top:500px;">
|
<section style="z-index:-10;padding-top:500px;">
|
||||||
<div style="perspective:400px;transform-style:preserve-3d;" class="mobile-flip">
|
<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="container translate" data-speed="0.04" style="perspective:400px;transform-style:preserve-3d;">
|
||||||
<div class="about-me-img-block"></div>
|
<div class="about-me-img-block scroll-into-view"></div>
|
||||||
</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>
|
<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>
|
<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>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user