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
linkModifications
Kevin Falting 6 years ago
parent 8eac36b386
commit 70d9dc8dc8
5 changed files with 194 additions and 177 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      img/devOsan_noLogo.png
  2. BIN
      img/devosan.png
  3. BIN
      img/header.png
  4. 112
      index.html
  5. 61
      styles.css

BIN
img/devOsan_noLogo.png
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

112
index.html
Unescape View File

@ -1,78 +1,86 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- 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>
</head>
<body>
<!-- Header information, above the fold -->
<div class="container-fluid">
<div class="row" style="padding-top:64px;">
<div class="col col-12 col-sm-6">
<img src="img/header.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col col-6">
<nav class="navbar fixed-top navbar-expand-sm navbar-light" style="text-align:right;>
<a class="navbar-toggler">
<button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<div class="above-the-fold">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"
><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="navbarNavDropdown">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#MEET">Meeting Info</a>
<a class="nav-link" href="#">Club Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#EVENT">Events</a>
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#PROJECT">Projects</a>
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#LEARN">Learning Resources</a>
<a class="nav-link" href="#">Learning Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#FAQ">FAQ</a>
<a class="nav-link" href="#">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#CONTACT">Contact Us</a>
<a class="nav-link" href="#">Contact</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>
</nav>
<div class="container-fluid"></div>
</div>
<!-- below the fold. Vision statement, Meeting info -->
<div class="container-fluid">
<div class="row">
<div class="col col-2"> </div>
<div class="col col-2"></div>
<div class="col col-8">
<hr>
<hr />
<div class="visionstatement">
<h3>Bringing Developers, Graphic Designers, and Engineering together at Osan! Beginners and Experts alike!</h3>
<h3>
Bringing Developers, Graphic Designers, and Engineering together
at Osan! Beginners and Experts alike!
</h3>
</div>
<hr>
<hr />
</div>
<div class="col col-2"></div>
</div>
@ -156,20 +164,30 @@
<div class="container-fluid">
<div class="row">
<div class="col col-12" id="CONTACT">
<hr>
<center><h3>Contact Us</h3></center>
<hr />
<center>
<h3>Contact Us</h3>
</center>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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 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>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
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>
</html>

61
styles.css
Unescape View File

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