diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d5413b3 Binary files /dev/null and b/.DS_Store differ diff --git a/template/.DS_Store b/template/.DS_Store new file mode 100644 index 0000000..dfae22a Binary files /dev/null and b/template/.DS_Store differ 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