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

Rough design start

Browse Source
This commit is contained in:
Matthew Reichardt 2019-04-24 23:28:56 +09:00
parent fbd4ab0661
commit a2b8035742
2 changed files with 94 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
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 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> </div>
</div> </div>
<!-- below the fold. Vision statement, Meeting info -->
<div class="container-fluid">
<div class="row">
<div class="col">asdf</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>

56
styles.css
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;
} }