Skip to content

Instantly share code, notes, and snippets.

@AttyC

AttyC/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save AttyC/10ade5389c9a3823377d to your computer and use it in GitHub Desktop.
Save AttyC/10ade5389c9a3823377d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Antonia's Web Portfolio</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/normalize.css" rel="stylesheet" />
<!-- Bootstrap core CSS -->
<!--<link rel="stylesheet" href="css/bootstrap.css"/>-->
<link href="css/styles.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' 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="nav">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="jumbotron">
<div class="container-fluid home">
<!-- carousel -->
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#homeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#homeCarousel" data-slide-to="1"></li>
<li data-target="#homeCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!--<img src="img/icemountains.jpg" alt="snow covered mountains">-->
<img src="img/wallroofold.jpg" alt="snow covered mountains">
<div class="carousel-caption">
<h3>Values - Natural, honest</h3>
<p>I value integrity and make it a priority to be clear and direct with my clients.</p>
<img src="img/attylogored_250.png" alt="Atty C logo" class="logo">
</div>
</div>
<div class="item">
<img src="img/DeathtoStock_Wired7.jpg" alt="plant desk">
<div class="carousel-caption">
<h3>Style - Clean, clear, striking</h3>
<p>Let us find a design that catches your personality and the user's imagination</p>
<img src="img/attylogored_250.png" alt="Atty C logo" class="logo">
</div>
</div>
<div class="item">
<img src="img/wallroofgreen.jpg" alt="green brick wall chimney">
<div class="carousel-caption">
<h3>Skills</h3>
<p>HTML, PHP, Bootstrap - tba</p>
<img src="img/attylogored_250.png" alt="Atty C logo" class="logo">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- end carousel -->
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I will include: </p>
<ol>
<li>All new projects from this course.</li>
<li>New side projects for friends and local businesses</li>
<li>My blog, <a href="https://attycool.wordpress.com/">https://attycool.wordpress.com/</a></li>
</ol>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals</h2>
<p>To complete the exerciese well and read around the subjects, making use of various excellent resources available on the internet.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Two goals</p>
<ol>
<li>Become a freelance developer</li>
<li>Land a part time / part remote working job so I can spend time with other developers but be at home some of the time for my childen</li>
</ol>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
/* base */
* {
box-sizing: border-box;
}
/* end base */
/* layout */
html {
/* background: url("../img/pebblesHero90.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; */
}
body {
background-color: inherit;
}
.jumbotron {
margin: 0;
background-color: inherit;
}
.jumbotron h1 {
color: #444;
margin-bottom: 2%;
}
.jumbotron p {
color: #dc2c2c;
}
.row {
clear: both;
}
.col-md-4 {
padding-top: 10px;
}
.container-fluid {
padding: 0;
}
/* end layout */
/* nav */
.nav {
position: fixed;
z-index: 1;
width: 100%;
padding-top: 10px;
background-color: rgba(210, 226, 242, 0.34);
}
.nav ul {
float: right;
margin-right: 5em;
}
.nav ul li {
display: inline;
padding: 10px 20px;
}
.nav ul li a {
color: #dc2c2c;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 400ms;
font-size: 1.2em;
font-weight: bold;
}
.nav a:hover, .panel-title a:hover {
color: #081802;
text-decoration: none;
}
/* end nav */
.container {
margin: 0 auto;
/*border-left: 3px solid #ff2400;*/
}
.header h1 {
text-align: center;
padding: 10px;
}
.image{
display: inline-block;
float: left;
text-align: center;
}
.column {
display: inline-block;
float: left;
width:25%;
padding: 0 20px;
margin-bottom: 40px;
}
.home p {
width:70%;
}
.main-text {
clear: both;
margin-top: 20px;
padding-top: 20px;
background-color: rgba(223, 210, 199, 1);
border: darkgreen 1px dashed;
}
.main-text p {
font-weight: bold;
color: #081802;
}
#skill_list {
margin-left: 50px;
}
.col-md-4, .column {
background-color: rgba(223, 210, 199, 1);
border: darkgreen 1px dashed;
margin-right: 10px;
width: 32%;
}
.contact {
width: 90%;
}
.address {
width: 60%;
}
.address ul {
display: inline-block;
list-style-type: none;
}
.main-section .column {
display: block;
float: none;
}
.map {
position: relative;
}
.glyphicon {
margin-right: 20px;
vertical-align: text-top;
}
/* Typography */
h1,
h2,
h3{
font-family: 'Special Elite', cursive;
}
p,
li {
font-family: 'Special Elite', cursive;
}
.column h2 {
margin-top:0px;
text-align: center;
}
.contact li {
font-size: 2em;
}
.col-md-4 h2, .col-md-4 p, .col-md-4 li {
font-weight: bold;
color: #081802;
margin: 0 20px;
}
.col-md-4 p, .col-md-4 li {
font-size: 1.2em;
}
.panel {
font-family: 'Special Elite', cursive;
}
/* end Bootstrap overrides */
.panel-default>.panel-heading {
background-color: rgba(185, 214, 244, 0.48);
}
.panel-body p {
color: #081802;
font-size: 1.3em;
}
.panel-title {
color: #dc2c2c;
font-weight: bold;
font-size: 1.4em;
}
.panel-title a:hover {
color: #081802;
text-decoration: none;
}
/* carousel */
.carousel-caption {
top: 12em;
margin: 0 auto;
}
.carousel-caption > h3, .carousel-caption > p {
width: 100%;
}
.carousel-caption > h3 {
font-size: 3em;
color: #081802;
margin-top: 0;
}
.carousel-caption > p {
font-size: 2em;
}
.carousel-caption .logo {
width: 250px;
}
.carousel-control .glyphicon {
color:#dc2c2c;
font-size: 2em;
top: 8em;
}
/* end Bootstrap overrides */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment