Merge pull request #3 from sigonasr2/master

Create a bare-bones layout for the site. Developed basic elements.

README.md

@@ -54,3 +54,14 @@ This isn't the first time someone has attempted to write a contribution guide. H
 [GitHub Help and Documentation](https://help.github.com/en)  
 [How to Keep a Downstream git Repository Current with Upstream Repository Changes](https://medium.com/sweetmeat/how-to-keep-a-downstream-git-repository-current-with-upstream-repository-changes-10b76fad6d97)  
 [Your first open source contribution: a step-by-step technical guide](https://medium.com/@jenweber/your-first-open-source-contribution-a-step-by-step-technical-guide-d3aca55cc5a6)  
+
+
+[IMG]
+	devOsan
+--------------- Fold
+Vision
+Meeting Info
+Time	Location (Map)
+Events	Projects
+Learning Resources	FAQ
+Contact Us

index.html

@@ -18,28 +18,149 @@
 
     <!-- Header information, above the fold -->
     <div class="container-fluid">
-      <div class="row">
+      <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">asdf</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">
+				<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-12 col-sm-6">asdf2</div>
+        <div class="col col-6"></div>
-        <div class="col">
+        <div class="col col-12 col-sm-6">
-          <h1>{dev}Osan</h1>
+			<div class="rightalign">
-          <p>Software Development Club</p>
+			  <h1 class="osanlogo">{dev}Osan</h1>
-        </div>
+			  <p>Software Development Club</p>
+			</div>
+		</div>
       </div>
     </div>
 
     <!-- below the fold. Vision statement, Meeting info -->
     <div class="container-fluid">
       <div class="row">
-        <div class="col">This is a test modification of the site.</div>
+		<div class="col col-2"> </div>
+		<div class="col col-8">
+			<hr>
+			<div class="visionstatement">
+			<h3>Bringing Developers, Graphic Designers, and Engineering together at Osan! Beginners and Experts alike!</h3>
+			</div>
+			<hr>
+		</div>
+		<div class="col col-2"></div>
       </div>
     </div>
-
+	<div class="spacer"></div>
+	<div class="container-fluid" id="MEET">
+      <div class="row">
+			<div class="col col-12 col-sm-6">
+				<h3>Meeting Info</h3>
+				<div class="wingdings-image" style="float:left;">
+					º
+				</div>
+				<div class="info-display">
+					<div class="info-header">
+						1600 - 1700
+					</div>
+					<div class="info-header-sm">
+						&nbsp;&nbsp;&nbsp;Tuesdays & Wednesdays
+					</div>
+				</div>
+			</div>
+			<div class="col col-12 col-sm-6">
+				<h3>Location</h3>
+				<div class="webdings-image" style="float:left;">
+					H
+				</div>
+				<div class="info-header">
+					Mustang Center
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="spacer"></div>
+	<div class="container-fluid">
+      <div class="row">
+			<div class="col col-12 col-sm-6" id="EVENT">
+				<h3>Events</h3>
+				<ul>
+					<li>Event 1</li>
+					<li>Event 2</li>
+					<li>Event 3</li>
+					<li>Event 4</li>
+				</ul>
+			</div>
+			<div class="col col-12 col-sm-6" id="PROJECT">
+				<h3>Projects</h3>
+				<ul>
+					<li>Project 1</li>
+					<li>Project 2</li>
+					<li>Project 3</li>
+					<li>Project 4</li>
+				</ul>
+			</div>
+	  </div>
+	</div>
+	<div class="spacer"></div>
+	<div class="container-fluid">
+      <div class="row">
+			<div class="col col-12 col-sm-6" id="LEARN">
+				<h3>Learning Resources</h3>
+				<div>Learning Resource 1  - <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 4  - <a href="">Go here</a></div>
+				<div>Learning Resource 5  - <a href="">Go here</a></div>
+			</div>
+			<div class="col col-12 col-sm-6" id="FAQ">
+				<h3>FAQ</h3>
+				<h6>??????</h6>
+				<div class="answer">AAAAAAAAA</div>
+				<h6>??????</h6>
+				<div class="answer">AAAAAAAAA</div>
+				<h6>??????</h6>
+				<div class="answer">AAAAAAAAA</div>
+				<h6>??????</h6>
+				<div class="answer">AAAAAAAAA</div>
+			</div>
+	  </div>
+	</div>
+	<div class="spacer"></div>
+	<div class="container-fluid">
+      <div class="row">
+			<div class="col col-12" id="CONTACT">
+				<hr>
+				<center><h3>Contact Us</h3></center>
+			</div>
+	  </div>
+	</div>
 
 
 

styles.css

@@ -1,4 +1,51 @@
 * {
- background-color: #696035;
+ background-color: #BDB;
  color: #202222;
+}
+
+.rightalign{
+ text-align:right;
+}
+
+.osanlogo{
+ font-size:64px;
+}
+
+.visionstatement{
+ text-align:center;
+ font-style: italic;
+}
+
+.wingdings-image{
+ font-family:"Wingdings";
+ 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-header{
+ font-size:48px;
+}
+
+.info-header-sm{
+ padding-left:12px;
+}
+
+.answer{
+ margin-left:10px;
+}
+
+.spacer{
+ height:64px;
 }