diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5939b68 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.map +.vscode/* diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..7ee5a5c --- /dev/null +++ b/css/base.css @@ -0,0 +1,147 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap"); +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + pointer-events: none; + overflow-x: hidden; +} + +a { + pointer-events: auto; +} + +.burger { + pointer-events: auto; + cursor: pointer; +} + +header nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 8vh; + color: #fff; + background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%); + font-family: 'Playfair Display', serif; +} + +header nav .brand a { + font-size: 3em; + color: white; + text-decoration: none; +} + +header nav .brand a i { + padding-right: 10; +} + +header nav .brand a img { + height: 6vh; + margin: auto 0; +} + +header nav ul { + list-style-type: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + width: 50%; + font-family: "Poppins", sans-serif; + font-weight: 400; + text-transform: uppercase; + overflow: hidden; +} + +header nav ul li { + padding: 5px 10px; +} + +header nav ul li a { + color: #000; + text-decoration: none; +} + +header nav ul .login { + padding: 4px 5px; + border: 2px solid black; +} + +header nav .burger { + display: none; +} + +header nav .burger div { + width: 25px; + height: 3px; + background-color: #333; + margin: 5px; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +@media (max-width: 1100px) { + header nav { + background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%); + } + header ul { + z-index: 1; + -webkit-transform: translatex(100%); + transform: translatex(100%); + position: absolute; + right: 0%; + top: 8vh; + height: 50vh; + width: 100% !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #333; + -webkit-transition: -webkit-transform 0.5s ease-in; + transition: -webkit-transform 0.5s ease-in; + transition: transform 0.5s ease-in; + transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; + } + header ul li a { + color: #fff !important; + font-size: 1.5em; + } + header ul .login { + border: none !important; + } + header .burger { + display: block !important; + } + header .burger.toggle .line1 { + -webkit-transform: rotate(-45deg) translate(-5px, 6px); + transform: rotate(-45deg) translate(-5px, 6px); + } + header .burger.toggle .line2 { + opacity: 0; + } + header .burger.toggle .line3 { + -webkit-transform: rotate(45deg) translate(-5px, -6px); + transform: rotate(45deg) translate(-5px, -6px); + } +} + +.nav-active { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +/*# sourceMappingURL=base.css.map */ \ No newline at end of file diff --git a/css/base.sass b/css/base.sass new file mode 100644 index 0000000..6c4bd41 --- /dev/null +++ b/css/base.sass @@ -0,0 +1,126 @@ +// fonts +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap'); +$title-stack: 'Poppins', sans-serif +$subtitle-stack: 'Playfair Display', serif + +// colors +$dark: #333 +$light: #fff + + +// mobile +$mobile-width: 1100px + +@mixin mobile + @media (max-width: #{$mobile-width}) + @content + +* + margin: 0 + padding: 0 + box-sizing: border-box + pointer-events: none + overflow-x: hidden + +a + pointer-events: auto + +.burger + pointer-events: auto + cursor: pointer + +header + nav + display: flex + justify-content: space-around + align-items: center + min-height: 8vh + color: #fff + background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.000001%, #fff 100%) + font-family: 'Playfair Display', serif + + .brand a + font-size: 3em + color: white + text-decoration: none + + i + padding-right: 10 + + img + height: 6vh + margin: auto 0 + + ul + list-style-type: none + display: flex + justify-content: space-around + width: 50% + font-family: $title-stack + font-weight: 400 + text-transform: uppercase + overflow: hidden + + li + padding: 5px 10px + + a + color: #000 + text-decoration: none + + .login + padding: 4px 5px + border: 2px solid black + + .burger + display: none + + div + width: 25px + height: 3px + background-color: $dark + margin: 5px + + transition: all 0.3s ease + + @include mobile + nav + background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.000001%, #fff 100%) + + ul + z-index: 1 + transform: translatex(100%) + position: absolute + right: 0% + top: 8vh + height: 50vh + width: 100% !important + display: flex + flex-direction: column + align-items: center + background-color: $dark + transition: transform 0.5s ease-in + + li + a + color: $light !important + font-size: 1.5em + + .login + border: none !important + + .burger + display: block !important + + &.toggle + .line1 + transform: rotate(-45deg) translate(-5px, 6px) + + .line2 + opacity: 0 + + .line3 + transform: rotate(45deg) translate(-5px, -6px) + +.nav-active + transform: translateX(0%) !important \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..e122d85 --- /dev/null +++ b/css/index.css @@ -0,0 +1,224 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap"); +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + pointer-events: none; + overflow: hidden !important; +} + +a { + pointer-events: auto; +} + +.burger { + pointer-events: auto; + cursor: pointer; +} + +header nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 8vh; + color: #fff; + background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%); + font-family: 'Playfair Display', serif; +} + +header nav .brand a { + font-size: 3em; + color: white; + text-decoration: none; +} + +header nav .brand a i { + padding-right: 10; +} + +header nav .brand a img { + height: 6vh; + margin: auto 0; +} + +header nav ul { + list-style-type: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + width: 50%; + font-family: "Poppins", sans-serif; + font-weight: 400; + text-transform: uppercase; + overflow: hidden; +} + +header nav ul li { + padding: 5px 10px; +} + +header nav ul li a { + color: #000; + text-decoration: none; +} + +header nav ul .login { + padding: 4px 5px; + border: 2px solid black; +} + +header nav .burger { + display: none; +} + +header nav .burger div { + width: 25px; + height: 3px; + background-color: #333; + margin: 5px; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +@media (max-width: 1100px) { + header nav { + background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%); + } + header ul { + z-index: 1; + -webkit-transform: translatex(100%); + transform: translatex(100%); + position: absolute; + right: 0%; + top: 8vh; + height: 50vh; + width: 100% !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #333; + -webkit-transition: -webkit-transform 0.5s ease-in; + transition: -webkit-transform 0.5s ease-in; + transition: transform 0.5s ease-in; + transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; + } + header ul li a { + color: #fff !important; + font-size: 1.5em; + } + header ul .login { + border: none !important; + } + header .burger { + display: block !important; + } + header .burger.toggle .line1 { + -webkit-transform: rotate(-45deg) translate(-5px, 6px); + transform: rotate(-45deg) translate(-5px, 6px); + } + header .burger.toggle .line2 { + opacity: 0; + } + header .burger.toggle .line3 { + -webkit-transform: rotate(45deg) translate(-5px, -6px); + transform: rotate(45deg) translate(-5px, -6px); + } +} + +.nav-active { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} + +.hero-wrapper { + color: #fff; + position: relative; + width: 100vw; + height: 100vh; + background-image: -webkit-gradient(linear, right top, left top, from(#090B08), color-stop(50%), color-stop(#f0eddf), color-stop(75%), to(#fff)); + background-image: linear-gradient(to left, #090B08, 50%, #f0eddf, 75%, #fff); +} + +@media (max-width: 1100px) { + .hero-wrapper { + background: none; + } +} + +.hero { + height: 100%; + width: 100%; + background-size: 55em; + background-repeat: no-repeat; + background-position: 100% 50%; + background-image: url("/css/res/lincoln-trans.png"); +} + +@media (max-width: 1100px) { + .hero { + background-size: 120%; + background-repeat: no-repeat; + background-position: 50% 0%; + background-image: url("/css/res/lincoln-mobile.png"); + } +} + +#hero { + position: absolute; + top: 10%; + left: 5%; +} + +#hero h1 { + font-family: "Poppins", sans-serif; + text-align: left; + font-size: 6em; + line-height: 1.2em; + color: #333; + overflow: hidden; +} + +#hero h2 { + font-family: "Playfair Display", serif; + text-align: left; + font-size: 2em; + line-height: 1.2em; + color: #333; + overflow: hidden; +} + +@media (max-width: 1100px) { + #hero { + top: 55%; + } + #hero h1 { + color: #fff; + font-size: 4em; + } + #hero h2 { + color: #fff; + } +} + +.introduction { + color: #fff; + position: relative; + width: 100%; + height: 100%; +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/css/index.sass b/css/index.sass new file mode 100644 index 0000000..3019cda --- /dev/null +++ b/css/index.sass @@ -0,0 +1,63 @@ +@import "base" + +.hero-wrapper + color: $light + position: relative + width: 100vw + height: 100vh + background-image: linear-gradient(to left, #090B08, 50%, #f0eddf, 75%, #fff) + @include mobile + background: none + +.hero + height: 100% + width: 100% + background-size: 55em + background-repeat: no-repeat + background-position: 100% 50% + background-image: url("/css/res/lincoln-trans.png") + + @include mobile + background-size: 120% + background-repeat: no-repeat + background-position: 50% 0% + background-image: url("/css/res/lincoln-mobile.png") + +#hero + position: absolute + top: 10% + left: 5% + + h1 + font-family: $title-stack + text-align: left + font-size: 6em + line-height: 1.2em + color: $dark + overflow: hidden + + h2 + font-family: $subtitle-stack + text-align: left + font-size: 2em + line-height: 1.2em + color: $dark + overflow: hidden + + @include mobile + top: 55% + + h1 + color: $light + font-size: 4em + + h2 + color: $light + + + +.introduction + color: $light + position: relative + width: 100% + height: 100% \ No newline at end of file diff --git a/css/officers.css b/css/officers.css new file mode 100644 index 0000000..aed906e --- /dev/null +++ b/css/officers.css @@ -0,0 +1,189 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap"); +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + pointer-events: none; + overflow-x: hidden; +} + +a { + pointer-events: auto; +} + +.burger { + pointer-events: auto; + cursor: pointer; +} + +header nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 8vh; + color: #fff; + background: linear-gradient(135deg, #000 0%, #000 40%, #fff 40.0%, #fff 100%); + font-family: 'Playfair Display', serif; +} + +header nav .brand a { + font-size: 3em; + color: white; + text-decoration: none; +} + +header nav .brand a i { + padding-right: 10; +} + +header nav .brand a img { + height: 6vh; + margin: auto 0; +} + +header nav ul { + list-style-type: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + width: 50%; + font-family: "Poppins", sans-serif; + font-weight: 400; + text-transform: uppercase; + overflow: hidden; +} + +header nav ul li { + padding: 5px 10px; +} + +header nav ul li a { + color: #000; + text-decoration: none; +} + +header nav ul .login { + padding: 4px 5px; + border: 2px solid black; +} + +header nav .burger { + display: none; +} + +header nav .burger div { + width: 25px; + height: 3px; + background-color: #333; + margin: 5px; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +@media (max-width: 1100px) { + header nav { + background: linear-gradient(135deg, #000 0%, #000 65%, #fff 65.0%, #fff 100%); + } + header ul { + z-index: 1; + -webkit-transform: translatex(100%); + transform: translatex(100%); + position: absolute; + right: 0%; + top: 8vh; + height: 50vh; + width: 100% !important; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #333; + -webkit-transition: -webkit-transform 0.5s ease-in; + transition: -webkit-transform 0.5s ease-in; + transition: transform 0.5s ease-in; + transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; + } + header ul li a { + color: #fff !important; + font-size: 1.5em; + } + header ul .login { + border: none !important; + } + header .burger { + display: block !important; + } + header .burger.toggle .line1 { + -webkit-transform: rotate(-45deg) translate(-5px, 6px); + transform: rotate(-45deg) translate(-5px, 6px); + } + header .burger.toggle .line2 { + opacity: 0; + } + header .burger.toggle .line3 { + -webkit-transform: rotate(45deg) translate(-5px, -6px); + transform: rotate(45deg) translate(-5px, -6px); + } +} + +.nav-active { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} + +.officers { + margin: 10vh 20vh; +} + +.row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; +} + +.column { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.blue-column { + background-color: blue; + height: 100px; +} + +.green-column { + background-color: green; + height: 100px; +} +/*# sourceMappingURL=officers.css.map */ \ No newline at end of file diff --git a/css/officers.sass b/css/officers.sass new file mode 100644 index 0000000..39bc0e2 --- /dev/null +++ b/css/officers.sass @@ -0,0 +1,27 @@ +@import "base" + +.officers + margin: 10vh 20vh + + +.row + display: flex + flex-direction: row + flex-wrap: wrap + width: 100% + +.column + display: flex + flex-direction: column + flex-basis: 100% + flex: 1 + + +.blue-column + background-color: blue + height: 100px + + +.green-column + background-color: green + height: 100px diff --git a/css/res/lincoln-mobile.png b/css/res/lincoln-mobile.png new file mode 100644 index 0000000..bdb6ee4 Binary files /dev/null and b/css/res/lincoln-mobile.png differ diff --git a/css/res/lincoln-trans.png b/css/res/lincoln-trans.png new file mode 100644 index 0000000..6836f9b Binary files /dev/null and b/css/res/lincoln-trans.png differ diff --git a/css/res/lincoln.png b/css/res/lincoln.png new file mode 100644 index 0000000..8f1a4ed Binary files /dev/null and b/css/res/lincoln.png differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..ca308e9 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..bb9ae5d --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + TJLD + + + +
+ +
+
+
+
+

Lincoln
Douglas
Debate

+

+
+
+
+ + + + + diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..140f2bd --- /dev/null +++ b/js/base.js @@ -0,0 +1,11 @@ +const nav = () => { + const burger = document.querySelector(".burger"); + const nav = document.querySelector("nav ul"); + + burger.addEventListener("click", () => { + nav.classList.toggle("nav-active"); + burger.classList.toggle("toggle"); + }); +}; + +nav(); diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..437bd5c --- /dev/null +++ b/js/index.js @@ -0,0 +1,15 @@ +var options = { + strings: [ + "every Friday 8A", + "at the #1 highschool in the nation", + "taught by TJ's brightest", + ], + typeSpeed: 40, + backSpeed: 20, + startDelay: 1000, + backDelay: 5000, + loop: true, + shuffle: true, +}; + +var typed = new Typed("#hero-subtitle", options); diff --git a/js/officers.js b/js/officers.js new file mode 100644 index 0000000..e69de29 diff --git a/officers.html b/officers.html new file mode 100644 index 0000000..544a39f --- /dev/null +++ b/officers.html @@ -0,0 +1,44 @@ + + + + + + + TJLD | Officers + + + +
+ +
+
+
+
+
Some Text in Column One
+
+
+
Some Text in Column Two
+
+
+
+ + +