diff --git a/images/clouds.jpg b/images/clouds.jpg
new file mode 100644
index 0000000..3938def
Binary files /dev/null and b/images/clouds.jpg differ
diff --git a/images/hero-image-ben.jpg b/images/hero-image-ben.jpg
new file mode 100644
index 0000000..a92c0bf
Binary files /dev/null and b/images/hero-image-ben.jpg differ
diff --git a/images/logo-v3.svg b/images/logo-v3.svg
new file mode 100644
index 0000000..7c553c0
--- /dev/null
+++ b/images/logo-v3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/mountains.png b/images/mountains.png
new file mode 100644
index 0000000..40ae553
Binary files /dev/null and b/images/mountains.png differ
diff --git a/scripts/v3.js b/scripts/v3.js
new file mode 100644
index 0000000..4298797
--- /dev/null
+++ b/scripts/v3.js
@@ -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);
\ No newline at end of file
diff --git a/v2.css b/v2.css
index 64cad1e..c4d5d00 100644
--- a/v2.css
+++ b/v2.css
@@ -632,6 +632,10 @@ input:focus {
#my-work-text-section {
perspective: 500px;
transform-style: preserve-3d;
+/*
+ position: sticky;
+ top: 0px;
+*/
}
.container {
diff --git a/v3.css b/v3.css
new file mode 100644
index 0000000..6d7a87e
--- /dev/null
+++ b/v3.css
@@ -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) {
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/v3.html b/v3.html
new file mode 100644
index 0000000..6070a14
--- /dev/null
+++ b/v3.html
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+ Tben Design V3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+ Benjamin
Toby
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+