From 6080c827b7dc011d3b992f48219b20915524a729 Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Thu, 3 Jun 2021 22:35:02 +0100 Subject: [PATCH] V2 added --- images/placeholder-portrait.png | Bin 0 -> 17737 bytes index.html | 3 +- main.css | 23 +- scripts/main.js | 4 + v2.css | 426 ++++++++++++++++++++++++++++++++ v2.html | 80 ++++++ 6 files changed, 532 insertions(+), 4 deletions(-) create mode 100644 images/placeholder-portrait.png create mode 100644 v2.css create mode 100644 v2.html diff --git a/images/placeholder-portrait.png b/images/placeholder-portrait.png new file mode 100644 index 0000000000000000000000000000000000000000..964f3fb87684c4cf49658b05e65f210c1d264861 GIT binary patch literal 17737 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 z
- +
+
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 + + + + + + + + + + + +
+ Tben.Design + +
+ +
+ My Resume + +
+ +
+
+
+
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