Skip to content

Instantly share code, notes, and snippets.

@Steph-harris

Steph-harris/Masterstyle.css

Created July 9, 2015 22:09
Show Gist options
  • Save Steph-harris/de528d16e7431f8a514a to your computer and use it in GitHub Desktop.
Save Steph-harris/de528d16e7431f8a514a to your computer and use it in GitHub Desktop.
Download ZIP
Ex. 15 Refactored CSS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stephanie Harris Web</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.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'>
<!-- Custom styles for this template go here -->
<link rel="stylesheet" style="text/css" href="css/Masterstyle.css">
<!--jQuery for Bootstrap-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--JQuery media script-->
<script src="js/jquery.media.js" type="text/javascript"></script>
<!--Bootstrap Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- 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=".navbar">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--navbar starts here-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar header">
<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 class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">Work<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class=""><a href="#work_1">Work 1</a></li>
<li class=""><a href="#work_2">Work 2</a></li>
</ul>
</li>
<li class=""><a href="#faq">FAQ</a></li>
</ul>
<div class="projectname">
<a href="#">Stephanie Harris</a>
</div>
</div>
</div><!--end navbar header-->
</div><!--end nav container fluid-->
</nav><!--navbar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/space.jpg" alt="image of black space station" class="img-responsive">
<div class="carousel-caption">
<h1>Stephanie Harris <br> Web Design
</h1>
<h3 >"In the void of darkness, there is always beauty to be found"
</h3>
<p>In Web Development, an empty screen is the start of every amazing finished product.
</p>
</div>
</div>
<div class="item">
<img src="img/stormtrooper.jpg" alt="pic of Star Wars stormtrooper rising from beneath computer keyboard" class="img-responsive">
<div class="carousel-caption hidden-xs">
<h1>Stephanie Harris <br> Web Design</h1>
<h3>"There will always be an obstacle to anything worth doing..."
</h3>
<p>Building a page from scratch is a journey, filled with moments that almost beg for surrender...
</p>
</div>
</div>
<div class="item">
<img src="img/water.jpg" alt="pic of dark water drops" class="img-responsive">
<div class="carousel-caption hidden-xs">
<h1>Stephanie Harris <br> Web Design</h1>
<h3>"But there is also always help for those bold enough to ask"</h3>
<p>Luckily, building web pages is not a solo act, and our greatest resource, the internet, is always available.
</p>
</div>
</div>
</div><!--end of class carousel-inner-->
<!--controls-->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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-->
<hr>
</div>
</div>
<!-- Example row of columns -->
<div class="container" id="goals">
<div class="col-xs-12 col-md-4">
<h2>Portfolio Content</h2>
<p>My portfolio shows a small sample size of the tools I would use to make your website into a responsive masterpiece. The most popular Bootstrap components and JQuery plug-ins, such as <a href="#home" title="Carousel Example" id="item1">Carousel</a> and <a href="#faq" title="Parallax Example" data-toggle="tooltip">Parallax</a> are used in abundance to give you an idea of the many options from which you can choose.</p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button></p>
</div>
<div class="col-xs-12 col-md-4">
<h2>Your Project Goals</h2>
<p>What are you looking for in your website? Do you have a particular <a href="http://getbootstrap.com/components/" title="glyphicon homepage" data-toggle="tooltip" id="item2">glyph</a> that you're dying to implement? No one knows your website needs better than you, so I strive to make my design as close to your ideal as possible. From conceptual beginning through finished design, you will have the final say. I'm not finished until you are satisfied.</p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button></p>
</div>
<div class="col-xs-12 col-md-4">
<h2>The Finish Line</h2>
<p>When your page is live you will have a well designed, fully responsive (and most importantly, bug free!) product to show your potential customers. Additional site maintenance can also be arranged.</p>
<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button></p>
</div>
</div>
<!-- /container -->
<div class="container" id="about">
<div class="header">
<h1>About Me</h1>
</div>
<div class="row" id="about_body">
<div class="image col-xs-8 col-xs-offset-2 col-sm-9 col-sm-offset-4 col-md-4 col-md-offset-2 col-lg-2 col-lg-offset-0"><img src="img/beach.jpg" alt="Jersey Shore pic" class="img-responsive">
</div>
<div class="intro column col-xs-6 col-sm-6 col-md-5 col-md-offset-4 col-lg-5 col-lg-offset-0">
<h2>The Basics</h2>
<p>I am a late 20's career changer trying to break into a new industry in the least amount of time, but with the maximum amount of effort possible.
</p>
</div>
<div class="skills column col-xs-6 col-sm-6 col-md-5 col-md-offset-3 col-lg-5 col-lg-offset-0">
<h3>My Skills
</h3>
<ul id="skill_list">
<li>Html</li>
<li>CSS</li>
<li>Writing/Editing</li>
<li>Music Performance, Conducting and Theory</li>
<li>Baseball and Basketball Scorebooking</li>
</ul>
</div>
<div class="main_text col-xs-12 col-sm-9 col-sm-offset-2 col-md-6 col-md-offset-0 col-lg-8 col-lg-offset-2">
<h3>The "<em>Fuller</em>" Story</h3>
<p>Until very recently, I thought that my life's goal was to become a full-time church musician. To that end I received both a B.A. and a Master's Degree in music. After months of feeling like I had maybe chosen the wrong career, I decided to make a drastic change and pursue web development instead. It has been less than a year since I started down this path, but I already feel much happier and excited than I have been in awhile. I don't know what the future holds, but I want to at least give myself a strong footing in this field if it is what I am meant to do.
</div>
<div class="video col-xs-12 col-sm-4 col-sm-offset-3 col-md-5 col-md-offset-4 col-lg-4 col-lg-offset-4">
<iframe width="390" height="285" src="https://www.youtube.com/embed/dNnZ0FTmPfg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!--end container-fluid about-->
<div class="container-fluid" id="contact">
<div class="header">
<h1>Contact Info
</h1>
</div>
<div class="contact_info col-md-7 col-lg-7">
<div class="col-xs-12 col-md-6 col-lg-4" id="image_one">
<img src="img/email.jpg" class="img-responsive" alt="pic of email">
<div class="email">
<h3><span class="glyphicon glyphicon-inbox"></span> Steph.harris21<br>@gmail.com</h3>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4" id="image_two">
<img src="img/phone.jpg" class="img-responsive" alt="pic of telephone">
<div class="number">
<h3><span class="glyphicon glyphicon-phone"></span> XXX-616-8505</h3>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-4" id="image_three">
<img src="img/snailmail.jpg" class="img-responsive" alt="pic of mailbox">
<div class="address">
<h3><span class="glyphicon glyphicon-pencil"></span> Union and Central Ave <br>Stratford, NJ 08084</h3>
</div>
</div>
</div>
<div class="contact_form col-md-5 col-lg-5">
<form class="form-inline">
<div class="form-group">
<label for="name">First Name</label>
<input type="text" maxlength="12" id="name" title="Enter your first name into the textbox" placeholder="Enter name here" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" maxlength="14" id="phone" title="Enter phone number" placeholder="Enter 10 digit phone #" class="form-control">
</div>
</form>
<form>
<div class="form-group">
<label for="useremail">*Email</label>
<input type="email" minlength="7" id="useremail" title="Enter your complete email address; check for correct spelling!" placeholder="Enter your email address" class="form-control" required="required">
</div>
<div class="form-group">
<label for="usermessage">*Your Message</label>
<textarea minlength="25" id="usermessage" title="Leave a brief, but detailed message" placeholder="Your message here" class="textbox" required="required" style="resize:none" cols="65" rows="5"></textarea>
<button id="submit" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
<!--Add Facebook, Twitter, and LinkedIn?-->
</div>
<div class="container-fluid" id="work_1">
<div class="header">
<h1>Work</h1>
</div>
<div class="row" id="first">
<div class="col-xs-12 col-md-6">
<img src="img/carousel1.png" class="img-responsive">
</div>
<div class="example col-xs-12 col-md-6">
<h3>Example #1</h3>
<p>I'm new to this, so I don't have a ton of examples just yet, but I'm getting there! This is my first fully responsive, static site, and I am very proud of it! This is a picture of my bootstrap carousel (the first picture in my carousel anyway). </p>
</div>
</div>
<div class="row" id="second">
<div class="col-xs-12 col-md-6">
<img src="img/about.png" class="img-responsive">
</div>
<div class="example col-xs-12 col-md-6">
<h3>Example #2</h3>
<p>My about page was an exercise in layout. I had a lot of interesting relationships between the individual boxes before I figured out uniform margin and padding settings. This page was also the most fun to make responsive because it enabled me to use several different breakpoints. I've since simplified the layout and decreased the breakpoints to make the page more readable.</p>
</div>
</div>
</div><!--End of work 1 Container div-->
<div class="container-fluid" id="work_2">
<div class="header">
<h1>Work</h1>
</div>
<div class="row" id="third">
<div class="col-xs-12 col-md-6">
<img src="img/contact.png" class="img-responsive">
</div>
<div class="example col-xs-12 col-md-6">
<h3>Example #3</h3>
<p>My contact section introduced bootstrap glyphicons (the little icons in black before my actual contact info). The trick for this was to make my columns line up both full screen and at different breakpoints. </p>
</div>
</div>
<div class="row" id="fourth">
<div class="col-xs-12 col-md-6">
<img src="img/faq.png" class="img-responsive">
</div>
<div class="example col-xs-12 col-md-6">
<h3>Example #4</h3>
<p>This one was a particularly difficult idea to implement, mostly because there is a ton of code that goes into an accordion and it is very simple to make a mistake that will cause it not to work. Luckily, I was able to get it and style it the way I want (which also took some time to figure out!).</p>
</div>
</div>
</div><!--End of work 2 Container div-->
<div class="container" id="faq">
<div class="header">
<h1>F.A.Q's</h1>
</div>
<div class="row">
<div class="faqsubheader">
<h2 class="learn-more">Learn More</h2>
</div>
<!--Large modal-->
<div class="modal-button">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-modal-window"></span> Curriculum Vitae</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">CV</h4>
</div>
<div class="modal-body">
<iframe id="modalframe" src="Docs/Resume for Dice.pdf"></iframe>
</div>
</div>
</div>
</div>
</div>
<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-expand"></span>
What were you doing before Web Development?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">
<div class="panel-body">
I was actually working as a church music director, which basically means leading worship and worship teams, directing bell and vocal choirs, etc. After years of trying (and failing) to find full-time church work in my home state, I decided that it might be time to try another field. I started to teach myself how to code using codecademy, signed up for CareerFoundry's web dev course, and the rest is history.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed"><span class="glyphicon glyphicon-expand"></span>
Who are your typical clients?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" >
<div class="panel-body">
Anyone who wants my services!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false"><span class="glyphicon glyphicon-expand"></span>
How long does it take you to make a new website?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
It really depends on how complicated the layout is, but I can usually make at least a mockup within a few days.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-expand"></span>
What are your fees?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
My fees are competitive and fair, but again they are based off of the difficulty of the website. After we have discussed your site needs, I will give you a quote.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-expand"></span>
How can I request a proposal?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
See my <a href="#contact">Contact Section</a> for the best ways to get in touch with me. Email will likely get the quickest response.
</div>
</div>
</div>
</div><!--end panel group-->
</div><!--end of container-->
<footer>
<div class="fb-share-button" data-href="https://www.facebook.com/stephanie.harris.35574" data-layout="button_count"></div>
<div class="fb-follow" data-href="https://www.facebook.com/stephanie.harris.35574" data-width="450" data-height="35" data-layout="standard" data-show-faces="true">
</div>
<div class="twitter-follow">
<a href="https://twitter.com/steph_harris21" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @steph_harris21</a>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="copyright">&copy Stephanie Harris 2015</div>
</footer>
<!-- ================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, funtion () {
window.location.hash = href;
});
return false;
});
</script>
<script>
$(function() {
$('#item1').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Raw
Masterstyle.css
/*Master Style Sheet*/
* {box-sizing: border-box;}
body {
background-color: #2b2c29;
color: #307D7E;
}
/*Main Typography*/
h1, h2, h3 {
font-family: 'Open Sans', Futura, Helvetica, Arial, sans-serif;
color: #f5f2f2;
text-transform: uppercase;
text-decoration: underline;
text-align: center;
}
p, li {
font-family: 'Lora', Georgia, Times, Times New Roman, serif;
}
/*Buttons, Glyphicons, and Effects*/
.projectname a:link{
color: #9d9d9d;
}
.projectname a:hover {
color: #fff;
}
.projectname a:visited {
color: #008080;
}
.nav a:hover, .dropdown-menu>li>a:hover, {
color:#FFB00F;
font-weight: bold;
text-decoration: none;
}
.btn-default {
position: relative;
left: 35%;
}
#submit {
background-color: #023DF9;
color: #fff;
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
display: block;
margin-top: 10px;
left:33%;
}
.modal-header span {
color: black;
}
.modal-button {
float: right;
padding: 10px;
}
.panel-heading span {
color: black;
}
span {
color: white;
}
#accordion a:hover, span:hover {
color:gray;
background-color: white;
}
/*Navigation Bar*/
.nav {
font-size: .9em;
top: 0;
left:31%;
z-index: 1;
float: right;
}
.navbar .header {
margin-bottom: 0;
border:none;
background-color: #222;
}
.navbar-inverse .navbar-nav>li>a {
padding:15px;
letter-spacing: 0.05em;
transition: color 700ms;
-webkit-transition: color 700ms;
}
.projectname {
text-transform: uppercase;
padding-top: 10px;
}
.projectname a:link{
color: #9d9d9d;
}
.projectname a:hover {
color: #fff;
}
.projectname a:visited {
color: #008080;
}
.dropdown-menu {
background-color: #2b2c29;
}
.nav ul {
margin: 0;
}
.nav ul li {
display: inline-block;
background-color: #2b2c29;
text-transform: uppercase;
padding: 10px 20px;
float: left;
font-size: 14px;
line-height: 1.428;
}
a, .dropdown-menu>li>a {
color:#008080;
text-decoration: underline;
}
.nav a:hover, .dropdown-menu>li>a:hover, {
color:#FFB00F;
font-weight: bold;
text-decoration: none;
}
/*General Page */
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
#about, #contact, #faq {
margin-top:2%;
width:100%;
}
#about {
background-image: url("../img/lines.png");
background-attachment: fixed;
background-size: cover;
}
#contact {
background-image: url("../img/wood.jpg");
background-attachment: fixed;
background-size: cover;
padding-top: 4%;
padding-bottom: 12%;
}
#faq {
background-image: url("../img/chair-Optimized.jpg");
background-attachment: fixed;
background-size: cover;
padding-top: 4%;
padding-bottom: 8%;
}
/*Home Page*/
.jumbotron {
padding: 0px;
background-color: transparent;
color: #FFFFDF;
margin-bottom: 0;
}
.jumbotron .container {
margin-top: 2em;
width:100%;
}
.jumbotron h1 {
text-decoration: none;
margin-bottom: 5%;
}
.jumbotron p {
text-align: center;
margin-bottom: 1em;
font-size: 1.3em;
}
.row {
width: 80%;
margin-left: 10%;
margin-top: 22%;
}
.row p {
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
-webkit-margin-before: 0;
}
.btn-default {
position: relative;
left: 35%;
}
.item h3, .item p {
background-color: #010f14;
color: #FFF;
}
.carousel-indicators {
top: 8%;
}
.carousel-inner
{
height:106%;
}
.carousel-caption {
top: 6%;
}
.jumbotron .container-fluid {
top:0;
left:0;
width:100%;
padding-left: 0px;
padding-right: 0px;
background-position:center;
background-size:cover;
}
#goals {
margin-bottom: 2%;
font-size: 18px;
}
/*About Page*/
#about {
padding-top: 4%;
padding-bottom: 9%;
}
#about .header {
margin-bottom: 1%;
}
#about_body {
margin-top: 0;
margin-left: 0%;
border:none;
background-color: transparent;
width: 100%;
}
#about_body h2 {
color: #fff;
}
.container {
width:80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
background-size: contain;
text-decoration: none;
}
.image {
display: inline-block;
float: left;
margin-top: 2%;
}
.column {
border: 4px ridge #008080;
display: inline-block;
padding: 0 20px;
margin: 3% 0%;
}
.intro {
position: relative;
padding: 1% 2%;
margin: 2% 0%;
}
.intro p {
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
-webkit-margin-before: 0;
}
.skills {
position: relative;
margin: 3% 0%;
margin: 2% 0%;
}
#skill_list {
padding: 0 0 0 10%;
margin-left: 0px;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.main_text {
border: 4px ridge #008080;
padding: 2px 15px;
margin-top: 1%;
position: relative;
}
.video {
margin-top: 3%;
}
/*Contact Page*/
.contact_info, .contact_form {
padding-bottom: 2%;
margin-top: 3%;
}
.contact_info {
overflow: hidden;
}
.form-control {
width:80%;
}
label {
display:block;
}
.header, .email, .number, .address {
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
border: 4px ridge #008080;
}
.email, .number, .address {
padding: 1%;
margin-top: 5%;
}
#image_one, #image_two, #image_three {
margin-bottom: 2%;
padding-left: 5%;
}
.header {
margin-bottom: 5%;
}
.email {
left: -12%;
}
.number {
left: 4%;
}
.address {
left: -10%;
}
/*Work Page(s)*/
#work_1, #work_2 {
padding-top: 4%;
}
#work_1 .header, #work_2 .header {
margin-bottom: 1%;
}
#first, #second, #third, #fourth {
margin-top: 1%;
}
.example h3 {
margin-top: 0;
}
/*FAQ Page*/
#faq .header {
margin-bottom: 4%;
}
.learn-more {
text-align: left;
float: left;
}
#faq .row {
margin-top: 1%;
}
.modal-body {
height:500px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
}
.panel {
border: none;
}
.panel-group{
width:90%;
margin-left: 5%;
}
.panel-group .panel {
margin-bottom: -6px;
}
.panel-default>.panel-heading {
font-family: Lucida Bright, Georgia, serif;
background-color: #2b2c29;
margin-top: 5px;
}
.panel-default {
background-color: transparent;
}
.panel-title {
background-color: silver;
color: #008080;
}
.panel-body {
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 1.5em;
font-weight: 600;
background-color: silver;
color: #330033;
padding: 15px 30px;
}
.panel-body a {
color:teal;
}
/*Footer*/
footer {
padding: 2%;
}
.twitter-follow {
display: inline-block;
}
.fb-follow.fb_iframe_widget{
top:5px;
}
.copyright {
float:right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment