Portfolio design v3 added
This commit is contained in:
BenjaminToby
parent
87d3205297
commit
57af43f6f2
BIN
images/clouds.jpg
Normal file
BIN
images/clouds.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/hero-image-ben.jpg
Normal file
BIN
images/hero-image-ben.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
1
images/logo-v3.svg
Normal file
1
images/logo-v3.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.63 1042.32"><defs><style>.cls-1{fill:#565e9a;}.cls-2{fill:#6369b0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="610.63 784.67 610.63 952.95 461.71 1042.32 461.71 874.03 464.52 872.35 610.63 784.67"/><polygon class="cls-1" points="610.63 619.33 610.63 784.67 461.71 702.53 468.56 698.7 563.9 645.44 610.63 619.33"/><path class="cls-2" d="M610.63,515.37v104l-19.91-11.74-129-76.08L306.83,617,151.94,702.39l-13.61,7.5L0,786.14V0H362Q470.26,0,532.42,47.12q2.94,2.24,5.75,4.57,55.51,46.1,56.41,130.05c0,.92,0,1.83,0,2.75q0,62.19-32.59,104.78t-86.73,56.65q64.15,15,99.77,61.67T610.63,515.37Zm-242.14,4.52Q383,508.37,383,482.28q0-51.13-59.16-51.13H222.6V531.42H323.87Q353.95,531.42,368.49,519.89ZM368,227.61q0-26.07-14.54-38.61t-44.62-12.53H222.6V276.74h86.23q30.07,0,44.62-12T368,227.61Z"/><polygon class="cls-2" points="461.71 874.03 461.71 1042.32 306.83 957.3 306.83 789.02 461.71 874.03"/><polygon class="cls-1" points="306.83 789.02 306.83 957.3 151.94 1042.32 151.94 875.51 156.15 873.19 306.83 789.02"/><polygon class="cls-2" points="151.94 875.51 151.94 1042.32 0 958.98 0 786.14 151.94 875.51"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/mountains.png
Normal file
BIN
images/mountains.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
26
scripts/v3.js
Normal file
26
scripts/v3.js
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
|
||||
var headerController = document.querySelector("#header-controller");
|
||||
var windowRect = {
|
||||
rootMargin: "0px",
|
||||
};
|
||||
|
||||
var headerObserver = new IntersectionObserver(changeHeader, windowRect);
|
||||
|
||||
function changeHeader(entry) {
|
||||
|
||||
if(entry[0].isIntersecting) {
|
||||
document.querySelector("header").className = "none";
|
||||
document.querySelector("header img").style.width = "40px";
|
||||
document.querySelector("header img").style.top = "0px";
|
||||
document.querySelector("header > a > div").classList.remove("logo-text-dissapear");
|
||||
} else {
|
||||
document.querySelector("header").classList.add("scrolled");
|
||||
document.querySelector("header img").style.width = "60px";
|
||||
document.querySelector("header img").style.top = "20px";
|
||||
document.querySelector("header > a > div").classList.add("logo-text-dissapear");
|
||||
}
|
||||
}
|
||||
|
||||
headerObserver.observe(headerController);
|
||||
4
v2.css
4
v2.css
@ -632,6 +632,10 @@ input:focus {
|
||||
#my-work-text-section {
|
||||
perspective: 500px;
|
||||
transform-style: preserve-3d;
|
||||
/*
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
*/
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
511
v3.css
Normal file
511
v3.css
Normal file
@ -0,0 +1,511 @@
|
||||
html {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
font-display: swap;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", Helvetica;
|
||||
font-display: swap;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-color: #747bef;
|
||||
--base-color: #222;
|
||||
--sec-color-1: #ed7d71;
|
||||
--sec-color-2: #d67772;
|
||||
--sec-color-3: #f5b9eb;
|
||||
--dark-color: #1c3766;
|
||||
}
|
||||
|
||||
|
||||
/*................................................... Body */
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all .3s ease;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header.scrolled {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
/* box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);*/
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
#header-controller {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
header img {
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
transition: all .3s ease;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header > a {
|
||||
font-family: "Poppins";
|
||||
border: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header > a > div {
|
||||
line-height: 16px;
|
||||
font-size: 24px;
|
||||
color: var(--dark-color);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.logo-text-dissapear {
|
||||
transform: translateX(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav > a:not(.social-media-links) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 10px 15px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: -200px 41px;
|
||||
background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav > a:not(.social-media-links):hover {
|
||||
color: var(--sec-color-1);
|
||||
background-position: 0px 41px;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
perspective: 500px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section > div {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
perspective: 500px;
|
||||
transform-style: preserve-3d;
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section > div p{
|
||||
width: 350px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################# -- Text */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--dark-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Poppins";
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
color: rgba(0,0,0,0.8);
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
span > a {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
border: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
span > a:hover {
|
||||
border: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*###################################################### -- Interactives */
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: var(--dark-color);
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all .2s ease-out;
|
||||
background-image: linear-gradient(var(--main-color),var(--main-color));
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 67px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid blue;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- General classes and IDs -- */
|
||||
|
||||
|
||||
|
||||
.social-media-links {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
background-color: var(--sec-color-1);
|
||||
}
|
||||
|
||||
#mail {
|
||||
background-color: var(--sec-color-2);
|
||||
}
|
||||
|
||||
#linkedin {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#behance {
|
||||
background-color: var(--dark-color);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- Hero -- */
|
||||
|
||||
.hero-section {
|
||||
background-color: #1b239b;
|
||||
}
|
||||
|
||||
.hero-section > div:nth-child(1) {
|
||||
|
||||
}
|
||||
|
||||
.hero-section > div:nth-child(2) {
|
||||
background-color: white;
|
||||
padding: 25vh 40px 40px 6.2vw;
|
||||
font-size: 2.5vw;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.main-text-block {
|
||||
font-size: inherit;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.main-text-block a {
|
||||
color: var(--main-color);
|
||||
background-image: linear-gradient(var(--main-color),var(--main-color));
|
||||
background-position: 0px 3.2vw;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.main-text-block a:hover {
|
||||
color: white;
|
||||
background-position: 0px 0px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.main-hero-text {
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hero-section img {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#clouds {
|
||||
min-width: 100%;
|
||||
min-height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#mountains {
|
||||
min-width: 70%;
|
||||
height: 100vh;
|
||||
left: -200px;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
.benjamin-image-block {
|
||||
width: 15vw;
|
||||
height: 80vh;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
background-color: var(--sec-color-2);
|
||||
left: 15vw;
|
||||
background-image: url("images/hero-image-ben.jpg");
|
||||
background-size: cover;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.benjamin-big-text-block {
|
||||
position: absolute;
|
||||
font-size: 8.5vw;
|
||||
bottom: -50px;
|
||||
left: 5%;
|
||||
font-weight: 900;
|
||||
line-height: 1em;
|
||||
color: white;
|
||||
mix-blend-mode: overlay;
|
||||
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
|
||||
}
|
||||
|
||||
.main-cta-button {
|
||||
font-size: 24px;
|
||||
padding: 15px 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main-cta-button:hover {
|
||||
background-image: linear-gradient(var(--main-color),var(--main-color));
|
||||
background-position: 0px 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ################################################### Animations*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*##################################################################################################### -- Mobile Styles */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 430px) {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 350px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
119
v3.html
Normal file
119
v3.html
Normal file
@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head><!-- ...................................................................................................................... Head -->
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<title>Tben Design V3</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=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="v3.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- #################################################################################-- Preloader -->
|
||||
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Header -->
|
||||
|
||||
<header>
|
||||
<a href="#">
|
||||
<img src="images/logo-v3.svg" alt="">
|
||||
<div>Tben.<br>Design</div>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
<a href="#">About Me</a>
|
||||
<a href="#">My Work</a>
|
||||
<a href="#">Resume</a>
|
||||
<a href="#">Contact Me</a>
|
||||
<a href="#" class="social-media-links material-icons" id="mail">mail</a>
|
||||
<a href="#" class="social-media-links material-icons" id="linkedin">adb</a>
|
||||
<a href="#" class="social-media-links material-icons" id="behance">mouse</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="header-controller"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero -->
|
||||
|
||||
<section class="hero-section">
|
||||
<div></div>
|
||||
|
||||
<div>
|
||||
<div class="main-text-block">
|
||||
Hi. I’m a
|
||||
<h1 class="main-hero-text">
|
||||
<a href="">UI UX Designer</a>,
|
||||
<a href="">Web Designer</a>,
|
||||
<a href="">Frontend Web Developer</a>,
|
||||
<a href="">Graphic and motion Designer</a>.
|
||||
</h1>
|
||||
</div>
|
||||
<button class="main-cta-button">Let's Talk</button>
|
||||
</div>
|
||||
|
||||
<img src="images/clouds.jpg" alt="" id="clouds">
|
||||
<img src="images/mountains.png" alt="" id="mountains">
|
||||
|
||||
<div class="benjamin-image-block"></div>
|
||||
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero -->
|
||||
|
||||
<section>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<script src="scripts/v3.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user