Created
January 5, 2016 20:06
-
-
Save Tinusw/36e1d184183035e1f8a0 to your computer and use it in GitHub Desktop.
1.5: Styling fonts & colors - Tinus Wagner
This file contains hidden or 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
| <!doctype html> | |
| <html lang="en"> | |
| <!-- used to declare that page language is english --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Used if you want to build responsive sites! --> | |
| <title> About Me </title> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/about_styles.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|Source+Sans+Pro:400,600|Raleway:400,300,700|Arimo' rel='stylesheet' type='text/css'> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <~[endif]--> | |
| <!-- Code above is used to fix HTML5 support in older browsers --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>About Me</h1> | |
| </div> | |
| <div class="image"> | |
| <img src="img/kitty.jpg" alt="kitten" width="400px"> | |
| </div> | |
| <div class="intro"> | |
| <h2> "The internet couldn't possibly handle that many cats."...We sure showed them. </h2> | |
| <p> that's pretty cool </p> | |
| </div> | |
| <div class="skills-column"> | |
| <h3>My Skills</h3> | |
| <ul id="skill-list"> | |
| <li> Awesome messages </li> | |
| <li> Sick collection of Cats </li> | |
| <li> One very professional dog </li> | |
| </ul> | |
| </div> | |
| <div class="main-text"> | |
| <h3> My Story</h3> | |
| <p> Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin.Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin.Hipster turned professional go-go dancer. I'm like a drug sniffing dog except with a nose for dancin </p> | |
| </div> | |
| </div><!-- end container div --> | |
| </body> | |
| </html> |
This file contains hidden or 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
| * { box-sizing: border-box; } | |
| .container { | |
| width: 80%; | |
| margin: 0 auto; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .image { | |
| display: inline-block; | |
| float: left; | |
| width: 33.3%; | |
| } | |
| .image img { | |
| width: 100%; | |
| } | |
| .intro { | |
| display: inline-block; | |
| float: left; | |
| width: 33.3%; | |
| padding-left: 30px; | |
| padding-bottom: 50px; | |
| padding-right: 10px | |
| } | |
| .skills-column { | |
| display: inline-block; | |
| float: left; | |
| width: 22%; | |
| padding-top: 5px; | |
| padding-right: 20px; | |
| padding-bottom: 50px; | |
| background-color: #5AD4C2; | |
| } | |
| .skills-column h3 { | |
| text-align: center; | |
| } | |
| #skill-list { | |
| margin-left: 10px; | |
| text-align: left; | |
| } | |
| .main-text { | |
| clear: both; | |
| padding-top: 60px; | |
| } | |
| /*Typography*/ | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: 'Raleway', 'Arimo', Arial, sans-serif; | |
| font-weight: 800; | |
| } | |
| .header h1 { | |
| font-size: 3em; | |
| font-weight: 1000; | |
| } | |
| p, | |
| li { | |
| font-family: Georgia, Times, 'Times New Roman', serif; | |
| } | |
| .intro p { | |
| font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; | |
| font-size: 3em; | |
| font-weight: 100; | |
| -webkit-margin-before: 0; | |
| } | |
| .skills-column h3 { | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .main-text h3 { | |
| font-size: 2em; | |
| } | |
| .main-text p { | |
| font-family: 'Arimo', Arial, 'Source Sans Pro', sans-serif; | |
| font-size: 18px; | |
| } | |
| body { | |
| background-color: #fffeea; | |
| color: #34495e; | |
| } | |
This file contains hidden or 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
| <!doctype html> | |
| <html lang="en"> | |
| <!-- used to declare that page language is english --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Used if you want to build responsive sites! --> | |
| <title> Contact </title> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/contact_styles.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Archivo+Narrow|Fira+Sans:400,300|Karla:400,700,400italic' rel='stylesheet' type='text/css'> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <~[endif]--> | |
| <!-- Code above is used to fix HTML5 support in older browsers --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1> Wanna Chat? </h1> | |
| </div> | |
| <div class="notice"> | |
| <h3> I love working on web applications and pretty soon I will nail both HTML and CSS. They're amazing tools that you can do some crazy stuff with. But if you'd like to give me an internship, I probably won't say no!</h3> | |
| </div> | |
| <div class="email"> | |
| <a href="mailto:[email protected]"> Email Me</a> | |
| <p> I'll be waiting :) </p> | |
| </div> | |
| <div class="bye"> | |
| <h2> Talk soon! </h2> | |
| <p> ..or check me out on a few other places </p> | |
| </div> | |
| </div> | |
| </body> | |
| <footer> | |
| <div class="icons"> | |
| <a href="https://twitter.com/thatguytinus"><img src="img/twitter.png" height="50px" width="60px"></a> | |
| <a href="https://github.com/Tinusw"><img src="img/github.png" height="50px"></a> | |
| <a href="https://soundcloud.com/vertelmy"><img src="img/sndcld.jpeg" height="50px"></a> | |
| </div> | |
| </footer> | |
| </html> |
This file contains hidden or 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
| * { box-sizing: border-box; } | |
| html { | |
| background: | |
| linear-gradient( | |
| to right, | |
| rgba(89, 98, 106, 1), | |
| rgba(89, 98, 106, 0.1) | |
| ), url("../img/about_back.jpg") no-repeat center center fixed; | |
| background-size: cover; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| } | |
| .container { | |
| width: 60%; | |
| margin: 0 auto; | |
| } | |
| .header { | |
| text-align: center; | |
| padding-top: 15%; | |
| padding-bottom: 2%; | |
| margin-bottom: 15px; | |
| } | |
| .notice { | |
| text-align: center; | |
| padding-bottom: 1%; | |
| } | |
| .email { | |
| display: inline-block; | |
| text-align: center; | |
| width: 10vw; | |
| margin-left: 42%; | |
| margin-right: 45%; | |
| padding: 1%; | |
| border: 8px solid #70819A; | |
| } | |
| } | |
| .email p { | |
| position: absolute; | |
| width: 100vw; | |
| left: calc(-50vw + 50%); | |
| } | |
| .bye { | |
| text-align: center; | |
| padding-top: 1%; | |
| } | |
| .bye p { | |
| position: relative; | |
| margin-top: 1%; | |
| padding-top: 14%; | |
| } | |
| footer { | |
| width: 60%; | |
| margin: 0 auto; | |
| } | |
| .icons { | |
| text-align: center; | |
| } | |
| /*Typography*/ | |
| .container h1 { | |
| color: white; | |
| } |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>Tinus Wagner. Developer</title> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| <!-- Custom styles for this template go here --> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <!-- Main jumbotron for a primary marketing message or call to action --> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <h1>Tinus Wagner. Webmaster</h1> | |
| <br> | |
| <p><strong>Hopefully serving all of your web development needs (soon)</strong> </p> | |
| <p>Hi there! I'm Tinus and I'm a budding programmer. I'm immensely interested in building interactive sites, web-based audio tools and toys, and visually stunning sites. Let's do this.</p> | |
| </div><!-- /container --> | |
| <div class="container"> | |
| <p> | |
| <a href="about.html">About Me </a> | |
| <a href="contact.html"> Contact Me</a> | |
| </div> | |
| </div><!-- /jumbotron --> | |
| <div class="container3"> | |
| <!-- Example row of columns --> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2>Portfolio Concept</h2> | |
| <p>For my portfolio I've collected a few sites that I really like. They're mostly quite minimal and clean. Have a look! </p> | |
| <p><a class="btn btn-default" href="concepts.html" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Project Goals</h2> | |
| <p>Obviously this is just the beginning, but I have a few goals </p> | |
| <p><a class="btn btn-default" href="goals.html" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Course Goals</h2> | |
| <p>Why I'm doing this, what I'd like to do, and where I'd like to end up</p> | |
| <p><a class="btn btn-default" href="course.html" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| </div><!-- /row --> | |
| <hr> | |
| </div> <!-- /container --> | |
| <!-- ============================= --> | |
| <!-- All your JavaScript comes now --> | |
| <!-- ============================= --> | |
| <!-- Bootstrap core JS --> | |
| <!-- Can place script tags with JavaScript files here --> | |
| </body> | |
| </html> |
This file contains hidden or 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
| * { box-sizing: border-box; } | |
| .jumbotron { | |
| background-image: url("../img/landscape.jpg"); | |
| background-size: #%; | |
| } | |
| /*typography*/ | |
| .container { | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment