Rough design start

6 years ago · a2b8035742
parent fbd4ab0661
commit a2b8035742
2 changed files with 93 additions and 36 deletions
--- a/index.html
+++ b/index.html
@ -10,45 +10,50 @@

    <link rel="stylesheet" href="styles.css">

-    <title>{dev}Osan</title>
+    <title>{ dev } Osan</title>
  </head>
-
  <body>
-
-
-    <!-- Header information, above the fold -->
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col col-12 col-sm-6">
-            <img src="header.jpg" class="img-fluid" alt="Responsive image">
+    <nav class="navbar fixed-top navbar-dark bg-dark">
+      <div class="content">
+        <span class="navbar-brand mb-0 h1">{ dev } Osan</span>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+          <div class="navbar-nav">
+            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+            <a class="nav-item nav-link" href="#">Features</a>
+            <a class="nav-item nav-link" href="#">Pricing</a>
+            <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+          </div>
        </div>
-        <div class="col">asdf</div>
      </div>
-      <div class="row">
-        <div class="col col-12 col-sm-6">asdf2</div>
-        <div class="col">
-          <h1>{dev}Osan</h1>
-          <p>Software Development Club</p>
-        </div>
+    </nav>
+    <div class="jumbotron jumbotron-fluid">
+      <div class="container">
+        <h1 class="display-3">{ dev } Osan</h1>
+        <p class="lead">What is our catchphrase?</p>
      </div>
    </div>
-
-    <!-- below the fold. Vision statement, Meeting info -->
-    <div class="container-fluid">
-      <div class="row">
-        <div class="col">asdf</div>
+    <div class="main">
+      <div id="info">
+        <div class="row" id="vision">
+          <div class="container">
+            <div class="col s12">
+              <h1 class="display-4">Vision</h1>
+              <p class="lead">To create X, Y, and Z.</p>
+            </div>
+          </div>
+        </div>
+        <div class="row alt" id="meet">
+          <div class="container">
+            <div class="col s12">
+              <h1 class="display-4">Meet</h1>
+              <p class="lead">To create X, Y, and Z.</p>
+            </div>
+          </div>
+        </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>
  </body>
 </html>
--- a/styles.css
+++ b/styles.css
@ -1,3 +1,55 @@
-* {
- background-color: darkseagreen;
+.navbar {
+  z-index: +2;
+}
+.navbar .content {
+  float: left;
+  width: 60%;
+  margin: 0px auto;
+}
+.navbar .content span {
+  float: left;
+}
+.navbar .content .navbar-toggler {
+  float: right;
+}
+
+.jumbotron {
+  position: absolute;
+  top: 0px;
+  background: url("https://media.defense.gov/2016/May/10/2001535489/-1/-1/0/160509-F-LU738-221.JPG") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  height: 40%;
+  width: 100%;
+  color: #fff;
+}
+.jumbotron .container {
+  float: left;
+  margin-top: 50px;
+  background: #3e3e3e;
+  opacity: 0.80;
+  max-width: 450px;
+  text-align: center;
+}
+
+.main {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+}
+.main .lead {
+  font-size: 20pt;
+}
+.main .row {
+  padding: 70px 15px 70px 15px;
+  margin: 0px;
+}
+.main .alt {
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  margin: 0px;
+  background: #e3e3e3;
 }