diff --git a/main.css b/main.css
index e04532a..329a751 100644
--- a/main.css
+++ b/main.css
@@ -356,8 +356,7 @@ section.hero-section {
width: 500px;
height: 500px;
position: relative;
- z-index: 10;
- mix-blend-mode: screen;
+ z-index: 10;
}
.face-wrapper {
@@ -367,7 +366,7 @@ section.hero-section {
animation: facehover 3s infinite;
animation-timing-function: ease;
transition: all .4s ease-out;
- perspective: 600px;
+ transform-style: preserve-3d;
/* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
}
@@ -467,6 +466,24 @@ section.hero-section {
z-index: -10;
}
+#bg-circle {
+ width: 700px;
+ height: 700px;
+ border-radius: 50%;
+ background-color: #ddd;
+ top: 50%;
+ left: 50%;
+ transform: translate3d(-50%,-55%,-300px);
+ z-index: -1000;
+ position: absolute;
+ transition: all .5s ease;
+}
+
+
+
+
+
+
diff --git a/scripts/main.js b/scripts/main.js
index 8c4ffc3..8aa32c0 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -74,6 +74,8 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
myFace.loop = false;
myFace.playSegments([210, 249], true);
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
+ document.getElementById("bg-circle").style.transform = "rotate3d(20,-20,0,20deg) translate3d(-50%,-55%,-300px)";
+ myFaceContainer.style.mixBlendMode = "screen";
});
});
@@ -105,6 +107,8 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
steadyState();
faceWrapper.style.transform = "none";
document.getElementById("color-overlay").style.backgroundColor = "transparent";
+ document.getElementById("bg-circle").style.transform = "translate3d(-50%,-55%,-300px)";
+ myFaceContainer.style.mixBlendMode = "normal";
}, 500);
diff --git a/v2.css b/v2.css
new file mode 100644
index 0000000..6f00e64
--- /dev/null
+++ b/v2.css
@@ -0,0 +1,426 @@
+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: Lato, Helvetica;
+ font-display: swap;
+ font-size: 18px;
+ line-height: 1.5;
+ color: #222;
+}
+
+:root {
+ --main-color: #E14646;
+ --base-color: #222;
+}
+
+
+/*................................................... Body */
+
+body {
+ width: 100%;
+ display: block;
+ margin: 0px;
+ overflow: hidden;
+ /*background-color: #B8FFE1;*/
+}
+
+header {
+ position: fixed;
+ left: 40px;
+ top: 40px;
+ width: 200px;
+ z-index: 1000;
+}
+
+header > a {
+ font-family: Impact;
+ font-size: 24px;
+ text-transform: uppercase;
+ border: none;
+ letter-spacing: 0px;
+}
+
+nav {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+nav > a {
+ margin-bottom: 10px;
+ font-size: 14px;
+}
+
+nav > a:hover {
+ color: #E14646;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 60px 40px;
+ position: relative;
+}
+
+section > div {
+ width: 960px;
+ display: flex;
+ justify-content: center;
+}
+
+section > div > div{
+ flex-grow: 1;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+}
+
+
+
+/*................................................... Text */
+
+a {
+ text-decoration: none;
+ color: #222222;
+ border-bottom: 2px solid transparent;
+ cursor: pointer;
+ font-size: inherit;
+ transition: all .3s ease-out;
+}
+
+a:hover {
+ border-bottom: 2px solid #E14646;
+}
+
+h1, h2, h3, h4 {
+ font-family: Impact;
+ margin-top: 0px;
+ margin-bottom: 15px;
+ width: 100%;
+ line-height: 1.2;
+ color: inherit;
+ text-transform: uppercase;
+}
+
+h1 {
+
+ font-size: 42px;
+}
+
+h2 {
+ font-size: 24px;
+}
+
+h3 {
+
+}
+
+h4 {
+
+}
+
+p {
+ font-size: 16px;
+ line-height: 1.5;
+ margin-top: 0px;
+ margin-bottom: 20px;
+ color: inherit;
+ width: 100%;
+ font-weight: 400;
+}
+
+span {
+ font-size: inherit;
+}
+
+
+
+
+/*................................................... Interactives */
+
+button {
+ border: none;
+ background-color: black;
+ padding: 10px 20px;
+ color: white;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: darkblue;
+}
+
+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 */
+
+.aside-header {
+ position: fixed;
+ top: 40px;
+ right: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ z-index: 1000;
+}
+
+.aside-header > a {
+ font-size: 14px;
+}
+
+.social-media-link-block {
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background-color: var(--main-color);
+ margin-top: 10px;
+}
+
+.hero-graphic-wrapper {
+ width: 400px;
+ height: 600px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 50px;
+}
+
+#benjamin-hero-text {
+ font-family: Impact;
+ font-size: 90px;
+ text-transform: uppercase;
+ letter-spacing: -2px;
+ color: var(--main-color);
+}
+
+#toby-hero-text {
+ font-family: Impact;
+ font-size: 180px;
+ text-transform: uppercase;
+ letter-spacing: -4px;
+ color: var(--main-color);
+ line-height: 1;
+ margin-top: -48px;
+}
+
+.hero-graphic-block {
+ width: 350px;
+ height: 300px;
+ background-color: var(--main-color);
+ border-radius: 20px;
+ margin-top: -30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero-graphic-block > img {
+ position: relative;
+ top: -40px;
+}
+
+.hero-text-wrapper {
+ width: 300px;
+ padding-top: 100px;
+ align-items: flex-start;
+ margin-left: 50px;
+}
+
+.hero-text-wrapper > a {
+ background-color: #393051;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ transition: all .3s ease;
+}
+
+.hero-text-wrapper > a:hover {
+ background-color: #393051;
+ padding: 12px 23px;
+}
+
+.hero-text-block {
+ font-size: 24px;
+ font-weight: 500;
+ margin-bottom: 40px;
+}
+
+.hero-text-block > h1 {
+ font-size: inherit;
+ color: var(--base-color);
+ display: inline;
+ font-weight: 600;
+ text-transform: none;
+}
+
+.hero-text-block > h1 > span {
+ font-size: inherit;
+ color: var(--main-color);
+ display: inline;
+ font-weight: inherit;
+ border-bottom: 2px solid var(--main-color);
+ cursor: pointer;
+ transition: all .3s ease;
+}
+
+.hero-text-block > h1 > span:hover {
+ padding: 5px 10px;
+ background-color: black;
+ color: white;
+ border-color: #393051;
+}
+
+.hero-watermark {
+ position: absolute;
+ font-size: 30em;
+ font-family: Impact;
+ z-index: -1;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: rgba(0,0,0,0.05)
+}
+
+.skewed-bg {
+ position: absolute;
+ width: 100%;
+ height: 400px;
+ transform: skewY(-3deg);
+ background-color: var(--main-color);
+ top: -200px;
+ z-index: -1;
+}
+
+.container-darkbg {
+ color: white;
+ display: flex;
+ align-items: flex-end;
+ text-align: right;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*.................................................................................................................. Mobile Styles */
+
+@media (max-width: 950px) {
+
+
+
+}
+
+
+
+
+
+@media (max-width: 800px) {
+
+
+
+}
+
+
+
+
+
+@media (max-width: 550px) {
+
+
+
+}
+
+
+
+
+
+@media (max-width: 450px) {
+
+
+
+}
+
+
+
+
+
+
+@media (max-width: 350px) {
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/v2.html b/v2.html
new file mode 100644
index 0000000..12ffe6d
--- /dev/null
+++ b/v2.html
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
Tben Design
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Benjamin
+
Toby
+
+
+
+
+
+
+
+ Hi. I'm a
+
+ UI/UX Designer ,
+ Web Designer ,
+ Frontend Web Developer ,
+ Graphic and Motion Designer
+ .
+
+
Get me on LinkedIn
+
+
+
+
T-BEN
+
+
+
+
+
Some of my Work
+
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.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
+