<!doctype html> <html> <head> <meta charset="utf-8"> <title>Portfolio Site</title> <link href="portfolio.css" rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- conditional comments for old IE 8 and below --> <!--[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]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var ypos,image; function parallax () { ypos = window.pageYOffset; image = document.getElementById('image'); image.style.top = ypos * .0 +'px'; } window.addEventListener('scroll',parallax) </script> </head> <body> <div id="background"> <img id="image" src="portfolio_images/main-image1.png" height="10%" width="100%" /> <a class="ghost" href="http://www.ghostbusters.com/">PORTFOLIO</a> </div> <div class="content"><!--content start--> <div class="row"><!--start div row--> <div class="col-md-4"> <h4 class="text-center">Web Design</h4> <p>Confer<br>with clients<br>in my web design process.</p> <div><img src="portfolio_images/web1.png" width="64" height="64"></div> </div> <div class="col-md-4"> <h4 class="text-center">Coding</h4> <p>Experience in programming<br>languages such as<br>HTML5 and CSS.</p> <div><img src="portfolio_images/css1.png" width="64" height="64"></div> </div> <div class="col-md-4"> <h4 class="text-center">Graphic Design</h4> <p><br>Conveying information<br>through visual solutions.</p> <div><img src="portfolio_images/graphic1.png" width="64" height="64"></div> </div> </div><!--end div row--> </div> <br> <hr width="100%" noshade> </body> </html>
<pre lang="HTML">
@charset "utf-8"; /* CSS Document */ body { max-height: 50%; } *{ margin: 0px; padding: 0px; } #image { position: relative; z-index: -1; max-height: 50%; } #content { height: 750px; width: 100%; margin-bottom: 700px; background-color: #FFFFFF; position: relative; z-index: 1; } .intro { font-family: 'Pacifico', cursive; font-size: 150px; color: #fff; text-align: center; padding-top: 30px; position: static; } .logo { margin: 0 0 0 0; position: fixed; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } .ghost { /* position centered */ display:inline-block; position: relative; top: 10%; left:50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); /* text styles */ font-family: 'Oswald', sans-serif; font-size: 3em; letter-spacing: 0.1em; color:#ebbb13; /* modify text */ text-decoration:none; text-transform:uppercase; text-rendering:optimizeLegibility; /* add a border */ border:0.15em solid #ebbb13; padding:0.4em 0.6em; /* animate the change */ -webkit-transition: color 300ms, background 500ms, border-color 700ms; transition: color 300ms, background 500ms, border-color 700ms; } .ghost:hover { background:#000; border-color:#ebbb13; color:#fff; text-decoration:none; } #background { max-height: 50%; } .row { max-width: 100%; } .text-center { font-family: Oswald; } p { font-family: 'Raleway', sans-serif; text-align: center; font-size:12px; } h3 { text-align: center; }
<div class="text-center"><img src="imageURL"><p>Your text.</p></div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)