mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-21 11:40:17 -04:00
about page
This commit is contained in:
William Zhang
parent
66ea1bf89e
commit
29219706c7
132
about.html
Normal file
132
about.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="" name="description">
|
||||
<meta content="William Zhang" name="author">
|
||||
<meta name="theme-color" content="#1976D2" />
|
||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
|
||||
<link href="icons/favicon.ico" rel="icon" type="image/ico">
|
||||
<link href="css/header.css" rel="stylesheet" />
|
||||
<link href="css/main.css" rel="stylesheet" />
|
||||
<link href="css/footer.css" rel="stylesheet" />
|
||||
<link href="css/about.css" rel="stylesheet" />
|
||||
<link href="css/responsive.css" rel="stylesheet" />
|
||||
<title>Home - TJSGA</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="banner">
|
||||
<button id="menu-toggle" class="fluid">
|
||||
<i></i>
|
||||
</button>
|
||||
<h1>TJ STUDENT GOVERNMENT ASSOCIATION</h1>
|
||||
</div>
|
||||
<nav id="menu" class="fluid">
|
||||
<a class="menu-item" href="index.html">
|
||||
<button class="menu-item fluid">Home</button>
|
||||
</a>
|
||||
<a class="menu-item" href="about.html">
|
||||
<button class="menu-item fluid">About</button>
|
||||
</a>
|
||||
<a class="menu-item" href="forms.html">
|
||||
<button class="menu-item fluid">Forms</button>
|
||||
</a>
|
||||
<a class="menu-item" href="links.html">
|
||||
<button class="menu-item fluid">Links</button>
|
||||
</a>
|
||||
</nav>
|
||||
<div id="dome">
|
||||
</div>
|
||||
</header>
|
||||
<div id="wrapper" class="fluid">
|
||||
<section id="officers">
|
||||
<h2>SGA Officers</h2>
|
||||
<div class="officers-intro">
|
||||
<div class="officers-image">
|
||||
</div>
|
||||
<div class="officers-text">
|
||||
<span>Nick Begotka '18</span>
|
||||
<p>
|
||||
Welcome to Thomas Jefferson High School for Science and Technology's school-wide Student Government
|
||||
Association's new home on the web! As you know, TJ is going through some very exciting times, and
|
||||
we want you to be a part of it with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="officers-intro">
|
||||
<div class="officers-image">
|
||||
</div>
|
||||
<div class="officers-text">
|
||||
<span>Nick Begotka '18</span>
|
||||
<p>
|
||||
Welcome to Thomas Jefferson High School for Science and Technology's school-wide Student Government
|
||||
Association's new home on the web! As you know, TJ is going through some very exciting times, and
|
||||
we want you to be a part of it with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="officers-intro">
|
||||
<div class="officers-image">
|
||||
</div>
|
||||
<div class="officers-text">
|
||||
<span>Nick Begotka '18</span>
|
||||
<p>
|
||||
Welcome to Thomas Jefferson High School for Science and Technology's school-wide Student Government
|
||||
Association's new home on the web! As you know, TJ is going through some very exciting times, and
|
||||
we want you to be a part of it with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="officers-intro">
|
||||
<div class="officers-image">
|
||||
</div>
|
||||
<div class="officers-text">
|
||||
<span>Nick Begotka '18</span>
|
||||
<p>
|
||||
Welcome to Thomas Jefferson High School for Science and Technology's school-wide Student Government
|
||||
Association's new home on the web! As you know, TJ is going through some very exciting times, and
|
||||
we want you to be a part of it with us.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section id="excomm">
|
||||
<h2>SGA Executive Committee</h2>
|
||||
<div id="excomm-text">
|
||||
The Executive Committee (ExComm) is a integral sub-group of the SGA. Its members act as representatives of the student body. The members work with the officers to organize events and activities throughout to year. While several ExComm positions may have more specific roles, all are working towards the goals of the SGA. Applications to be on ExComm are released every June after Class Council elections have been completed.
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<section id="senators">
|
||||
</section>
|
||||
<hr />
|
||||
<section id="sponsors">
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<span>© 2017 TJSGA</span>
|
||||
<a href="https://facebook.com/tjsga" target="_blank">
|
||||
<button class="social" id="fb">
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://twitter.com/tjSGA" target="_blank">
|
||||
<button class="social" id="tw">
|
||||
</button>
|
||||
</a>
|
||||
<a href="https://facebook.com/tjsga" target="_blank">
|
||||
<button class="social" id="flickr">
|
||||
</button>
|
||||
</a>
|
||||
<a href="mailto:sga.tjhsst@gmail.com" target="_blank">
|
||||
<button class="social" id="mail">
|
||||
</button>
|
||||
</a>
|
||||
</footer>
|
||||
<script src="js/sidebar.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
51
css/about.css
Normal file
51
css/about.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.officers-image {
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.officers-image:after {
|
||||
width: 20vh;
|
||||
height: 20vh;
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
left: calc(50% - 10vh);
|
||||
background-image: url('../img/profile.jpg');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.officers-text {
|
||||
font-size: 1.2em;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.officers-text > span {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.officers-intro {
|
||||
text-align: center;
|
||||
width: calc(50% - 8vw);
|
||||
margin: 2vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
#excomm-text {
|
||||
width: 100%;
|
||||
margin: 2vw;
|
||||
}
|
||||
|
||||
#officers, #excomm {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#officers > h2, #excomm > h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -154,14 +154,7 @@ section {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#about {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
#updates {
|
||||
#intro, #updates, #officers {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,12 @@
|
|||
section {
|
||||
max-width: 750px;
|
||||
}
|
||||
.officers-intro {
|
||||
width: 90vw;
|
||||
}
|
||||
.offiers-image {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1100px) {
|
||||
|
|
|
|||
BIN
img/profile.jpg
Normal file
BIN
img/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -42,7 +42,7 @@
|
|||
</header>
|
||||
<div id="wrapper" class="fluid">
|
||||
|
||||
<section id="about">
|
||||
<section id="intro">
|
||||
<div id="intro-text" class="fluid">
|
||||
<h2 id="intro-title">Welcome!</h2>
|
||||
<div id="logo">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
var mb = document.querySelector("#menu-toggle"),
|
||||
sb = document.querySelector("nav#menu"),
|
||||
tb = document.querySelector("#banner h1"),
|
||||
dm = document.querySelector("#dome"),
|
||||
wr = document.querySelector("#wrapper");
|
||||
|
||||
mb.addEventListener("click", function () {
|
||||
|
|
@ -12,6 +13,9 @@ wr.addEventListener("click", function () {
|
|||
tb.addEventListener("click", function () {
|
||||
toggleSidebar(false)
|
||||
}, false);
|
||||
dm.addEventListener("click", function () {
|
||||
toggleSidebar(false)
|
||||
}, false);
|
||||
mb.addEventListener("touchleave", function () {
|
||||
toggleSidebar(true)
|
||||
}, false);
|
||||
|
|
@ -21,6 +25,9 @@ wr.addEventListener("touchleave", function () {
|
|||
tb.addEventListener("touchleave", function () {
|
||||
toggleSidebar(false)
|
||||
}, false);
|
||||
dm.addEventListener("touchleave", function () {
|
||||
toggleSidebar(false)
|
||||
}, false);
|
||||
sb.style.disabled = true;
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user