Skip to content

Instantly share code, notes, and snippets.

@Steph-harris

Steph-harris/About css

Created June 9, 2015 03:32
Show Gist options
  • Save Steph-harris/dcdc3a3f32cadb83f0b6 to your computer and use it in GitHub Desktop.
Save Steph-harris/dcdc3a3f32cadb83f0b6 to your computer and use it in GitHub Desktop.
Download ZIP
Ex. 7 (Bootstrap)
Raw
About css
/*about_styles.css*/
* {box-sizing: border-box;}
body {
background-color: #f5f2f2;
color: #008080;
}
.container {
width:80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
background-image: url("../img/purple.jpg");
background-size: contain;
text-decoration: none;
}
.image {
display: inline-block;
float: left;
margin-top: 35px;
}
.column {
border: 4px ridge #008080;
background-color: #330033;
display: inline-block;
width: 37%;
padding: 0 20px;
margin-left: 50%;
}
.intro {
position: relative;
padding: 20px 15px 0px 20px;
margin: 35px 10px 0px 35px;
}
.skills {
position: relative;
float:right;
margin: 35px 0px 20px 20px;
padding-right: 20px;
}
.main_text {
border: 4px ridge #008080;
background-color: #330033;
clear: both;
padding: 2px 15px;
position: relative;
top:35px;
left: -21px;
width: 50%;
margin-left: 25%;
}
#skill_list {
padding: 0 0 0 30px;
margin-left: 0px;
}
/*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;
}
.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 h3 {
text-align: center;
text-transform: uppercase;
}
Raw
contact css
/*contact_styles.css*/
.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;
background-color: #330033;
}
.email, .number, .address, .image_one, .image_two, .image_three {
display: inline-block;
position: relative;
}
.email, .number, .address {
padding: 5px;
}
.image_one, .image_two, .image_three {
margin-top: 25px;
margin-bottom: 15px;
}
.image_one {
left: 10%
}
.image_two {
left: 23%;
}
.image_three {
left: 36%;
}
.email {
left: 4%;
}
.number {
left: 15%;
}
.address {
left: 26%;
}
span:hover {
color:gray;
background-color: white;
}
Raw
Contact html
<!Doctype Html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Bootstrap 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'>
<link rel="stylesheet" style="text/css" href="css/style.css" >
<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/about_styles.css">
<!--jQuery for Bootstrap-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--Bootstrap Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Contact Info</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Contact Info</h1>
<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>
<div class="image_one"><img src="img/email.jpg" alt="pic of email"></div>
<div class="image_two"><img src="img/phone.jpg" alt="pic of telephone"></div>
<div class="image_three"><img src="img/snailmail.jpg" alt="pic of mailbox"></div>
<br>
<div class="email">
<h3><span class="glyphicon glyphicon-king"></span>Steph.harris21@gmail.com</h3>
</div>
<div class="number">
<h3><span class="glyphicon glyphicon-queen"></span>XXX-616-8505</h3>
</div>
<div class="address">
<h3><span class="glyphicon glyphicon-knight"></span>Union and Central Ave <br>Stratford, NJ 08084</h3>
</div>
<!--Add Facebook, Twitter, and LinkedIn?-->
</div><!--end of div class container-->
</body>
</html>
Raw
FAQ css
/*faq.css*/
.panel-default>.panel-heading {
font-family: Lucida Bright, Georgia, serif;
background-color: #330033;
margin-top: 5px;
}
.panel-body {
font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
font-size: 1em;
font-weight: 600;
background-color: #EEDC82;
color: #330033;
}
.panel-title {
background-color: silver;
color: #008080;
}
span {
color: black;
}
#accordion a:hover, span:hover {
color:silver;
background-color: white;
}
.panel-body a {
color:teal;
}
Raw
FAQ html
<!--FAQ.Html-->
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--Bootstrap Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" style="text/css" href="css/style.css" >
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" style="text/css" href="css/about_styles.css">
<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href="css/faq.css">
<title>Frequently Asked Q's</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>F.A.Q's</h1>
<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>
<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">
Aksjrveiruv sdksfsv skdjvner evfev sviu snre vrveru. Drjnrviw wriuwn wrwu wfn wejfn .
</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">
Sdksdcs fveue viuvev. kD wwn cuwc wein aksjn akcaj.
</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">
Sdksdcs fveue viuvev. kD wwn cuwc wein aksjn akcaj.
</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">
Sdksdcs fveue viuvev. kD wwn cuwc wein aksjn akcaj.
</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="http://painter-mildred-27247.bitballoon.com/contact">Contact Page</a> for the best ways to get in touch with me. Sdksdcs fveue viuvev. kD wwn cuwc wein aksjn akcaj.
</div>
</div>
</div>
</div><!--end panel group-->
</div><!--end container div-->
</body>
</html>
<!--Correct code for "closed accordion:
<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="false" aria-controls="collapseOne" class="collapsed"><span class="glyphicon glyphicon-expand"></span>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false">
<div class="panel-body">
Aksjrveiruv sdksfsv skdjvner evfev sviu snre vrveru. Drjnrviw wriuwn wrwu wfn wejfn .
</div>
</div>
</div>"-->
Raw
Style css
/*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;
}
.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