forked from github/training-kit
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a3fb839
commit 29e9f5b
Showing
8 changed files
with
340 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <!-- About Section --> | ||
| <html> | ||
|
|
||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <meta name="description" content="{{ site.description }}"> | ||
| <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> | ||
|
|
||
|
|
||
| <!-- Custom CSS & Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ --> | ||
| <link rel="stylesheet" href="{{ "./assets/css/timeline.css" }}"> | ||
|
|
||
| <!-- Custom Fonts --> | ||
| <link rel="stylesheet" href="{{ "assets/fonts/font-awesome/css/font-awesome.min.css" | prepend: site.baseurl }}"> | ||
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | ||
| <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> | ||
| <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> | ||
| <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | ||
| <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> | ||
|
|
||
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
| <!--[if lt IE 9]> | ||
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | ||
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | ||
| <![endif]--> | ||
| </head> | ||
| <div class ="container" id="about"> | ||
| <div class="row"> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-lg-12"> | ||
| <ul class="timeline"> | ||
| <li> | ||
| <div> | ||
| <a href="/on-demand/intro-to-github/"><img class="timeline-image" src="./images/about/repo.png" alt=""></a> | ||
| </div> | ||
| <div class="timeline-panel"> | ||
| <div class="timeline-heading"> | ||
| <a href="/on-demand/intro-to-github/"><h2>GitHub 101: Introduction to GitHub</h2></a> | ||
| </div> | ||
| <div class="timeline-body"> | ||
| <p class="text-muted">If you are looking for a quick and fun introduction to GitHub, you’ve found it. This class will get you started using GitHub in less than an hour.</p> | ||
| <p class="text-muted"></p> | ||
| </div> | ||
| </div> | ||
| <!--<div class="timeline-panel-info"> | ||
| <br> | ||
| <p>Class Duration: 60-90 minutes</p> | ||
| <p>Skill Level: Beginner</p> | ||
| </div>--> | ||
|
|
||
| </li> | ||
| <li class="timeline-inverted"> | ||
| <div> | ||
| <a href="/on-demand/github-desktop/"><img class="timeline-image" src="./images/about/forktocat.jpg" alt=""></a> | ||
| </div> | ||
| <div class="timeline-panel"> | ||
| <div class="timeline-heading"> | ||
| <a href="/on-demand/github-desktop/"><h2>GitHub 102: Using GitHub Desktop</h2></a> | ||
| </div> | ||
| <div class="timeline-body"> | ||
| <p class="text-muted">Learn how to use GitHub Desktop to copy a repository to your computer, track changes and communicate with GitHub.</p> | ||
| </div> | ||
| </div> | ||
| <!--<div class="timeline-body-info"> | ||
| <br> | ||
| <p>Class Duration: 60-90 minutes</p> | ||
| <p>Skill Level: Intermediate</p> | ||
| <p>Pre-reqs: GitHub 101</p> | ||
| </div>--> | ||
| </li> | ||
| <li> | ||
| <div> | ||
| <img class="timeline-image" src="./images/about/collabocats.jpg" alt=""> | ||
| </div> | ||
| <div class="timeline-panel"> | ||
| <div class="timeline-heading"> | ||
| <!--<a href="/on-demand/github-cli/"><h2>GitHub 103: Using GitHub on the Command Line</h2></a>--> | ||
| <h2>GitHub 103: Using GitHub on the Command Line</h2> | ||
| </div> | ||
| <div class="timeline-body"> | ||
| <p class="text-muted">Coming soon!</p> | ||
| </div> | ||
| </div> | ||
| <!--<div class="timeline-panel-info"> | ||
| <br> | ||
| <p>Class Duration: 60-90 minutes</p> | ||
| <p>Skill Level: Intermediate</p> | ||
| <p>Pre-reqs: GitHub 101</p> | ||
| </div>--> | ||
| </li> | ||
| <li class="timeline-inverted"> | ||
| <div> | ||
| <img class="timeline-image" src="./images/about/inspectocat.jpg" alt=""> | ||
| </div> | ||
| <div class="timeline-panel"> | ||
| <div class="timeline-heading"> | ||
| <h2>Advanced Git Commands</h2> | ||
| </div> | ||
| <div class="timeline-body"> | ||
| <p class="text-muted">Coming soon!</p> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="timeline-inverted"> | ||
| <div> | ||
| <img class="timeline-image" src="./images/about/welcometocat.png" alt=""> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,221 @@ | ||
| /*! | ||
| * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com) | ||
| * Code licensed under the Apache License v2.0. | ||
| * For details, see http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| .timeline { | ||
| position: relative; | ||
| padding: 0; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .timeline:before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 40px; | ||
| width: 2px; | ||
| margin-left: -1.5px; | ||
| background-color: #f1f1f1; | ||
| } | ||
|
|
||
| .timeline>li { | ||
| position: relative; | ||
| margin-bottom: 50px; | ||
| min-height: 50px; | ||
| } | ||
|
|
||
| .timeline>li:before, | ||
| .timeline>li:after { | ||
| content: " "; | ||
| display: table; | ||
| } | ||
|
|
||
| .timeline>li:after { | ||
| clear: both; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel { | ||
| float: right; | ||
| position: relative; | ||
| width: 100%; | ||
| padding: 0 20px 0 100px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel:before { | ||
| right: auto; | ||
| left: -15px; | ||
| border-right-width: 15px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel:after { | ||
| right: auto; | ||
| left: -14px; | ||
| border-right-width: 14px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel-info { | ||
| float: left; | ||
| padding: 0 20px 0 250px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel-info:before { | ||
| right: auto; | ||
| left: -15px; | ||
| border-right-width: 15px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel-info:after { | ||
| right: auto; | ||
| left: -14px; | ||
| border-right-width: 14px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| .timeline>li .timeline-image { | ||
| z-index: 100; | ||
| position: absolute; | ||
| left: 0; | ||
| width: 80px; | ||
| height: 80px; | ||
| margin-left: 0; | ||
| border: 7px solid #f1f1f1; | ||
| border-radius: 100%; | ||
| text-align: center; | ||
| color: #fff; | ||
| background-color: #{{ site.data.template.color.primary }}; | ||
| } | ||
|
|
||
| .timeline>li p{ | ||
| margin-top: 12px; | ||
| font-size: 14px; | ||
| line-height: 17px; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel { | ||
| float: right; | ||
| padding: 0 20px 0 100px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel:before { | ||
| right: auto; | ||
| left: -15px; | ||
| border-right-width: 15px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel:after { | ||
| right: auto; | ||
| left: -14px; | ||
| border-right-width: 14px; | ||
| border-left-width: 0; | ||
| } | ||
|
|
||
| .timeline>li:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .timeline .timeline-heading h4 { | ||
| margin-top: 0; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .timeline .timeline-heading h4.subheading { | ||
| text-transform: none; | ||
| } | ||
|
|
||
| .timeline .timeline-body>p, | ||
| .timeline .timeline-body>ul { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .timeline .timeline-body-info>p { | ||
| padding-left: 150px; | ||
| padding-right: 10px; | ||
| } | ||
|
|
||
| @media(min-width:768px) { | ||
| .timeline:before { | ||
| left: 50%; | ||
| } | ||
|
|
||
| .timeline>li { | ||
| margin-bottom: 100px; | ||
| min-height: 100px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel { | ||
| float: left; | ||
| width: 41%; | ||
| padding: 0 20px 20px 30px; | ||
| text-align: right; | ||
| } | ||
|
|
||
| .timeline>li .timeline-image { | ||
| left: 50%; | ||
| width: 100px; | ||
| height: 100px; | ||
| margin-left: -50px; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel { | ||
| float: right; | ||
| padding: 0 30px 20px 20px; | ||
| text-align: left; | ||
| } | ||
| } | ||
|
|
||
| @media(min-width:992px) { | ||
| .timeline>li { | ||
| min-height: 150px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel { | ||
| padding: 0 20px 20px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-image { | ||
| width: 150px; | ||
| height: 150px; | ||
| margin-left: -75px; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel { | ||
| padding: 0 20px 20px; | ||
| } | ||
| } | ||
|
|
||
| @media(min-width:1200px) { | ||
| .timeline>li { | ||
| min-height: 170px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-panel { | ||
| padding: 0 20px 20px 100px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-image { | ||
| width: 170px; | ||
| height: 170px; | ||
| margin-left: -85px; | ||
| } | ||
|
|
||
| .timeline>li .timeline-image h4 { | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .timeline>li.timeline-inverted>.timeline-panel { | ||
| padding: 0 100px 20px 20px; | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.