mirror of
https://github.com/Rushilwiz/tjld.git
synced 2025-04-09 15:00:17 -04:00
feat: added landing and mobile for nav
This commit is contained in:
parent
4cb138d3ab
commit
65201aaa9d
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
*.map
|
||||
.vscode/*
|
||||
147
css/base.css
Normal file
147
css/base.css
Normal file
|
|
@ -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 */
|
||||
126
css/base.sass
Normal file
126
css/base.sass
Normal file
|
|
@ -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
|
||||
224
css/index.css
Normal file
224
css/index.css
Normal file
|
|
@ -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 */
|
||||
63
css/index.sass
Normal file
63
css/index.sass
Normal file
|
|
@ -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%
|
||||
189
css/officers.css
Normal file
189
css/officers.css
Normal file
|
|
@ -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 */
|
||||
27
css/officers.sass
Normal file
27
css/officers.sass
Normal file
|
|
@ -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
|
||||
BIN
css/res/lincoln-mobile.png
Normal file
BIN
css/res/lincoln-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
css/res/lincoln-trans.png
Normal file
BIN
css/res/lincoln-trans.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
css/res/lincoln.png
Normal file
BIN
css/res/lincoln.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
10
favicon.svg
Normal file
10
favicon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="86px" height="70px" viewBox="0 0 86 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g stroke="#ffffff" stroke-width="6">
|
||||
<circle cx="43" cy="35" r="29"></circle>
|
||||
<path d="M43,6 L43,64"></path>
|
||||
<path d="M43,61 L77,6 L9,6 L43,61 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 499 B |
44
index.html
Normal file
44
index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TJLD</title>
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="brand">
|
||||
<a class="logo" href="#">
|
||||
<img src="favicon.svg" />
|
||||
<span><i>tj</i>LD</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">What is LD?</a></li>
|
||||
<li><a href="/officers.html">Meet the Officers</a></li>
|
||||
<li><a href="#">Tournaments</a></li>
|
||||
<li class="login"><a href="#">Login</a></li>
|
||||
</ul>
|
||||
<div class="burger">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="hero-wrapper">
|
||||
<section class="hero">
|
||||
<div id="hero">
|
||||
<h1>Lincoln<br />Douglas<br />Debate</h1>
|
||||
<h2><span id="hero-subtitle"></span></h2>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script src="js/base.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
js/base.js
Normal file
11
js/base.js
Normal file
|
|
@ -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();
|
||||
15
js/index.js
Normal file
15
js/index.js
Normal file
|
|
@ -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);
|
||||
0
js/officers.js
Normal file
0
js/officers.js
Normal file
44
officers.html
Normal file
44
officers.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TJLD | Officers</title>
|
||||
<link rel="stylesheet" href="css/officers.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="brand">
|
||||
<a class="logo" href="#">
|
||||
<img src="favicon.svg" />
|
||||
<span><i>tj</i>LD</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">What is LD?</a></li>
|
||||
<li><a href="/officers.html">Meet the Officers</a></li>
|
||||
<li><a href="#">Tournaments</a></li>
|
||||
<li class="login"><a href="#">Login</a></li>
|
||||
</ul>
|
||||
<div class="burger">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<section class="officers">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div>Some Text in Column One</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div>Some Text in Column Two</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script src="base.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user