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

add some styling and outlining for more information

Browse Source
linkModifications
Kevin Falting 6 years ago
parent 55f1a5d4d3
commit 4b187ab0bb
2 changed files with 111 additions and 94 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. 148
      index.html
  2. 57
      styles.css

148
index.html
Unescape View File

@ -16,6 +16,15 @@
crossorigin="anonymous" crossorigin="anonymous"
/> />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<title>{dev}Osan</title> <title>{dev}Osan</title>
@ -44,22 +53,24 @@
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Club Info</a> <a class="nav-link" href="#club-info">Club Info</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Events</a> <a class="nav-link" href="#events">Events</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Projects</a> <a class="nav-link" href="#projects">Projects</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Learning Resources</a> <a class="nav-link" href="#learning-resources"
>Learning Resources</a
>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">FAQs</a> <a class="nav-link" href="#faq">FAQs</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Contact</a> <a class="nav-link" href="#contact">Contact</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -109,105 +120,74 @@
</div> </div>
<!-- below the fold. Vision statement, Meeting info --> <!-- below the fold. Vision statement, Meeting info -->
<div class="container-fluid"> <div class="container-fluid" id="club-info">
<div class="row"> <div class="row">
<div class="col col-2"></div> <div class="vision-statement col-sm-8 offset-sm-2">
<div class="col col-8"> Bringing Developers, Graphic Designers, and Engineering together at
<hr /> Osan Air Base - beginners and experts alike.
<div class="visionstatement">
<h3>
Bringing Developers, Graphic Designers, and Engineering together
at Osan! Beginners and Experts alike!
</h3>
</div>
<hr />
</div> </div>
<div class="col col-2"></div>
</div> </div>
</div>
<div class="spacer"></div>
<div class="container-fluid" id="MEET">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6"> <div class="col-sm-6">
<h3>Meeting Info</h3> <i class="far fa-clock"></i><br /><br />
<div class="wingdings-image" style="float:left;"> <p>Tuesdays @ 1600 - 1700 : Guided lesson</p>
º <p>Wednesdays @ 1600 - 1700 : Open Project Work</p>
</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>
<div class="col col-12 col-sm-6"> <div class="col-sm-6">
<h3>Location</h3> <i class="fas fa-map-marker-alt"></i><br /><br />
<div class="webdings-image" style="float:left;"> <p>TAPS room at the Mustang Center</p>
H <p>Osan Air Base, South Korea</p>
</div>
<div class="info-header">
Mustang Center
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div>
<div class="container-fluid"> <!-- Events and Projects -->
<div class="container-fluid events-projects">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6" id="EVENT"> <div class="col-sm-6" id="events">
<h3>Events</h3> <h3><i class="far fa-calendar-alt"></i><br />Events</h3>
<ul> <br />
<li>Event 1</li> <p>Pitch & Prototype Weekend - Aug 23-25</p>
<li>Event 2</li>
<li>Event 3</li>
<li>Event 4</li>
</ul>
</div> </div>
<div class="col col-12 col-sm-6" id="PROJECT"> <div class="col-sm-6" id="projects">
<h3>Projects</h3> <h3><i class="fas fa-code-branch"></i><br />Projects</h3>
<ul> <br />
<li>Project 1</li> <p>Bus GPS</p>
<li>Project 2</li> <p>{dev}Osan Website</p>
<li>Project 3</li> <p>Pending Game Engine</p>
<li>Project 4</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div>
<div class="container-fluid"> <!-- Learning Resources & FAQ -->
<div class="container-fluid learn-faq">
<div class="row"> <div class="row">
<div class="col col-12 col-sm-6" id="LEARN"> <div class="col-sm-6" id="learning-resources">
<h3>Learning Resources</h3> <h3>Learning Resources</h3>
<div>Learning Resource 1 - <a href="">Go here</a></div> <p>
<div>Learning Resource 2 - <a href="">Go here</a></div> Contributing Guides -
<div>Learning Resource 3 - <a href="">Go here</a></div> <a href="https://github.com/dev-osan/dev-osan.github.io">Go here</a>
<div>Learning Resource 4 - <a href="">Go here</a></div> </p>
<div>Learning Resource 5 - <a href="">Go here</a></div>
</div> </div>
<div class="col col-12 col-sm-6" id="FAQ"> <div class="col-sm-6" id="faq">
<h3>FAQ</h3> <h3>FAQ</h3>
<h6>??????</h6> <h6>Do I have to know how to program?</h6>
<div class="answer">AAAAAAAAA</div> <div class="answer">
<h6>??????</h6> Absolutely not, just a desire to hang out with software developers.
<div class="answer">AAAAAAAAA</div> </div>
<h6>??????</h6>
<div class="answer">AAAAAAAAA</div>
<h6>??????</h6>
<div class="answer">AAAAAAAAA</div>
</div> </div>
</div> </div>
</div> </div>
<div class="spacer"></div>
<div class="container-fluid"> <!-- Footer and Contact Us -->
<div class="container-fluid" id="contact">
<div class="row"> <div class="row">
<div class="col col-12" id="CONTACT"> <div class="col">
<hr /> <h3>Contact Us</h3>
<center> <p>
<h3>Contact Us</h3> <a href="mailto:kevinfalting@gmail.com">kevinfalting@gmail.com</a>
</center> </p>
</div> </div>
</div> </div>
</div> </div>

57
styles.css
Unescape View File

@ -1,5 +1,5 @@
.above-the-fold { .above-the-fold {
height: 100vh; min-height: 100vh;
background-image: url("img/devOsan_noLogo.png"); background-image: url("img/devOsan_noLogo.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -12,6 +12,44 @@
color: black; color: black;
} }
#club-info {
background-color: #202222;
color: white;
text-align: center;
padding-top: 3em;
padding-bottom: 3em;
font-size: 1.5em;
}
#contact {
text-align: center;
color: white;
background-color: #202222;
}
.events-projects {
color: white;
background-color: #696035;
padding-top: 3em;
padding-bottom: 3em;
}
#events,
#projects {
margin-top: 1em;
text-align: center;
}
i {
font-size: 2em;
}
.learn-faq {
color: #202222;
padding-top: 3em;
padding-bottom: 3em;
}
.name-slogan { .name-slogan {
text-align: center; text-align: center;
} }
@ -24,13 +62,16 @@ h4 {
font-size: 1.8em; font-size: 1.8em;
} }
.rightalign { .vision-statement {
text-align: right; /* font-size: 1.5em; */
margin-bottom: 3em;
} }
.visionstatement { /* */
text-align: center;
font-style: italic;
.rightalign {
text-align: right;
} }
.wingdings-image { .wingdings-image {
@ -61,8 +102,4 @@ h4 {
.answer { .answer {
margin-left: 10px; margin-left: 10px;
}
.spacer {
height: 64px;
} }
Write Preview
Loading…
Cancel
Save