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

Merge pull request #1 from sigonasr2/patch-1

Browse Source 
Merge to master
This commit is contained in:
sigonasr2 2019-05-07 11:58:11 +09:00 committed by GitHub
commit ca198f850a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 289 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -1,7 +1,7 @@
# Design Palette # Design Palette
Himalaya (dark brown) #696035 Himalaya (dark brown) #696035
Swamp (less black) #202222 Swamp (less black) #202222
# Contributing # Contributing
@ -10,39 +10,48 @@ Please feel free to update this document. There's probably a bunch of ambiguous
Feel free to ask any questions in the [Facebook group](https://www.facebook.com/groups/256151891980498) or when we meet up at the club. Feel free to ask any questions in the [Facebook group](https://www.facebook.com/groups/256151891980498) or when we meet up at the club.
## Create a Github account ## Create a Github account
[https://github.com/](https://github.com/) [https://github.com/](https://github.com/)
## Install and get familiar with Git ## Install and get familiar with Git
Follow this guide to install Git [https://help.github.com/en/articles/set-up-git](https://help.github.com/en/articles/set-up-git). If you're feeling real motivated, that guide will pretty much walk you through everything I'm going to lay out here. Understanding Git is going to be really important. There are ways to work around it, but if you learn it, collaborating on code with others will be much easier. Other than the original website, here is a good starter resource [https://www.codecademy.com/learn/learn-git](https://www.codecademy.com/learn/learn-git) Follow this guide to install Git [https://help.github.com/en/articles/set-up-git](https://help.github.com/en/articles/set-up-git). If you're feeling real motivated, that guide will pretty much walk you through everything I'm going to lay out here. Understanding Git is going to be really important. There are ways to work around it, but if you learn it, collaborating on code with others will be much easier. Other than the original website, here is a good starter resource [https://www.codecademy.com/learn/learn-git](https://www.codecademy.com/learn/learn-git)
## Fork the Repository (repo) ## Fork the Repository (repo)
Click on the `Fork` button at the top right of the page. This will create a copy of the repository in your github account. The copy is linked to the original, so when you make a `pull request`, it knows where it's going. Click on the `Fork` button at the top right of the page. This will create a copy of the repository in your github account. The copy is linked to the original, so when you make a `pull request`, it knows where it's going.
![Image of repository with arrow to Fork Button](readme_images/fork.png) ![Image of repository with arrow to Fork Button](readme_images/fork.png)
## Clone down your new copy of the repository to your computer ## Clone down your new copy of the repository to your computer
Open your terminal or command prompt and navigate to the directory you want to store the code. This is just like navigating the folders on your computer, just that you're doing it from the terminal - none of that fancy graphical user interface (gui) anymore! You can view a list of files and folders by typing `ls` (mac) or `dir` (windows) and hitting Enter. You can go into another folder by using the change directory command `cd folderName` and hitting Enter. You can navigate up a folder by typing `cd ..` and hitting Enter. Once you are in the folder you want to create the project folder in, click the `clone or download` button (It's green, top right) and copy the URL that it shows. Once you do that, go back to your terminal and type `git clone https://github.com/userName/repoName` Make sure to swap out the URL for the one you copied!
Open your terminal or command prompt and navigate to the directory you want to store the code. This is just like navigating the folders on your computer, just that you're doing it from the terminal - none of that fancy graphical user interface (gui) anymore! You can view a list of files and folders by typing `ls` (mac) or `dir` (windows) and hitting Enter. You can go into another folder by using the change directory command `cd folderName` and hitting Enter. You can navigate up a folder by typing `cd ..` and hitting Enter. Once you are in the folder you want to create the project folder in, click the `clone or download` button (It's green, top right) and copy the URL that it shows. Once you do that, go back to your terminal and type `git clone https://github.com/userName/repoName` Make sure to swap out the URL for the one you copied! After it downloads, type `cd dev-osan.github.io` and hit enter to navigate into the newly created folder. This is where everything was downloaded to.
Success looks like this: Success looks like this:
![successfully downloaded repo](readme_images/success.png) ![successfully downloaded repo](readme_images/success.png)
## Let's make sure we're watching the original repository ## Let's make sure we're watching the original repository
If someone changes the original repo, you want to make sure you can get those changes to, so in the terminal, type `git remote add upstream https://github.com/dev-osan/dev-osan.github.io.git` and hit Enter. You can run `git fetch upstream` to pull down any new changes to the original repo that others may have done. Make sure to do this each time you're about to tackle an issue or make changes to ensure you're working in the most up to date version. If someone changes the original repo, you want to make sure you can get those changes to, so in the terminal, type `git remote add upstream https://github.com/dev-osan/dev-osan.github.io.git` and hit Enter. You can run `git fetch upstream` to pull down any new changes to the original repo that others may have done. Make sure to do this each time you're about to tackle an issue or make changes to ensure you're working in the most up to date version.
## Make changes! ## Make changes!
Open your code editor, I use [Visual Studio Code](https://code.visualstudio.com/), and open the folder that you just created. Once that's done, you should be able to see the files from the project, hopefully with some nice colors (syntax highlighting). Edit the code and save your files! Open your code editor, I use [Visual Studio Code](https://code.visualstudio.com/), and open the folder that you just created. Once that's done, you should be able to see the files from the project, hopefully with some nice colors (syntax highlighting). Edit the code and save your files!
## Commit the changes you've made. ## Commit the changes you've made.
Git works by _staging_ the files you want to commit, and then you have to _commit_ them while providing a message. This is like a big save to the overall codebase. In your terminal, write `git add .` and hit Enter. This adds all of the changed files to the staging area. Then when you're ready, type in `git commit -m 'I promise to write a quick summary of my changes here using future tense language.'` and hit Enter. Git works by _staging_ the files you want to commit, and then you have to _commit_ them while providing a message. This is like a big save to the overall codebase. In your terminal, write `git add .` and hit Enter. This adds all of the changed files to the staging area. Then when you're ready, type in `git commit -m 'I promise to write a quick summary of my changes here using future tense language.'` and hit Enter.
## Now let's push the code back up to github! ## Now let's push the code back up to github!
After committing all of your changes (you can make multiple commits), it's time to push up the code. Type `git push` and hit Enter. At this point, if you've never done this before you may need to type in your github login credentials. You can also `git push` as many times as you like before you go to the next step. After committing all of your changes (you can make multiple commits), it's time to push up the code. Type `git push` and hit Enter. At this point, if you've never done this before you may need to type in your github login credentials. You can also `git push` as many times as you like before you go to the next step.
## The Pull Request ## The Pull Request
At this point, you're ready to make a pull request, which is like saying _"Hey original repo, will you pull my changes into yours, please?"_ On your repo page, click `New Pull Request` and follow the instructions through submitting the pull request. We'll review it, merge it, or give you feedback!
At this point, you're ready to make a pull request, which is like saying _"Hey original repo, will you pull my changes into yours, please?"_ **On your repo page**, click `New Pull Request` and follow the instructions through submitting the pull request. We'll review it, merge it, or give you feedback!
## Rinse & Repeat ## Rinse & Repeat
_self explanatory_
_self explanatory_
## Resources ## Resources
@ -53,15 +62,4 @@ This isn't the first time someone has attempted to write a contribution guide. H
[First Contributions](https://github.com/firstcontributions/first-contributions) [First Contributions](https://github.com/firstcontributions/first-contributions)
[GitHub Help and Documentation](https://help.github.com/en) [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) [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) [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

BIN
img/3dPrinter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
img/devOsan_noLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

BIN
img/devosan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 619 KiB

BIN
img/header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 625 KiB

After

Width:  |  Height:  |  Size: 619 KiB

BIN
img/originals/3dPrinter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

332
index.html
View File

@ -1,175 +1,213 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"> <!-- 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" />
<title>{dev}Osan</title> <title>{dev}Osan</title>
</head> </head>
<body> <body>
<!-- Header information, above the fold --> <!-- Header information, above the fold -->
<div class="container-fluid"> <div class="above-the-fold">
<div class="row" style="padding-top:64px;"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="col col-12 col-sm-6"> <a class="navbar-brand" href="#"
<img src="img/header.png" class="img-fluid" alt="Responsive image"> ><span style="color: #696035">{</span>dev<span style="color: #696035"
>}</span
>Osan</a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#club-info">Club Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#learning-resources"
>Learning Resources</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<a href="" id="announcement-card-link">
<div class="card mb-3" style="max-width: 540px; margin-top: 5%;">
<div class="row no-gutters">
<div class="col-4">
<img
src="img/3dPrinter.png"
class="card-img"
alt="3d printer printing a red wheel"
/>
</div>
<div class="col-8">
<div class="card-body">
<h5 class="card-title">Pitch & Prototype Weekend</h5>
<p class="card-text">
Join us Aug 23-25 at Osan Air Base for a weekend of
rapid prototyping. Pitch an idea to form a team or show
up with your skills ready to contribute! Click here!
</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row name-slogan">
<div class="col col-md-6 offset-md-6">
<h1>
<span style="color: #696035">{</span>dev<span
style="color: #696035"
>}</span
>Osan
</h1>
<h4>Software Development Club</h4>
</div>
</div> </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-6"></div>
<div class="col col-12 col-sm-6">
<div class="rightalign">
<h1 class="osanlogo">{dev}Osan</h1>
<p>Software Development Club</p>
</div>
</div>
</div> </div>
</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"> </div>
<h3>Bringing Developers, Graphic Designers, and Engineering together at Osan! Beginners and Experts alike!</h3> </div>
</div> <div class="row">
<hr> <div class="col-sm-6">
</div> <i class="far fa-clock"></i><br /><br />
<div class="col col-2"></div> <p>Tuesdays @ 1600 - 1700 : Guided lesson</p>
<p>Wednesdays @ 1600 - 1700 : Open Project Work</p>
</div>
<div class="col-sm-6">
<i class="fas fa-map-marker-alt"></i><br /><br />
<p>TAPS room at the Mustang Center</p>
<p>Osan Air Base, South Korea</p>
</div>
</div> </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>
<!-- Events and Projects -->
<div class="container-fluid events-projects">
<div class="row">
<div class="col-sm-6" id="events">
<h3><i class="far fa-calendar-alt"></i><br />Events</h3>
<br />
<p>Pitch & Prototype Weekend - Aug 23-25</p>
</div>
<div class="col-sm-6" id="projects">
<h3><i class="fas fa-code-branch"></i><br />Projects</h3>
<br />
<p>Bus GPS</p>
<p>{dev}Osan Website</p>
<p>Pending Game Engine</p>
</div>
</div>
</div>
<!-- Learning Resources & FAQ -->
<div class="container-fluid learn-faq">
<div class="row">
<div class="col-sm-6" id="learning-resources">
<h3>Learning Resources</h3>
<p>
Contributing Guides -
<a href="https://github.com/dev-osan/dev-osan.github.io">Go here</a>
</p>
</div>
<div class="col-sm-6" id="faq">
<h3>FAQ</h3>
<h6>Do I have to know how to program?</h6>
<div class="answer">
Absolutely not, just a desire to hang out with software developers.
</div>
</div>
</div>
</div>
<!-- Footer and Contact Us -->
<div class="container-fluid" id="contact">
<div class="row">
<div class="col">
<h3>Contact Us</h3>
<p>
<a href="mailto:kevinfalting@gmail.com">kevinfalting@gmail.com</a>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- 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
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 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>

121
styles.css
View File

@ -1,51 +1,110 @@
* { .above-the-fold {
background-color: #BDB; min-height: 100vh;
color: #202222; background-image: url("img/devOsan_noLogo.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding-top: 3em;
} }
.rightalign{ #announcement-card-link {
text-align:right; text-decoration: none;
color: black;
} }
.osanlogo{ #club-info {
font-size:64px; background-color: #202222;
color: white;
text-align: center;
padding-top: 3em;
padding-bottom: 3em;
font-size: 1.5em;
} }
.visionstatement{ #contact {
text-align:center; text-align: center;
font-style: italic; color: white;
background-color: #202222;
} }
.wingdings-image{ .events-projects {
font-family:"Wingdings"; color: white;
font-size:96px; background-color: #696035;
color:#040; padding-top: 3em;
width:120px; padding-bottom: 3em;
} }
.webdings-image{ #events,
font-family:"Webdings"; #projects {
font-size:96px; margin-top: 1em;
color:#040; text-align: center;
width:120px;
} }
.info-display{ i {
padding-top:16px; font-size: 2em;
} }
.info-header{ .learn-faq {
font-size:48px; color: #202222;
padding-top: 3em;
padding-bottom: 3em;
} }
.info-header-sm{ .name-slogan {
padding-left:12px; text-align: center;
} }
.answer{ h1 {
margin-left:10px; font-size: 5em;
} }
.spacer{ h4 {
height:64px; font-size: 1.8em;
} }
a {
font-weight: bold;
text-decoration: underline;
}
.vision-statement {
/* font-size: 1.5em; */
margin-bottom: 3em;
}
/* */
.rightalign {
text-align: right;
}
.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;
}