sigonasr2/dev-osan.github.io
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix navbar and make cover image take up above the fold

Browse Source
This commit is contained in:
Kevin Falting 2019-05-05 13:16:54 +09:00
parent 8eac36b386
commit 70d9dc8dc8
5 changed files with 196 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/devOsan_noLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

BIN
img/devosan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 619 KiB

BIN
img/header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 625 KiB

After

Width:  |  Height:  |  Size: 619 KiB

310
index.html
View File

@ -1,175 +1,193 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
<title>{dev}Osan</title> <title>{dev}Osan</title>
</head> </head>
<body> <body>
<!-- Header information, above the fold --> <!-- Header information, above the fold -->
<div class="container-fluid"> <div class="above-the-fold">
<div class="row" style="padding-top:64px;"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col col-12 col-sm-6"> <a class="navbar-brand" href="#"
<img src="img/header.png" class="img-fluid" alt="Responsive image"> ><span style="color: #696035">{</span>dev<span style="color: #696035"
>}</span
>Osan</a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Club Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learning Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div> </div>
<div class="col col-6"> </nav>
<nav class="navbar fixed-top navbar-expand-sm navbar-light" style="text-align:right;>
<a class="navbar-toggler"> <div class="container-fluid"></div>
<button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#MEET">Meeting Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#EVENT">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#PROJECT">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LEARN">Learning Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#FAQ">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#CONTACT">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col col-6"></div>
<div class="col col-12 col-sm-6">
<div class="rightalign">
<h1 class="osanlogo">{dev}Osan</h1>
<p>Software Development Club</p>
</div>
</div>
</div>
</div> </div>
<!-- below the fold. Vision statement, Meeting info --> <!-- below the fold. Vision statement, Meeting info -->
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col col-2"> </div> <div class="col col-2"></div>
<div class="col col-8"> <div class="col col-8">
<hr> <hr />
<div class="visionstatement"> <div class="visionstatement">
<h3>Bringing Developers, Graphic Designers, and Engineering together at Osan! Beginners and Experts alike!</h3> <h3>
</div> Bringing Developers, Graphic Designers, and Engineering together
<hr> at Osan! Beginners and Experts alike!
</div> </h3>
<div class="col col-2"></div> </div>
<hr />
</div>
<div class="col col-2"></div>
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="container-fluid" id="MEET"> <div class="container-fluid" id="MEET">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6"> <div class="col col-12 col-sm-6">
<h3>Meeting Info</h3> <h3>Meeting Info</h3>
<div class="wingdings-image" style="float:left;"> <div class="wingdings-image" style="float:left;">
º º
</div> </div>
<div class="info-display"> <div class="info-display">
<div class="info-header"> <div class="info-header">
1600 - 1700 1600 - 1700
</div> </div>
<div class="info-header-sm"> <div class="info-header-sm">
&nbsp;&nbsp;&nbsp;Tuesdays & Wednesdays &nbsp;&nbsp;&nbsp;Tuesdays & Wednesdays
</div> </div>
</div> </div>
</div> </div>
<div class="col col-12 col-sm-6"> <div class="col col-12 col-sm-6">
<h3>Location</h3> <h3>Location</h3>
<div class="webdings-image" style="float:left;"> <div class="webdings-image" style="float:left;">
H H
</div> </div>
<div class="info-header"> <div class="info-header">
Mustang Center Mustang Center
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6" id="EVENT"> <div class="col col-12 col-sm-6" id="EVENT">
<h3>Events</h3> <h3>Events</h3>
<ul> <ul>
<li>Event 1</li> <li>Event 1</li>
<li>Event 2</li> <li>Event 2</li>
<li>Event 3</li> <li>Event 3</li>
<li>Event 4</li> <li>Event 4</li>
</ul> </ul>
</div> </div>
<div class="col col-12 col-sm-6" id="PROJECT"> <div class="col col-12 col-sm-6" id="PROJECT">
<h3>Projects</h3> <h3>Projects</h3>
<ul> <ul>
<li>Project 1</li> <li>Project 1</li>
<li>Project 2</li> <li>Project 2</li>
<li>Project 3</li> <li>Project 3</li>
<li>Project 4</li> <li>Project 4</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6" id="LEARN"> <div class="col col-12 col-sm-6" id="LEARN">
<h3>Learning Resources</h3> <h3>Learning Resources</h3>
<div>Learning Resource 1 - <a href="">Go here</a></div> <div>Learning Resource 1 - <a href="">Go here</a></div>
<div>Learning Resource 2 - <a href="">Go here</a></div> <div>Learning Resource 2 - <a href="">Go here</a></div>
<div>Learning Resource 3 - <a href="">Go here</a></div> <div>Learning Resource 3 - <a href="">Go here</a></div>
<div>Learning Resource 4 - <a href="">Go here</a></div> <div>Learning Resource 4 - <a href="">Go here</a></div>
<div>Learning Resource 5 - <a href="">Go here</a></div> <div>Learning Resource 5 - <a href="">Go here</a></div>
</div> </div>
<div class="col col-12 col-sm-6" id="FAQ"> <div class="col col-12 col-sm-6" id="FAQ">
<h3>FAQ</h3> <h3>FAQ</h3>
<h6>??????</h6> <h6>??????</h6>
<div class="answer">AAAAAAAAA</div> <div class="answer">AAAAAAAAA</div>
<h6>??????</h6> <h6>??????</h6>
<div class="answer">AAAAAAAAA</div> <div class="answer">AAAAAAAAA</div>
<h6>??????</h6> <h6>??????</h6>
<div class="answer">AAAAAAAAA</div> <div class="answer">AAAAAAAAA</div>
<h6>??????</h6> <h6>??????</h6>
<div class="answer">AAAAAAAAA</div> <div class="answer">AAAAAAAAA</div>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col col-12" id="CONTACT"> <div class="col col-12" id="CONTACT">
<hr> <hr />
<center><h3>Contact Us</h3></center> <center>
</div> <h3>Contact Us</h3>
</div> </center>
</div> </div>
</div>
</div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body> </body>
</html> </html>

63
styles.css
View File

@ -1,51 +1,50 @@
* { .above-the-fold {
background-color: #BDB; height: 100vh;
color: #202222; background-image: url("img/devOsan_noLogo.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} }
.rightalign{ .rightalign {
text-align:right; text-align: right;
} }
.osanlogo{ .visionstatement {
font-size:64px; text-align: center;
font-style: italic;
} }
.visionstatement{ .wingdings-image {
text-align:center; font-family: "Wingdings";
font-style: italic; font-size: 96px;
color: #040;
width: 120px;
} }
.wingdings-image{ .webdings-image {
font-family:"Wingdings"; font-family: "Webdings";
font-size:96px; font-size: 96px;
color:#040; color: #040;
width:120px; width: 120px;
} }
.webdings-image{ .info-display {
font-family:"Webdings"; padding-top: 16px;
font-size:96px;
color:#040;
width:120px;
} }
.info-display{ .info-header {
padding-top:16px; font-size: 48px;
} }
.info-header{ .info-header-sm {
font-size:48px; padding-left: 12px;
} }
.info-header-sm{ .answer {
padding-left:12px; margin-left: 10px;
} }
.answer{ .spacer {
margin-left:10px; height: 64px;
}
.spacer{
height:64px;
} }