mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-20 19:20:17 -04:00
added more stuff
This commit is contained in:
William Zhang
parent
8e621aedf6
commit
893b87f8fa
124
css/main.css
124
css/main.css
|
|
@ -20,6 +20,18 @@ html,body,div,span,button,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pr
|
|||
border: 0
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden; /*IMPORTANT TO CHANGE IF EXPANDING*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none
|
||||
}
|
||||
|
||||
.fluid {
|
||||
-webkit-transition: all .2s ease;
|
||||
-moz-transition: all .2s ease;
|
||||
|
|
@ -38,12 +50,13 @@ html,body,div,span,button,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pr
|
|||
|
||||
header {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
|
||||
/*height: calc(10vh + 50px);*/
|
||||
}
|
||||
|
||||
#banner {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
text-align: center;
|
||||
display: table;
|
||||
|
|
@ -52,23 +65,24 @@ header {
|
|||
#banner h1 {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 4vw;
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav#menu {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
box-shadow: 0 28px 79px 0 rgba(66,129,121,.27);
|
||||
}
|
||||
|
||||
#dome:before {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
width: 100vw;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
|
|
@ -80,19 +94,19 @@ nav#menu {
|
|||
|
||||
#dome {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
width: 100vw;
|
||||
color: #000;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 28px 79px 0 rgba(66,129,121,.27);
|
||||
|
||||
}
|
||||
|
||||
#dome:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
min-height: 280px;
|
||||
width: 100vw;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
|
|
@ -117,21 +131,26 @@ button.social {
|
|||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 6px;
|
||||
margin: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button.social#github {
|
||||
background: url('../icons/github.png');
|
||||
button.social#fb {
|
||||
background: url('../icons/fb.png');
|
||||
background-size: cover;
|
||||
}
|
||||
button.social#keybase {
|
||||
background: url('../icons/keybase.png');
|
||||
button.social#tw {
|
||||
background: url('../icons/tw.png');
|
||||
background-size: cover;
|
||||
}
|
||||
button.social#flickr {
|
||||
background: url('../icons/flickr.png');
|
||||
background-size: cover;
|
||||
background-color: #fff;
|
||||
}
|
||||
button.social#mail {
|
||||
background: url('../icons/mail.png');
|
||||
background-size: cover;
|
||||
}
|
||||
button.flip > i {
|
||||
height: 3vh;
|
||||
|
|
@ -201,18 +220,10 @@ span > a:active {
|
|||
color: #212121;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden; /*IMPORTANT TO CHANGE IF EXPANDING*/
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
height: calc(2.75em + 42px);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -223,56 +234,101 @@ footer {
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
footer > span {
|
||||
width: 100vw;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
#wrapper:before {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
top: 0vh;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#intro > h1 {
|
||||
#about {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
#updates {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 5% 0;
|
||||
}
|
||||
|
||||
section > h1 {
|
||||
font-size: 3.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#intro > h2 {
|
||||
section > h2 {
|
||||
width: calc(100% - 1em);
|
||||
font-size: 1.2em;
|
||||
padding: 0.5em 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#intro-text {
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#intro-image {
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#intro-image > img {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#tweets {
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
margin: 0 3em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#letter {
|
||||
width: calc(100% - 1em);
|
||||
padding: 0 0.5em;
|
||||
font-size: 1.2em;
|
||||
width: calc(100% - 2em);
|
||||
margin: 0 1em;
|
||||
font-size: 1.1em;
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#letter > p {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
/*@media (max-height: 300px) {
|
||||
#desc > span {
|
||||
width: calc(100% - 1em);
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
BIN
icons/fb.png
Normal file
BIN
icons/fb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
icons/flickr.png
Normal file
BIN
icons/flickr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
icons/mail.png
Normal file
BIN
icons/mail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
icons/tw.png
Normal file
BIN
icons/tw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
img/group.jpg
Normal file
BIN
img/group.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
50
index.html
50
index.html
|
|
@ -7,7 +7,7 @@
|
|||
<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="img/favicon.ico" rel="icon" type="image/ico">
|
||||
<link href="icons/favicon.ico" rel="icon" type="image/ico">
|
||||
<link href="css/main.css" rel="stylesheet" />
|
||||
<title>Home - TJSGA</title>
|
||||
</head>
|
||||
|
|
@ -35,24 +35,23 @@
|
|||
</div>
|
||||
</header>
|
||||
<div id="wrapper" class="fluid">
|
||||
<h2>Welcome!</h2>
|
||||
<section id="about">
|
||||
<div id="intro" class="fluid">
|
||||
|
||||
<div id="intro-text" class="fluid">
|
||||
<div id="logo">
|
||||
<img src="img/logo.png" alt="TJSGA Logo" />
|
||||
</div>
|
||||
<div id="letter">
|
||||
<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.
|
||||
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>
|
||||
<br />
|
||||
<p>
|
||||
Here at Jefferson, we not only challenge ourselves academically, but also extracurricularly. And so, tjSGA is pushing forward this year to not only continue school-wide traditions such as Homecoming Week, Dancing with the Faculty, Service Week, and J-Day, but also both establish new and revive discontinued traditions such as the February Snow Ball and March Volleyball tournament. Moreover, as we face obstacles such as the stigma against mental illness and TJ Renovation restrictions, we hope to continually find effective solutions for the student body.
|
||||
Here at Jefferson, we not only challenge ourselves academically, but also extracurricularly. And so, tjSGA is pushing forward this year to not only continue school-wide traditions such as Homecoming Week, Dancing with the Faculty, Service Week, and J-Day, but also both establish new and revive discontinued traditions such as the February Snow Ball and March Volleyball tournament. Moreover, as we face obstacles such as the stigma against mental illness and TJ Renovation restrictions, we hope to continually find effective solutions for the student body.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Please don't hesitate to contact me or SGA at anytime with any concerns, suggestions, or questions and we'll do our best to address them.
|
||||
Please don't hesitate to contact me or SGA at anytime with any concerns, suggestions, or questions and we'll do our best to address them.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Sincerely,<br />
|
||||
Tim Cho<br />
|
||||
|
|
@ -60,11 +59,40 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="intro-image" class="fluid">
|
||||
<img src="img/group.jpg" alt="TJSGA Group Photo" />
|
||||
</div>
|
||||
</section>
|
||||
<section id="updates">
|
||||
<div id="tweets">
|
||||
<a class="twitter-timeline" data-height="540" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/tjSGA">Tweets by tjSGA</a>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</div>
|
||||
<div id="tweets">
|
||||
<a class="twitter-timeline" data-height="540" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/tjSGA">Tweets by tjSGA</a>
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</div>
|
||||
</section>
|
||||
<!--<section id="photos">
|
||||
</section>-->
|
||||
</div>
|
||||
<footer>© 2017 William Zhang</footer>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user