diff --git a/public/css/style.css b/public/css/style.css index af05ba4..170334e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,30 +1,30 @@ @import url("https://fonts.googleapis.com/css?family=Great+Vibes"); ::-webkit-scrollbar { - width: 10px; + width: 10px; } ::-webkit-scrollbar-track { - background-image: linear-gradient(to top, #bdc3c7, #2c3e50) + background-image: linear-gradient(to top, #bdc3c7, #2c3e50); } ::-webkit-scrollbar-thumb { - background-image: linear-gradient(#8e9eab, #eef2f3); - /*(#0f2027, #203a43, #2c5364*/ - /*(#c6ffdd, #fbd786, #f7797d*/ + background-image: linear-gradient(#8e9eab, #eef2f3); + /*(#0f2027, #203a43, #2c5364*/ + /*(#c6ffdd, #fbd786, #f7797d*/ } ::-webkit-scrollbar-thumb:hover { - background: #555; + background: #555; } * { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } html { - height: 100%; + height: 100%; } .preload * { @@ -35,80 +35,79 @@ html { } body { - cursor: default; - overflow-x: hidden; + cursor: default; + overflow-x: hidden; } @font-face { - font-family: gothamBold; - src: url("fonts/Gotham-Bold.otf"); + font-family: gothamBold; + src: url("fonts/Gotham-Bold.otf"); } @font-face { - font-family: sansThin; - src: url("fonts/Sans-Thin.otf"); + font-family: sansThin; + src: url("fonts/Sans-Thin.otf"); } @font-face { - font-family: futuraLight; - src: url("fonts/futura-pt-light.otf"); + font-family: futuraLight; + src: url("fonts/futura-pt-light.otf"); } header { - background-color: #000; - margin: 0 0; - text-align: center; + background-color: #000; + margin: 0 0; + text-align: center; } nav { - transform: translateY(-70px); - color: #0d0d0d; - animation: nav-wipe 0.75s ease-in-out forwards; - animation-delay: 5s; + transform: translateY(-70px); + color: #0d0d0d; + animation: nav-wipe 0.75s ease-in-out forwards; + animation-delay: 5s; } @keyframes nav-wipe { - 0% { - transform: translateY(-70px); - } + 0% { + transform: translateY(-70px); + } - 100% { - transform: translateY(0px); - } + 100% { + transform: translateY(0px); + } } nav li { - list-style: none; - display: inline-block; - margin: 20px 60px; - background: #000; - border-color: #000; + list-style: none; + display: inline-block; + margin: 20px 60px; + background: #000; + border-color: #000; } nav a { - color: #FFFFFF; - background: #000; - text-decoration: none; - text-transform: uppercase; - font-family: sansThin; - letter-spacing: 1px; - font-weight: 500; - font-size: 150%; - cursor: pointer; - text-align: center; - padding: 8px; - outline: 1px solid #000; - transition: outline 2s; - -webkit-transition: outline 2s; - + color: #ffffff; + background: #000; + text-decoration: none; + text-transform: uppercase; + font-family: sansThin; + letter-spacing: 1px; + font-weight: 500; + font-size: 150%; + cursor: pointer; + text-align: center; + padding: 8px; + outline: 1px solid #000; + transition: outline 2s; + -webkit-transition: outline 2s; } nav a:hover { - outline: 1px solid #fff; + outline: 1px solid #fff; } .bottom-padding { - padding-bottom: 20px + padding-bottom: 20px; } .menu-container { @@ -116,7 +115,9 @@ nav a:hover { cursor: pointer; } -.bar1, .bar2, .bar3 { +.bar1, +.bar2, +.bar3 { width: 35px; height: 5px; background-color: #fff; @@ -133,7 +134,9 @@ nav a:hover { transform: rotate(-45deg) translate(-9px, 6px); } -.change .bar2 {opacity: 0;} +.change .bar2 { + opacity: 0; +} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); @@ -141,478 +144,521 @@ nav a:hover { } .divider { - color: #000; - font-size: 200%; - position: fixed; - bottom: 2px; - right: -75px; - display: inline-block; + color: #000; + font-size: 200%; + position: fixed; + bottom: 2px; + right: -75px; + display: inline-block; } #landing-section { - padding: 0; - background-image: url(res/header-background.jpg); - background-attachment: fixed; - background-size: cover; - position: relative; + padding: 0; + background-image: url(res/header-background.jpg); + background-attachment: fixed; + background-size: cover; + position: relative; } .FrontPageHeaderText { - color: #1ED760; - font-family: gothamBold; - font-size: 200%; - padding: 12px; - + color: #1ed760; + font-family: gothamBold; + font-size: 200%; + padding: 12px; } @keyframes wipe-right { - 0% { - transform: translateX(-400px); - } + 0% { + transform: translateX(-400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @-webkit-keyframes wipe-right { - 0% { - transform: translateX(-400px); - } + 0% { + transform: translateX(-400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @keyframes wipe-left { - 0% { - transform: translateX(400px); - } + 0% { + transform: translateX(400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } @-webkit-keyframes wipe-left { - 0% { - transform: translateX(400px); - } + 0% { + transform: translateX(400px); + } - 100% { - transform: translateX(0px); - } + 100% { + transform: translateX(0px); + } } - #TopLeftHeader { - animation: wipe-right 1s forwards; - animation-delay: 4s; - transition-delay: 4s; - transform: translateX(-400px); - overflow: hidden; + animation: wipe-right 1s forwards; + animation-delay: 4s; + transition-delay: 4s; + transform: translateX(-400px); + overflow: hidden; } #BottomRightHeader { - position: absolute; - right: 0; - bottom: 0; - text-align: right; - transform: translateX(400px); - animation: wipe-left 1s forwards; - animation-delay: 4s; - + position: absolute; + right: 0; + bottom: 0; + text-align: right; + transform: translateX(400px); + animation: wipe-left 1s forwards; + animation-delay: 4s; } #headerTitleText { - margin: 0; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 300%; - - animation: cursor-blink 0.5s infinite alternate, typing-anim 3s steps(14); - overflow: hidden; - white-space: nowrap; - border-right: 3px solid #1ED760; + margin: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 300%; + + animation: cursor-blink 0.5s infinite alternate, typing-anim 3s steps(14); + overflow: hidden; + white-space: nowrap; + border-right: 3px solid #1ed760; } @keyframes typing-anim { - from { - width: 0px; - } + from { + width: 0px; + } - to { - width: 350px; - } + to { + width: 350px; + } } @-webkit-keyframes typing-anim { - from { - width: 0ch; - } + from { + width: 0ch; + } - to { - width: 14ch; - } + to { + width: 14ch; + } } @-webkit-keyframes typing-anim { - from { - width: 0ch; - } + from { + width: 0ch; + } - to { - width: 14ch; - } + to { + width: 14ch; + } } @-webkit-keyframes cursor-blink { - from { - border-color: transparent; - } + from { + border-color: transparent; + } - to { - border-color: #1ED760; - } + to { + border-color: #1ed760; + } } #titleToQuote { - border: 2px solid #000; - background-color: transparent; - color: #000; - padding: 14px 28px; - font-size: 16px; - font-family: gothamBold; - cursor: pointer; - border-color: #1ED760; - color: #1ED760; - border-radius: 50px; - position: absolute; - top: 60%; - left: 50%; - transform: translate(-50%, -50%); + border: 2px solid #000; + background-color: transparent; + color: #000; + padding: 14px 28px; + font-size: 16px; + font-family: gothamBold; + cursor: pointer; + border-color: #1ed760; + color: #1ed760; + border-radius: 50px; + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); } #titleToQuote a { - text-decoration: none; - color: #1ED760 + text-decoration: none; + color: #1ed760; } .body-sections { - height: 100vh; - overflow-x: hidden; + height: 100vh; + overflow-x: hidden; } .navbarLogo { - font-family: courier; - padding: 8px; - color: #fff; - display: inline-block; - border: 2px solid #fff; - margin-top: 8px; - cursor: default; + font-family: courier; + padding: 8px; + color: #fff; + display: inline-block; + border: 2px solid #fff; + margin-top: 8px; + cursor: default; } - - #aboutMeQuote { - font-family: 'Great Vibes', cursive; - height: 50%; - font-weight: 10; - font-size: 500%; - margin: 0; - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - clear: both; - - + font-family: "Great Vibes", cursive; + height: 50%; + font-weight: 10; + font-size: 500%; + margin: 0; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + clear: both; } #quoteByline { - color: #ff1493; - font-size: 50%; - font-family: sansThin; - font-size: 10; - + color: #ff1493; + font-size: 50%; + font-family: sansThin; + font-size: 10; } .relativePos { - position: relative; + position: relative; } .quoteToAbout { - width: 100%; - padding-top: 10px; - margin: 0 auto; - text-align: center; - cursor: pointer; + width: 100%; + padding-top: 10px; + margin: 0 auto; + text-align: center; + cursor: pointer; } .quoteToAbout:after { - content: ""; - width: 40px; - height: 40px; - display: inline; - margin: auto; - position: absolute; - border-right: 1px solid #000; - border-bottom: 1px solid #000; + content: ""; + width: 40px; + height: 40px; + display: inline; + margin: auto; + position: absolute; + border-right: 1px solid #000; + border-bottom: 1px solid #000; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-animation: 3s arrow infinite ease; - animation: 3s arrow infinite ease; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-animation: 3s arrow infinite ease; + animation: 3s arrow infinite ease; } @-webkit-keyframes arrow { + 0%, + 100% { + top: 50px; + } - 0%, - 100% { - top: 50px; - } - - 50% { - top: 80px; - } + 50% { + top: 80px; + } } @keyframes arrow { + 0%, + 100% { + top: 50px; + } - 0%, - 100% { - top: 50px; - } - - 50% { - top: 80px; - } + 50% { + top: 80px; + } } #about-section { - background-color: #F7CAD5; - color: #1a1a1a; - height: 100%; + background-color: #f7cad5; + color: #1a1a1a; + height: 100%; } #about-header { - font-family: sansThin; - position: relative; - font-size: 300%; - padding-top: 30px; - padding-bottom: 30px; - height: 10px; - text-align: center; - font-weight: lighter; - + font-family: sansThin; + position: relative; + font-size: 300%; + padding-top: 30px; + padding-bottom: 30px; + height: 10px; + text-align: center; + font-weight: lighter; } #about-header span { - position: relative; - display: block; - width: 40px; - height: 2px; - background: #1a1a1a; - left: 40%; - transform: translate(50%, 0%); - transition: left 2s; + position: relative; + display: block; + width: 40px; + height: 2px; + background: #1a1a1a; + left: 40%; + transform: translate(50%, 0%); + transition: left 2s; } #about-header:hover span { - left: 55%; + left: 55%; } #about-subheader { - font-family: sansThin; - height: 20px; - width: 100%; - text-align: center; - padding: 16px; - + font-family: sansThin; + height: 20px; + width: 100%; + text-align: center; + padding: 16px; } #about-row { - display: flex; - justify-content: center; - text-align: justify; - align-items: center; - font-family: futuraLight, Helvetica, Arial, sans-serif; - margin: 0px; - overflow-x: hidden; + display: flex; + justify-content: center; + text-align: justify; + align-items: center; + font-family: futuraLight, Helvetica, Arial, sans-serif; + margin: 0px; + overflow-x: hidden; } #about-row > div { - padding-left: 25px; - padding-right: 25px; - padding-top: 20px; - width: 450px; - height: 600px; - position: relative; + padding-left: 25px; + padding-right: 25px; + padding-top: 20px; + width: 450px; + height: 600px; + position: relative; } #first-letter { - font-size: 40px; - border: .5px #000 solid; + font-size: 40px; + border: 0.5px #000 solid; } #secret-link { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } .about-link { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } .about-link:hover { - text-decoration: underline; + text-decoration: underline; } #secret-link:hover { - cursor: pointer; + cursor: pointer; } - #photo-column { - border: 2px solid #000; - padding: 20px; - transition: border .5s; + border: 2px solid #000; + padding: 20px; + transition: border 0.5s; } #photo-column:hover { - border: 4px solid #000; + border: 4px solid #000; } #text-column1 { - border-right: 1px solid #000; + border-right: 1px solid #000; } #contact-section { - margin-left: 200px; - background-color: #fdfd96; - margin-right: 200px; + margin-left: 200px; + background-color: #fdfd96; + margin-right: 200px; } #hr-contact { - margin-top: 4rem; - margin-bottom: 6rem; - - border-width: 0; - border-top: 2px solid #000; - width: 40px; - text-align: left; + margin-top: 4rem; + margin-bottom: 6rem; + border-width: 0; + border-top: 2px solid #000; + width: 40px; + text-align: left; } #contact-link { - font-family: sansThin; - font-size: 250%; - letter-spacing: 1.5px; - margin-bottom: 12rem; + font-family: sansThin; + font-size: 250%; + letter-spacing: 1.5px; + margin-bottom: 12rem; } #about-signature { - font-size: 20px; - font-family: monospace; - text-transform: lowercase; - font-weight: 100; - padding: 5px; + font-size: 20px; + font-family: monospace; + text-transform: lowercase; + font-weight: 100; + padding: 5px; } footer { - height: 200px; - background-color: #414141; - padding-left: 200px; - padding-right: 200px; + height: 200px; + background-color: #414141; + padding-left: 200px; + padding-right: 200px; } #hr-footer { - margin-top: 3rem; - margin-bottom: 3rem; - background-color: pink; + margin-top: 3rem; + margin-bottom: 3rem; + background-color: pink; } .icons { - display: block; - top: -50%; - transform: translateY(-50%); - width: 50px; - height: 50px; - background-size: 50px 50px; - margin-right: 20px; - float: left; + display: block; + top: -50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background-size: 50px 50px; + margin-right: 20px; + float: left; } .copyright { - color: #E5E5E5; - font-family: futuraLight; + color: #e5e5e5; + font-family: futuraLight; } #footer-name-link { - color: inherit; - text-decoration: none; - transition: color .5s; + color: inherit; + text-decoration: none; + transition: color 0.5s; } #footer-name-link:hover { - color: #F7CAD5; + color: #f7cad5; } .toggle { - width: 100%; - padding: 10px 20px; - background: inherit; - text-align: right; - box-sizing: border-box; - color: #fff; - font-size: 30px; - display: none; + width: 100%; + padding: 10px 20px; + background: inherit; + text-align: right; + box-sizing: border-box; + color: #fff; + font-size: 30px; + display: none; } .toggle .navbarLogo { - position: absolute; - left: 50%; - transform: translateX(-50%); - margin: auto auto; - margin: 0 auto; - font-size: 75%; + position: absolute; + left: 50%; + transform: translateX(-50%); + margin: auto auto; + margin: 0 auto; + font-size: 75%; } @media (max-width: 1250px) { - .toggle { - display: block; - } + .toggle { + display: block; + } - ul { - width: 100%; - display: none; - } + ul { + width: 100%; + display: none; + } - ul li { - display: block; - text-align: center; - } + ul li { + display: block; + text-align: center; + } - ul a + ul a .navbar-bot { + margin-bottom: 0px; + } - .navbar-bot { - margin-bottom: 0px; - } + ul .navbarLogo { + display: none; + } - ul .navbarLogo { - display: none; - } + .active { + display: block; + } - .active { - display: block; - } + #photo-column { + display: none; + } - #photo-column { - display: none; - } + #aboutMeQuote { + font-size: 350%; + } + + #about-subheader { + margin-bottom: 20px; + } + + #about-row { + text-align: left; + } + + #contact-section { + margin-left: 20%; + background-color: inherit; + } + + #contact-section hr { + margin-bottom: 20%; + } + + footer { + height: 200px; + background-color: #414141; + padding: 5px; + } + + #hr-footer { + margin: 0; + display: none; + } + + .icons { + display: block; + top: -50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + background-size: 50px 50px; + margin-top: 50px; + margin-right: 20px; + float: left; + } + + .copyright { + color: #e5e5e5; + font-family: futuraLight; + } + + #footer-name-link { + color: inherit; + text-decoration: none; + transition: color 0.5s; + } + + #footer-name-link:hover { + color: #f7cad5; + } } diff --git a/public/index.html b/public/index.html index d45bc55..1538e00 100644 --- a/public/index.html +++ b/public/index.html @@ -1,113 +1,249 @@ +
+ + + - - - - + + + + + + + + + +