From f510c1cce88d55e91a1635fc007d7c05508b1d7a Mon Sep 17 00:00:00 2001 From: Hilary Young Date: Sat, 13 May 2023 00:27:24 +0100 Subject: [PATCH] Adding interactive web template --- .DS_Store | Bin 0 -> 8196 bytes template/.DS_Store | Bin 0 -> 6148 bytes template/Hilary_Young/index.html | 153 +++++++++++ template/Hilary_Young/styles/loader.css | 40 +++ template/Hilary_Young/styles/stylesheet.css | 290 ++++++++++++++++++++ 5 files changed, 483 insertions(+) create mode 100644 .DS_Store create mode 100644 template/.DS_Store create mode 100644 template/Hilary_Young/index.html create mode 100644 template/Hilary_Young/styles/loader.css create mode 100644 template/Hilary_Young/styles/stylesheet.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d5413b3d8878d2e7f8fc98e1da98a7d297412b46 GIT binary patch literal 8196 zcmeHM&1(}u6n~RMv$0fiP^brC!JCBiLoF6Pq-k;}s7P1pL8WH1Aqj4FLq3cW3M+W3 zXFd8ac=aTL=-rF{8~y{Lzximov)lHj6`Th%znOXO&3p69WM?NKB32!H%R~!AWT9{@ z&Y?O)xSp4kWYow7AcH^o?PaGK_WCJHGhi4n3>XFs1BL;^z`w!(&TKB$5$C?tn%Xd6 z82B$4;Liseg=0lwBvCv%P>Cx5Fo$6wXcu_{Xe+EJj3hz>VbT>SU75OKFzJqQTiI0< zMiQkvF?IQ1Dl$_y6egl$ep{Fmt4K7pVZbnuW`N(_b5y1_b!nvC-!tFO#&x~0R&)K( z#hCT8@Zv+1|Gcj2y<_$LPVBdVTm`O_-;YZj8k4I+ru#4xIr(3j18&sz|jJX005#u@eB1RLvVZwv2Bkp0rzJ;0l@M-Y2ZZB4H zti3xK_SI+k-tGI{;b>{;8_Q&Kr%vasyftS%aysF}88t@ZVYM-Mzqjn3}NbEqj}k%)tvVf58Ccyi_^nw;`{K&%h!AA z+mf0qz9Wyb)AlC&$P-M>_0$;zei*c&V>T+Bo#y=KY#1>NoE!sL8G3== z|LaHp{(o`_n#hI$!@wVBfaPjVt%@-FuOP{Y{H|@IJVxQd?IMZ71r;~pl Ywyks(g^@&PAm&9t&|oUVz+YwHH@+qx@Bjb+ literal 0 HcmV?d00001 diff --git a/template/.DS_Store b/template/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..dfae22af0725cfe81fd9bef4b8ff88d09b5811ed GIT binary patch literal 6148 zcmeHK%We}f6g_UDCZt^iWm8mvM(Ub~Zn{I7L{kYCY#ON&E7~L_tvZv5NFv%*rz;lx z16!7S1rndZ5AY52T-zdc(xhEg2z(>^*uD?@9?y(p0IEIh?*erIRTjZ=jnyq8dMOLC zW=9%CB{A||H_f~3Nw^?^fxy7u&VanTCG;@H_;u>Nzb$H-zqRNjtW`SL?ey|&WDa+EihehSP#ISx@-d~{|ow`w9Nbqg+al+pS$2iAxuJIH(rmT-K#5;VX zuFG|wVZv6E;}c{^=d$?5NNyGzcu(t$G1BE;>gk-g=z&(9xMjcdct3i}yj_p$dmJmONw{TXu|_?)QE)VQ2jD?gWCpJx8<%D?V7JFBC+ zJG-d$R;3~aMUAT(>fOCqx^MF2d~u$>M|bTRWT$M zT$R0ID0_EM#+~}u+7||mJCvT8aqP^>-cXdidZxLY~TP#|ri=;t}Efxkj QLJ5BaG!3B&3_K_UH?%0llmGw# literal 0 HcmV?d00001 diff --git a/template/Hilary_Young/index.html b/template/Hilary_Young/index.html new file mode 100644 index 0000000..f8ec148 --- /dev/null +++ b/template/Hilary_Young/index.html @@ -0,0 +1,153 @@ + + + + + + + + HNY Website Template + + + + + + + + + + + + + +
+
+

Taking you to the enchanted garden

+
+ + + +
+ Scroll to view more +
+ +
+
+ +

Hello, I'm Hilary

+

A designer, developer and a big fan of ✨ shiny shoes ✨ + hoping to further my career in the design space. + Passionate about integrating design and technology + to develop innovations with creative solutions. +

+ + +
+ Let's connect + + +
+
+
+
+ +
+
+
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+ + +
+ + + Change to image name + +
+
+
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/template/Hilary_Young/styles/loader.css b/template/Hilary_Young/styles/loader.css new file mode 100644 index 0000000..0c5a60f --- /dev/null +++ b/template/Hilary_Young/styles/loader.css @@ -0,0 +1,40 @@ +/* Loading screen styles */ +.loadingScreen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #f2abbc; + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; +} + +.loadingText { + font-size: 22px; + padding-left: 12px; + color: white; + font-family: Hepta Slab, sans-serif; +} + +/* Spinning animation */ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.loader { + border: 4px solid #4D3549; + border-top: 4px solid #F15533; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; +} \ No newline at end of file diff --git a/template/Hilary_Young/styles/stylesheet.css b/template/Hilary_Young/styles/stylesheet.css new file mode 100644 index 0000000..6ca7634 --- /dev/null +++ b/template/Hilary_Young/styles/stylesheet.css @@ -0,0 +1,290 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0px; + padding: 0px; + font-family: 'Montserrat', sans-serif; + background-color: #EEE7DF; + background-image: url("https://firebasestorage.googleapis.com/v0/b/opensourcecci.appspot.com/o/blob-background.png?alt=media&token=4551f0d1-2737-4553-9cc6-0e40f037c97e"); + background-repeat: no-repeat; + background-position: center center; + background-attachment: fixed; + background-size: cover; +} + +/* Fonts */ +h1 { + font-size: 3.6rem; +} + +p { + font-size: 1.2rem; + line-height: 2rem; +} + +/* Color swap*/ +.colorSwap { + color: #F15533; +} + + +/* Website sections */ +.userColumn { + float: left; + width: 45%; + padding: 0% 5%; + height: 100vh; + + display: flex; + flex-direction: column; + justify-content: center; +} + +.worksColumn { + float: left; + width: 55%; + height: 100vh; + background-color: #f2abbc; +} + + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Buttons */ +.buttonContainer { + display: flex; +} + +.buttonStyle { + border-radius: 100px; + border: none; + padding: 16px 24px; + margin-right: 12px; + text-decoration: none; + margin-top: 32px; +} + +.contactButton { + background-color: #F15533; + color: white; +} + +.contactButton:hover { + background-color: #c04124; +} + +.iconButton { + background-color: #e3899e; + color: white; +} + +.iconButton:hover { + background-color: #c16c7f; +} + +.iconButton i { + font-size: 24px; +} + +/*Instructions Overlay*/ +.overlay { + position: fixed; + top: 0; + right: 0; + color: white; + z-index: 999; + text-align: right; + padding-bottom: 40px; + padding-right: 5%; + padding-top: 40px; +} + + +/* SCROLLABLE GALLERY */ +div.gallerySpace { + background: #ffffff; + color: #000000; +} + +* { + box-sizing: border-box; +} + +/* hiding scrollbar */ +::-webkit-scrollbar { + width: 1px; + height: 1px; +} + +::-webkit-scrollbar-button { + width: 1px; + height: 1px; +} + +.external { + overflow: hidden; + height: 100vh; +} + +.horizontalScrollWrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + transform: rotate(-90deg) translate3d(0, -100vh, 20); + transform-origin: right top; + overflow-y: auto; + overflow-x: hidden; + height: 100vw; + perspective: 1px; + transform-style: preserve-3d; + padding-bottom: 45rem; + padding-left: 10rem; +} + +.imgWrapper { + transform: rotate(00deg); + display: flex; + align-items: center; + justify-content: center; + min-height: 40vh; + transform-origin: 50% 50%; + transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh); + transition: 1s; +} + +.imgWrapper:hover { + min-height: 60vh; +} + +.slowerSpeed { + transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-5vh); +} + +.slowerSpeed1 { + transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(-5vh); +} + +.slowerSpeed2 { + transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(13vh); +} + +.slowerStopper { + transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh); +} + +.fasterSpeed { + transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(-2vh) translateY(18vh); +} + +.fasterSpeed1 { + transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(-10vh) translateY(15vh); +} + +.verticalAlignment { + transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(-2vh) translateY(-5vh); +} + +.last { + transform: rotate(90deg) translateZ(-.1px) scale(1.1) translateX(25vh) translateY(-8vh); +} + +.scroll-info, +header { + position: absolute; + left: 1rem; +} + + +header { + bottom: 1rem; +} + + +a { + color: inherit; +} + +.imgWrapper a { + overflow: hidden; + display: block; + padding: 1vh; + background: #fff; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); +} + +.imgStyle { + transform: rotate(270deg); +} + +img { + max-width: 45vh; + max-height: 50vh; + transition: .5s; + vertical-align: top; + +} + +a:hover img { + filter: none; +} + +p { + margin: 0; +} + +.scroll-info { + display: flex; + align-items: center; +} + +.icon svg { + width: 50px; + fill: currentcolor; +} + + +/* TABLET SCALAR*/ +@media screen and (max-width: 825px) { + .userColumn { + width: 100%; + height: 100%; + display: block; + padding-bottom: 42px; + padding-top: 4%; + } + + .worksColumn { + width: 100%; + height: 100%; + } +} + + +/* MOBILE SCALAR */ +@media screen and (max-width: 390px) { + h1 { + font-size: 2.2rem; + } + + p { + font-size: 1rem; + line-height: 1.5rem; + } + + .userColumn { + padding-bottom: 42px; + padding-top: 10%; + } + + .contactDiv { + padding: 12px 20px; + } +} \ No newline at end of file