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

Rough design start

Browse Source
matt
Matthew Reichardt 6 years ago
parent fbd4ab0661
commit a2b8035742
2 changed files with 93 additions and 36 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. 71
      index.html
  2. 58
      styles.css

71
index.html
Unescape View File

@ -10,45 +10,50 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>{dev}Osan</title> <title>{ dev } Osan</title>
</head> </head>
<body> <body>
<nav class="navbar fixed-top navbar-dark bg-dark">
<div class="content">
<!-- Header information, above the fold --> <span class="navbar-brand mb-0 h1">{ dev } Osan</span>
<div class="container-fluid"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="row"> <span class="navbar-toggler-icon"></span>
<div class="col col-12 col-sm-6"> </button>
<img src="header.jpg" class="img-fluid" alt="Responsive image"> <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>
<div class="col">asdf</div>
</div> </div>
<div class="row"> </nav>
<div class="col col-12 col-sm-6">asdf2</div> <div class="jumbotron jumbotron-fluid">
<div class="col"> <div class="container">
<h1>{dev}Osan</h1> <h1 class="display-3">{ dev } Osan</h1>
<p>Software Development Club</p> <p class="lead">What is our catchphrase?</p>
</div>
</div> </div>
</div> </div>
<div class="main">
<!-- below the fold. Vision statement, Meeting info --> <div id="info">
<div class="container-fluid"> <div class="row" id="vision">
<div class="row"> <div class="container">
<div class="col">asdf</div> <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>
</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> </body>
</html> </html>

58
styles.css
Unescape View File

@ -1,3 +1,55 @@
* { .navbar {
background-color: darkseagreen; 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;
}

Write Preview
Loading…
Cancel
Save