Skip to content

Instantly share code, notes, and snippets.

@AttyC

AttyC/carousel.css

Created April 19, 2015 13:49
Show Gist options
  • Save AttyC/3dca7bc52811fabf877a to your computer and use it in GitHub Desktop.
Save AttyC/3dca7bc52811fabf877a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atty'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="css/carousel.css" rel="stylesheet"/>
<link href="css/panel.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 data-spy="scroll" data-target="#myScrollSpy" data-offset="20">
<!-- navbar starts here -->
<div id="main_nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="myScrollSpy" >
<ul class="navbar nav" >
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Work<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#work">Work 1</a></li>
<li><a href="#work">Work 2 </a></li>
</ul>
</li>
<li><a href="#about">About</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--end navbar collapse -->
</div><!--end navbar container-->
</div><!-- navbar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container-fluid">
<!-- carousel starts-->
<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/bridge.jpg" alt="snow covered mountains">
<div class="carousel-caption">
<h3>Natural, honest values</h3>
<p class="hidden-xs">I value integrity and make it a priority to be clear and direct with my clients.</p>
</div>
</div>
<div class="item">
<img src="img/building.jpg" alt="plant desk">
<div class="carousel-caption">
<h3>Clean, clear style</h3>
<p class="hidden-xs">Let us find a design that catches your personality and the user's imagination</p>
</div>
</div>
<div class="item">
<img src="img/blackboard.jpg" alt="">
<div class="carousel-caption">
<h3>Full-stack skills</h3>
<p class="hidden-xs">HTML, PHP, Bootstrap - tba</p>
</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 anchor" id="intro"><!--container intro -->
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="inner"><!--background color to text only--> <h2>Portfolio Concept</h2>
<ol>
<li>CareerFoundry web achievements</li>
<li>Side projects for friends and local businesses</li>
<li>My blog, <a href="https://attycool.wordpress.com/">https://attycool.wordpress.com/</a></li>
</ol>
</div><!-- end inner div-->
</div>
<div class="col-md-4 col-xs-12">
<div class="inner"><!--background color to text only-->
<h2>Project Goals</h2>
<p>Complete each exercise and deepen knowledge and understanding.</p>
</div><!-- end inner div-->
</div>
<div class="col-md-4 col-xs-12">
<div class="inner"><!--background color to text only-->
<h2>Course Goals</h2>
<p>Two goals</p>
<ol>
<li>Become a freelance developer</li>
<li>Work in a part-remote position to give me time with my young family.</li>
</ol>
</div><!-- end inner dive-->
</div>
</div>
</div> <!-- /container intro-->
<div class="container anchor" id="work"><!--container work-->
<h1>Work I've done</h1>
<div class="row">
<div class="col-md-3 col-xs-6">
<h2>Blog</h2>
<img src="img/white_door_small.jpg" alt="white door" class="img-responsive center-block"/>
</div>
<div class="col-md-3 col-xs-6">
<h2>Photography</h2>
<img src="img/white_door_small.jpg" alt="white door" class="img-responsive center-block"/>
</div>
<div class="col-md-3 col-xs-6">
<h2>Community Play</h2>
<img src="img/white_door_small.jpg" alt="white door" class="img-responsive center-block"/>
</div>
<div class="col-md-3 col-xs-6">
<h2>Consulting</h2>
<img src="img/white_door_small.jpg" alt="white door" class="img-responsive center-block"/>
</div>
</div><!-- end row -->
</div><!-- /container work-->
<div class="container anchor" id="about"><!--container about -->
<h1>I build websites</h1>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="inner"><!-- inner class background for text only -->
<p>Hi,</p>
<p>I'm Atty Cronin and I'm ready to talk to you about building your website.</p>
<p>I cut my teeth on a travel web project, learning coding in HTML, CSS & PHP, project managing, HTML emails, SEO. </p>
<p>Moving to into the digital side of magazine publishing meant a huge learning curve, with a new set of skills, such as version control (subversion), OO PHP and Agile, which I loved.
</p>
</div><!-- /inner class -->
</div>
<div class="col-md-6 col-xs-12" id="skill_list">
<div class="inner"><!-- inner class background for text only -->
<h2>My Skills</h2>
<img src="img/attyc.jpg"class="img-responsive" alt="Atty Cronin portrait">
<ul>
<li>HTML</li>
<li>PHP</li>
<li>CSS</li>
<li>Bootstrap</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Ruby on Rails</li>
<li>Etc.</li>
</ul>
</div><!-- /inner class -->
</div>
</div>
</div><!-- /container about-->
<div class="container anchor" id="faq"><!--container faq -->
<h1>FAQs</h1>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-cloud"></span>How did you get into web design?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>I was working as a travel consultant and got involved in a project to enable customers to book flights online (this was way back when). From there, I helped with further IT projecs then moved departments to assist the mareting team to launch a brand new website. I was invlived in all aspects of the projects and learned a huge amount about coding and web project cycles.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-cloud"></span>
What is your turnaround time?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>The short answer? This will depend entirely on the site we're building. We'll discuss your requirements and see what we can do.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-cloud"></span>How will we set a budget?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>I will discuss your budget with you and we will come up with a plan that fits within that, with room for contingency.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="glyphicon glyphicon-cloud"></span>Who are your clients?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>I have built sites for a photographer, a reflexologist, Mandarin teacher and psychologist. See their testimonials <a href="#"> here</a>.</p>
</div>
</div>
</div><div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<span class="glyphicon glyphicon-cloud"></span>
What do you do for fun?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>I sing with a covers band and host music classes for babies and toddlers. Smile.</p>
</div>
</div>
</div>
</div>
</div><!-- /col-md-6 col-xs-12 -->
</div><!--/row div -->
</div><!-- /container faq-->
<div class="container anchor" id="contact"><!--container contact-->
<h1>Get in touch</h1>
<div class="row row-centered">
<div class="col-md-6 col-xs-12 col-centered">
<ul>
<li><span class="glyphicon glyphicon-envelope"></span> <a href="www.google.com">email: atty****@******.com</a></li>
<li><span class="glyphicon glyphicon-phone-alt"></span>phone (+44) 1234 987</li>
<li><span class="glyphicon glyphicon-map-marker"></span>address: 55 High Street, Leipzig</li>
</ul>
</div>
<div class="col-md-6 col-xs-12 col-centered" id="map">
<img src="img/map_Walthamstow.jpg" alt="location map" class="img-responsive center-block"/>
</div>
</div><!-- /container contact-->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
panel.css
.panel, a.navbar-brand {
font-family: 'Special Elite', cursive;
}
/* end Bootstrap overrides */
#faq .row div.panel-default>.panel-heading {
background-color: white;
border-radius: inherit;
border: none;
}
.panel-body p {
color: #081802;
font-size: 1.3em;
}
.panel-title {
color: #dc2c2c;
font-weight: bold;
font-size: 1.4em;
}
#faq .row div {
background: none;
}
Raw
styles.css
/* base */
* {
box-sizing: border-box;
}
/* end base */
/* layout */
body {
background-color: inherit;
position: relative;
}
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
ul {
list-style-type:
padding-left: 1em;
}
ol {
padding-left: 1em;
}
h1 {
color:#fff;
font-size: 2.5em;
}
.navbar ul li a:hover,
.navbar .navbar-header a:hover {
color: #081802;
}
.inner {
background-color: #fff;
padding: 1em;
}
li.active,
li.hover,
li.focus {
background-color: #081802;
}
.jumbotron {
margin: 0;
background: inherit;
padding-bottom: 20px;
}
.jumbotron h1 {
margin: 2% 0;
}
.jumbotron p {
color: #dc2c2c;
}
.row {
clear: both;
margin-bottom: 2em;
}
.col-md-4 {
padding-top: 1em;
}
.container-fluid {
padding: 0;
}
.anchor h1 {
margin: auto;
padding: 2em 0 1em 0;
}
/* end layout */
/* nav */
.nav {
float: right;
padding-top: 1em;
}
#main_nav {
background-color: white;
}
.navbar {
margin: 0;
border: none;
}
.navbar ul li {
padding: 0.5em 1em;
display: inline;
}
.navbar ul li a, .navbar a.navbar-brand {
display: inline;
color: #dc2c2c;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 400ms;
font-size: 1.4em;
font-weight: bold;
}
button.navbar-toggle {
background-color: #081802;
}
.navbar>.container-fluid .navbar-brand {
margin-left: 2.5em;
}
/* end nav */
.container {
margin: 1em auto;
background: url("../img/pipe.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header h1 {
text-align: center;
padding: 0.5em;
}
#skill_list {
text-align: center;
}
#skill_list ul {
padding: 0 3em;
text-align: left;
list-style-type: none;
}
.col-md-4, .col-md-6, .col-xs-12, .col-xs-6 {
background-color: white;
}
#intro .col-md-4, #intro .col-xs-12, #about .col-xs-12 {
background: none;
}
/* Typography */
h1,
h2,
h3,
p,
li {
font-family: 'Special Elite', cursive;
}
h1, h2 {
color: #fff;
text-shadow: -1px 0 black, 0 3px black, 2px 0 black, 0 -1px black;
}
.col-md-4 p,
.col-md-4 li,
.main-text h3,
#intro h2,
#about p,
#about li,
#about h2 {
font-size: 1.2em;
font-weight: bold;
color: #081802;
margin: 0.5em;
text-shadow: none;
}
#work .row div {
background: none;
}
#work .row img {
border: 5px solid white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
#work h2. #about h2 {
margin: 0.5em 0;
}
#contact {
background-image: url("../img/pipe.jpg");
background-attachment: fixed;
background-size: cover;
height: 700px;
margin-bottom: 100px;
}
#contact div {
margin: auto;
}
#contact ul {
list-style-type: none;
}
#contact li {
font-size: 1.2em;
}
#contact li a {
margin-left: -0.25em;
}
#contact div#map {
margin-top: 1em;
}
.glyphicon {
margin-right: 0.7em;
vertical-align: text-top;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
text-align: left;
}
#work h2 {
text-align: center;
}
#skill_list img {
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment