Created
June 10, 2015 22:45
-
-
Save Steph-harris/0afb8a0936aa44f358cc to your computer and use it in GitHub Desktop.
Ex.8 Background image
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Stephanie Harris Web</title> | |
| <!-- Bootstrap core CSS --> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> | |
| <link style="text/css" href="css/bootstrap.css" rel="stylesheet"> | |
| <link style="text/css" href="css/style.css" rel="stylesheet"> | |
| <link style="text/css" href="css/about_styles.css" rel="stylesheet" > | |
| <link rel="stylesheet" href="css/contact_styles.css" type="text/css" > | |
| <!-- Custom styles for this template go here --> | |
| <!-- Just for debugging purposes. Don't actually copy this line! --> | |
| <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> | |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!--[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.3.0/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>Stephanie Harris</h1> | |
| <p><strong> Webmaster Apprentice.</strong> Info on me and my development as a web specialist. Making the leap from guitarist to GitHub-ist. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="nav"> | |
| <ul> | |
| <li><a href="http://painter-mildred-27247.bitballoon.com">Home</a></li> | |
| <li><a href="http://painter-mildred-27247.bitballoon.com/about">About Me</a></li> | |
| <li><a href="http://painter-mildred-27247.bitballoon.com/contact">Contact Me</a></li> | |
| <li><a href="">Work</a></li> | |
| <li><a href="http://painter-mildred-27247.bitballoon.com/faq">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div class="container"> | |
| <!-- Example row of columns --> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2>Portfolio Concept</h2> | |
| <p>I want to learn how to make beautifully interactive websites. I've been a church musician for almost 5 years, but I'm looking to use my artistic creativity to go in a completely new direction.</p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h2>Project Goals</h2> | |
| <p>My work at church really dies down over the summer, so it is in my best interest to get as much work done during this time as possible. I would like to be done with all my assignments by the end of September so I can avoid working during the pre-Christmas crazy season. </p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h2>Course Goals</h2> | |
| <p>I want to switch careers and become an entry-level developer. I don't <strong>hate</strong> the idea of freelancing, but the entire reason I want to leave my current career is to have more stability, not <em>even more</em> uncertainty!</p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| </div> | |
| <hr> | |
| </div> <!-- /container --> | |
| <!-- | |
| ================================================== --> | |
| <!-- Can place script tags with JavaScript files here --> | |
| </body> | |
| </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
| /*style.css*/ | |
| * {box-sizing: border-box;} | |
| h2 { | |
| color:purple;} | |
| /*.jumbotron { | |
| background-image: url("../img/purple.jpg"); | |
| background-size: contain; | |
| } | |
| .jumbotron h1 { | |
| text-decoration: none; | |
| } | |
| .jumbotron p { | |
| color:#f0f8ff; | |
| }*/ | |
| html { | |
| background: url("../img/stormtrooper.jpg") no-repeat center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| .nav { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| left:65%; | |
| } | |
| .nav ul { | |
| margin: 0; | |
| } | |
| .nav ul li { | |
| display: inline-block; | |
| background-color: #008080; | |
| text-transform: uppercase; | |
| padding: 10px 20px; | |
| float: left; | |
| font-size: 14px; | |
| line-height: 1.428; | |
| } | |
| .nav ul li a{ | |
| letter-spacing: 0.05em; | |
| transition: color 700ms; | |
| -webkit-transition: color 700ms; | |
| } | |
| a { | |
| color:#f0f8ff; | |
| text-decoration: underline; | |
| } | |
| a:hover { | |
| color:#FFB00F; | |
| font-weight: bold; | |
| text-decoration: none; | |
| } | |
| .jumbotron h1 { | |
| color:#f0f8ff; | |
| } | |
| .row { | |
| border: 4px ridge #008080; | |
| background-color: #330033; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment