Skip to content
This repository has been archived by the owner on Dec 27, 2017. It is now read-only.

navbar #7

Closed
wants to merge 2 commits into from
Closed

navbar #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9fbd28a
add navbar
zavfel Mar 13, 2016
e4f923b
fix minor changes
zavfel Mar 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions assets/css/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.leftBanner {
float: left;
padding-top: 5px;
padding-bottom: 8px;
}

.rightBanner {
position: relative;
top: 16px;
float: right;
border-left: medium #011640 solid;
padding-left: 3px;
}

.acadLogo {
position: relative;
top: 5px;
left: 10px;
}

#nuscc {
font-size: 30px;
}

.navbar {
background-color: #0085A1
}
59 changes: 55 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,62 @@
<head>
<title>Academics | NUS Computing</title>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the following lines above the <title> tag

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

This will show the mobile view on mobile sized screens (right now it doesn't work that well)

<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/stylesheet.css">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<script src="assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned, wrap the body contents in a <div class="container">. check http://getbootstrap.com/css/#overview-container for more info

<!-- body content -->
<h1>Hello world</h1>
<p>This is the acad website for compclub</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="leftBanner">
<img src="assets/img/comp_club_logo.png"/>
</div>
<div class="leftBanner acadLogo">
<span id="nuscc">NUS Computing Club</span>
<div>
<img src="assets/img/acad_logo.png"/>
</div>
</div>
<div class="rightBanner">
NUS<br>
Computing<br>
Club
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Nav Bar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- for view on mobile -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar -->
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a> </li>
<li><a href="#bidding">Bidding</a> </li>
<li><a href="#events">Events</a> </li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.navbar -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- body content -->
<h1>Hello world</h1>
<p>This is the acad website for compclub</p>
</div>
</div>
</div>
</body>