Created
March 18, 2015 05:56
-
-
Save janetferguson/87e910f3adbabe72cf9f to your computer and use it in GitHub Desktop.
Exercise 10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Janet Ferguson - Full Stack Web Developer | Rubyist</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> | |
| <!-- Bootstrap core CSS --> | |
| <link href="css/bootstrap.css" rel="stylesheet" /> | |
| <!-- Custom styles for this template go here --> | |
| <link href="css/styles.css" rel="stylesheet" /> | |
| <!-- Google fonts --> | |
| <link href="http://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" /> | |
| <link href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic" rel="stylesheet" type="text/css" /> | |
| <link href="http://fonts.googleapis.com/css?family=Fira+Sans:400,500italic" rel="stylesheet" type="text/css" /> | |
| <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet" type="text/css" /> | |
| <link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css' /> | |
| <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> | |
| <!--[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" data-stellar-background-ratio="3"> | |
| <!-- navbar starts here --> | |
| <div 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> <!-- end navbar-header --> | |
| <div class="navbar-collapse collapse"> | |
| <ul id="left" class="nav nav-tabs navbar-nav" role="tablist"> | |
| <li><a href="#index">Home</a></li> | |
| </ul> | |
| <ul id="right" class="nav nav-tabs navbar-nav" role="tablist"> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a id="portfolio" href="#work">My Work</a> | |
| <ul class="submenu"> | |
| <li><a href="https://github.com/janetferguson">GitHub</a></li> | |
| <li><a href="https://bitbucket.org/janetferguson">Bitbucket</a></li> | |
| <li><a href="#work">Portfolio</a></li> | |
| </ul> | |
| </li> | |
| <li><a id="freq-asked" href="#faq">FAQ</a></li> | |
| </ul> | |
| </div> <!-- end navbar-collapse collapse --> | |
| </div> <!-- end nav container-fluid --> | |
| </div> | |
| <!-- end navbar --> | |
| <!-- Carousel --> | |
| <div class="container" id="index"> | |
| <div class="container-fluid"> | |
| <div class="row-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"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <img class="img-responsive" src="img/tulips_hero_image.jpg" alt="tulips"> | |
| <div class="carousel-caption"> | |
| <h1 class="name">Janet Ferguson</h1> | |
| <p class="job-title">Full Stack Web Developer & Rubyist</p> | |
| <h1 class="tagline" id="tagline-1">Life is too short to do anything other than follow your passion.</h1> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img class="img-responsive" src="img/flower_hero_image.jpg" alt="flowers"> | |
| <div class="carousel-caption"> | |
| <h1 class="name">Janet Ferguson</h1> | |
| <p class="job-title">Full Stack Web Developer & Rubyist</p> | |
| <h1 class="tagline" id="tagline-2">What can I help you portray to the world?</h1> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img class="img-responsive" src="img/beach_hero_image.jpg" alt="beach"> | |
| <div class="carousel-caption"> | |
| <h1 class="name">Janet Ferguson</h1> | |
| <p class="job-title">Full Stack Web Developer & Rubyist</p> | |
| <h1 class="tagline" id="tagline-3">The world needs your ideas.</h1> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></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="false"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div> <!-- end row-fluid div --> | |
| </div> <!-- end container-fluid div --> | |
| <!-- end Carousel --> | |
| <div class="butterflies"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| </div> <!-- end butterflies div --> | |
| </div> <!-- end container div home --> | |
| <div class="container" id="about"> | |
| <div class="header"> | |
| <h1>About Janet</h1> | |
| </div> <!-- end header div --> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="image col-md-4 col-xs-12"> | |
| <img class="img-responsive" src="img/janet2.png" alt="janet"/> | |
| </div> <!-- end image div --> | |
| <div class="intro col-md-4 col-xs-6"> | |
| <h3>Who is Janet?</h3> | |
| <p>I'm a Full Stack Web Developer specializing in Ruby on Rails!</p> | |
| <img src="img/ruby-black.png" alt="ruby-pic" /> | |
| </div> <!-- end intro div --> | |
| <div class="skills col-md-3 col-md-offset-1 col-xs-6"> | |
| <h3>My Skills</h3> | |
| <ul id="skill-list"> | |
| <li>♡ Ruby on Rails</li> | |
| <li>♡ Python</li> | |
| <li>♡ JavaScript/jQuery</li> | |
| <li>♡ HTML5</li> | |
| <li>♡ CSS3</li> | |
| <li>♡ I'll finish this list later! :)</li> <!-- Maybe the skills will be deserving of a page of their own later. :D --> | |
| </ul> | |
| </div> <!-- end skills div --> | |
| </div> <!-- end row div --> | |
| </div> <!-- end container-fluid div --> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="main-text col-md-12 col-xs-12"> | |
| <h3>More About Me</h3> | |
| <p>For some odd reason, I thrive on being overwhelmed (for lack of a better word.) What that means is, I love dabbling in many projects at once. It makes me feel alive and more focused. Despite having multiple projects going simultaneously...every project is completed to its fullest extent.</p> | |
| <p>I am a non-cookie cutter, anti-9-to-5 kind of person. Office politics and rushed lunch breaks are not my thing. I work hard (smart, actually), but I also maximize my "me" time and family time.</p> | |
| <p>Besides Ruby on Rails and other web development projects, my interests gravitate toward world travel (especially if I can mix travel with a web dev project!), food, tea, biking, beachgoing, integrating the concept of <a href="http://www.kaizen.com/about-us/definition-of-kaizen.html">kaizen</a> into my life, dogs, and most of all -- my 11 year old son, Alex.</p> | |
| </div> <!-- end main_text class div --> | |
| </div> <!-- end row div --> | |
| </div> <!-- end container-fluid div --> | |
| </div> <!-- end container div about --> | |
| <div class="butterflies"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| </div> <!-- end butterflies div --> | |
| <div class="container" id="contact"> | |
| <div class="header"> | |
| <h1>Contact Janet</h1> | |
| </div> <!-- end header div --> | |
| <div class="contact"> | |
| <h2 class="contact-me">Web development is a true passion of mine. Contact me if you'd like to hire me for a project, if you'd like to collaborate on a project, or even just to say hello.</h2> | |
| <br> | |
| <div class="container-fluid"> | |
| <div class="row-fluid center info"> | |
| <div id="glyphs"> | |
| <span class="glyphicon glyphicon-send col-md-4 col-xs-12"></span> | |
| <span class="glyphicon glyphicon-phone col-md-4 col-xs-12"></span> | |
| <span class="glyphicon glyphicon-globe col-md-4 col-xs-12"></span> | |
| </div> <!-- end glyphs div --> | |
| <div id="info"> | |
| <h3 class="e col-md-4 col-xs-12">janet.ferguson[at]me.com</h3> | |
| <h3 class="p col-md-4 col-xs-12">(323) 489-8604</h3> | |
| <h3 class="l col-md-4 col-xs-12">Redondo Beach, CA</h3> | |
| </div> <!-- end info div --> | |
| </div> <!-- end row center info div --> | |
| </div> <!-- end contact div --> | |
| </div> <!-- end container-fluid div --> | |
| </div> <!-- end container div contact --> | |
| <div class="butterflies"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| </div> <!-- end butterflies div --> | |
| <div class="container" id="work"> | |
| <div class="container-fluid"> | |
| <div class="header"> | |
| <h1>Portfolio</h1> | |
| <p>Some recent Ruby on Rails projects:</p> | |
| </div> <!-- end header div --> | |
| <div class="row-fluid"> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| <div class="img-responsive col-md-3 col-xs-6"><img src="img/ror_folder_128_v3.png" /></div> | |
| </div> <!-- end row-fluid --> | |
| </div> <!-- end container-fluid div --> | |
| </div> <!-- end container div work --> | |
| <div class="butterflies"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| </div> <!-- end butterflies div --> | |
| <div class="container" id="faq"> | |
| <div class="header"> | |
| <h1>Frequently Asked Questions</h1> | |
| </div> <!-- end header div --> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="panel-group col-md-8 col-xs-12" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-heart"></span> | |
| Why did you decide to become a web developer? | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| I decided it was time to get involved in a career that makes me excited to get up each day. My old career was dragging me down and brought too much negativity into my life. | |
| </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"><span class="glyphicon glyphicon-time"></span> | |
| What is your average project turnaround time? | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| It really depends on the depth of the project and how many other clients' projects I have going at the same time. Send me an email for an up-to-date answer. | |
| </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"><span class="glyphicon glyphicon-info-sign"></span> | |
| What did you do before becoming a web developer? | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| I was an Apple Certified Technician. | |
| </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-console"></span> | |
| What is Ruby? | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseFour" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <a href="http://en.wikipedia.org/wiki/Ruby_%28programming_language%29">Ruby</a> is a dynamic, object-oriented programming langauage developed in the mid '90s by Japanese computer scientist and software programmer Yukihiro "Matz" Matsumoto. | |
| </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-thumbs-up"></span> | |
| Why do you like Ruby so much? | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseFive" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| It's a lot of fun to program in Ruby! What better reason to love it? | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end row-fluid div --> | |
| </div> <!-- end container-fluid div --> | |
| </div> <!-- end container div faq --> | |
| <div class="butterflies"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p> | |
| </div> <!-- end butterflies div --> | |
| <!-- | |
| ================================================== --> | |
| <!-- Can place script tags with JavaScript files here --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script src="js/jquery.stellar.min.js"></script> | |
| <script type="text/javascript"> | |
| $.stellar({ | |
| verticalOffset: 200, | |
| horizontalScrolling: false, | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| position: relative; | |
| background: url("../img/butterflies.png") repeat; | |
| background-attachment: fixed; | |
| background-size: cover; | |
| } | |
| .butterflies p { | |
| visibility: hidden; | |
| } | |
| /* Navigation CSS Below */ | |
| .navbar-header { | |
| padding-right: 1%; | |
| } | |
| .navbar { | |
| background-color: #000; | |
| opacity: 1; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 65px; | |
| padding: 0; | |
| z-index: 15; | |
| margin: 0; | |
| border-radius: 0; | |
| border: 0px solid transparent; | |
| } | |
| .navbar .container-fluid { | |
| padding: 0; | |
| background: #000; | |
| } | |
| .navbar ul { | |
| float: right; | |
| display: inline; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .navbar ul li { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| background: #000; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 0; | |
| margin-right: -5px; | |
| cursor: pointer; | |
| font-family: 'Lato', sans-serif; | |
| color: #fff; | |
| -webkit-transition: all 0.2s; | |
| -moz-transition: all 0.2s; | |
| -ms-transition: all 0.2s; | |
| -o-transition: all 0.2s; | |
| transition: all 0.2s; | |
| } | |
| .navbar ul li ul { | |
| padding: 0; | |
| position: absolute; | |
| top: 64px; | |
| left: 0; | |
| width: 150px; | |
| display: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| margin-left: -1px; | |
| visibility: hidden; | |
| -webkit-transiton: opacity 0.1s; | |
| -moz-transition: opacity 0.1s; | |
| -ms-transition: opacity 0.1s; | |
| -o-transition: opacity 0.1s; | |
| -transition: opacity 0.1s; | |
| } | |
| .navbar ul li ul li { | |
| background: black; | |
| display: inline-block; | |
| color: white; | |
| text-align: center; | |
| padding: 8px; | |
| padding-top: 16px; | |
| margin: auto; | |
| width: 110px; | |
| height: 55px; | |
| border: 1px solid #fff; | |
| } | |
| .navbar ul li ul li:hover { | |
| background: #fff; | |
| color: #000; | |
| font-weight: bold; | |
| padding: 7px; | |
| padding-top: 15px; | |
| border: 1px solid #fff; | |
| width: 110px; | |
| opacity: 0.9; | |
| } | |
| .navbar ul li:hover ul { | |
| display: inline-block; | |
| height: 65px; | |
| visibility: visible; | |
| border: 1px solid transparent; | |
| width: 110px; | |
| } | |
| .navbar ul li ul:hover li:hover { | |
| background: #000; | |
| color: #fff; | |
| padding: 6px; | |
| padding-top: 14px; | |
| border: 1px solid #fff; | |
| width: 110px; | |
| opacity: 0.9; | |
| } | |
| .navbar ul li ul li a { | |
| margin: auto; | |
| padding: 3px 2px; | |
| width: 110px; | |
| color: #fff; | |
| } | |
| .navbar ul li ul li a:hover { | |
| margin: auto; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 2px 1px; | |
| border: 1px solid transparent; | |
| color: #fff; | |
| width: 110px; | |
| } | |
| .navbar ul li a { | |
| color: #fff; | |
| padding: 25px 20px; | |
| height: 65px; | |
| -webkit-transition: color 200ms; | |
| transition: color 200ms; | |
| } | |
| .navbar ul li a:hover { | |
| height: 65px; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 24px 19px; | |
| border: 1px solid transparent; | |
| border-radius: 0; | |
| color: #000; | |
| } | |
| .navbar #left { | |
| float: left; | |
| padding-left: 0px; | |
| } | |
| .navbar .nav > .active > a { | |
| border-radius: 0; | |
| border: 0px solid transparent; | |
| background: #fff; | |
| color: black; | |
| height: 65px; | |
| } | |
| .navbar .nav > .active > a:hover { | |
| border-radius: 0; | |
| border: 0px solid transparent; | |
| background: #fff; | |
| color: black; | |
| height: 65px; | |
| } | |
| #index .container-fluid { | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| height: 100%; | |
| width: 100%; | |
| padding: 0; | |
| } | |
| /* Carousel */ | |
| .item { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .carousel-caption { | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| } | |
| .glyphicon-chevron-left, .glyphicon-chevron-right { | |
| color: white; | |
| opacity: 0.45; | |
| } | |
| .name { | |
| color: white !important; | |
| font-family: 'Rock Salt', cursive; | |
| font-size: 4em; | |
| opacity: 0.65; | |
| position: absolute; | |
| top: 70px; | |
| left: 25px; | |
| } | |
| .job-title { | |
| font-family: 'Fira Sans', sans-serif; | |
| font-size: 15px; | |
| font-weight: bolder; | |
| padding: 0; | |
| color: black; | |
| position: absolute; | |
| top: 170px; | |
| left: 30px; | |
| } | |
| .tagline { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: bold; | |
| color: white; | |
| opacity: 0.75; | |
| } | |
| #tagline-1 { | |
| font-size: 3em; | |
| color: purple; | |
| opacity: 0.45; | |
| display: block; | |
| padding-left, padding-right: 0; | |
| padding-top: 240px; | |
| margin: auto; | |
| width: 66.6%; | |
| text-align: center; | |
| } | |
| #tagline-2 { | |
| color: white; | |
| opacity: 0.65; | |
| display: block; | |
| padding-left, padding-right: 0; | |
| padding-top: 308px; | |
| margin: auto; | |
| font-size: 4em; | |
| text-align: center; | |
| } | |
| #tagline-3 { | |
| font-size: 4em; | |
| color: aqua; | |
| opacity: 0.35; | |
| padding-top: 408px; | |
| padding-left: 25px; | |
| text-align: left; | |
| } | |
| .carousel-indicators { | |
| padding-bottom: 0; | |
| bottom: 40px; | |
| } | |
| #index a { | |
| color: #9b111e; | |
| } | |
| .container { | |
| width: 100%; | |
| padding: 0; | |
| } | |
| /* About CSS Below */ | |
| #about .container-fluid { | |
| padding-bottom: 25px; | |
| } | |
| #about .container-fluid .row-fluid .col-md-3, #about .container-fluid .row-fluid .col-md-4, #about .container-fluid .row-fluid .col-xs-12, #about .container-fluid .row-fluid .col-md-12 { | |
| display: flex; | |
| flex-flow: row; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| align-content: center; | |
| padding-top: 50px; | |
| } | |
| .img-responsive { | |
| display: block; | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| #about h2, h3 { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: purple; | |
| font-weight: bold; | |
| opacity: 0.45; | |
| } | |
| #about .header { | |
| background-color: black; | |
| display: block; | |
| margin-left, margin-right: auto; | |
| padding: 85px 0; | |
| } | |
| #about .header h1 { | |
| font-family: 'Rock Salt', cursive; | |
| color: white; | |
| text-align: center; | |
| padding: 0; | |
| } | |
| .image { | |
| margin-top: 50px; | |
| } | |
| .intro { | |
| margin-top: 50px; | |
| padding: 0; | |
| } | |
| .intro h2 { | |
| text-align: center; | |
| font-size: 2em; | |
| } | |
| .intro p { | |
| text-align: center; | |
| font-size: 1em; | |
| font-family: 'Lato', sans-serif; | |
| } | |
| .intro img { | |
| display: block; | |
| margin-left, margin-right: auto; | |
| } | |
| .skills { | |
| margin-top: 68px; | |
| padding-top: 0; | |
| } | |
| .skills h3 { | |
| text-align: center; | |
| font-size: 2em; | |
| padding-top: 0; | |
| margin-top: 0; | |
| padding-left: 0; | |
| } | |
| #skill-list { | |
| font-size: 1em; | |
| font-weight: 400; | |
| color: black; | |
| list-style: none; | |
| list-style-position: inside; | |
| padding-left: 0; | |
| } | |
| #skill-list li { | |
| list-style-type: none; | |
| } | |
| .main-text { | |
| clear: both; | |
| padding-top: 5%; | |
| padding-left: 10%; | |
| margin: auto; | |
| width: 90%; | |
| } | |
| .main-text p { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: #7A3D5C; | |
| font-size: 2em; | |
| width: 90%; | |
| font-weight: 400; | |
| text-align: justify; | |
| } | |
| .main-text p:hover { | |
| color: purple; | |
| cursor: default; | |
| } | |
| .main-text h3 { | |
| padding-bottom: 1%; | |
| font-size: 3em; | |
| } | |
| .main-text p:last-child { | |
| padding-bottom: 10%; | |
| } | |
| /* Contact CSS Below */ | |
| #contact { | |
| position: relative; | |
| width: 100%; | |
| padding-bottom: 200px; | |
| } | |
| #contact .header { | |
| background-color: black; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| #contact .header h1 { | |
| font-family: 'Rock Salt', cursive; | |
| color: white; | |
| text-align: center; | |
| padding: 100px 0; | |
| margin: auto; | |
| width: 100%; | |
| } | |
| .contact { | |
| width: 100%; | |
| margin: auto; | |
| padding-top: 50px; | |
| } | |
| .center { | |
| width: 70%; | |
| margin: auto; | |
| position: relative; | |
| } | |
| .contact h2 { | |
| text-align: center; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: purple; | |
| padding-top: 50px; | |
| margin: auto; | |
| } | |
| .contact h3 { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: black; | |
| display: inline; | |
| } | |
| .contact .contact-me { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: purple; | |
| opacity: 0.45; | |
| font-weight: bold; | |
| margin: auto; | |
| width: 70%; | |
| padding-top: 5px; | |
| padding-left: 10px; | |
| background: white; | |
| } | |
| .info { | |
| width: 90%; | |
| margin: auto; | |
| background: white; | |
| } | |
| #info h3 { | |
| color: black; | |
| font-weight: 300; | |
| opacity: 1; | |
| } | |
| .glyphicon-send, .glyphicon-phone, .glyphicon-globe { | |
| width: 33%; | |
| } | |
| .e, .p, .l { | |
| width: 33%; | |
| } | |
| #glyphs span { | |
| font-size: 3em; | |
| margin: auto; | |
| text-align: center; | |
| color: black; | |
| } | |
| #contact span:hover { | |
| color: gray; | |
| cursor: pointer; | |
| } | |
| .contact h3:hover { | |
| color: #DDA0DD!important; | |
| cursor: default; | |
| } | |
| .nav span { | |
| cursor: pointer; | |
| } | |
| #contact .container-fluid .row-fluid .col-md-4, #contact .container-fluid .row-fluid .col-md-12, #contact .container-fluid .row-fluid .col-xs-12 { | |
| display: flex; | |
| flex-flow: row; | |
| justify-content: center; | |
| align-items: center; | |
| align-content: center; | |
| } | |
| /* Work CSS Below */ | |
| #work img { | |
| padding: 0; | |
| } | |
| #work h1 { | |
| font-family: 'Rock Salt', cursive; | |
| display: block; | |
| padding-left, padding-right: 0; | |
| padding-top: 55px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: -2px; | |
| width: 33.3%; | |
| text-align: center; | |
| color: white; | |
| } | |
| #work p { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: bold; | |
| opacity: 0.45; | |
| color: purple; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 33.3%; | |
| text-align: center; | |
| color: #FAEBD7; | |
| padding-top: 30px; | |
| padding-bottom: 65px; | |
| } | |
| #work .container-fluid .row-fluid .col-md-3, #work .container-fluid .row-fluid .col-xs-6 { | |
| display: flex; | |
| flex-flow: row-fluid; | |
| justify-content: center; | |
| align-items: center; | |
| align-content: center; | |
| } | |
| #work .container-fluid { | |
| padding: 0 0 65px 0; | |
| margin-bottom: 125px; | |
| } | |
| #work .header { | |
| background-color: black; | |
| margin: 0; | |
| width: 100%; | |
| padding-top: 20px; | |
| } | |
| /* FAQ CSS Below */ | |
| #faq { | |
| width: 100%; | |
| padding-bottom: 125px; | |
| } | |
| #faq .container-fluid .row-fluid .col-md-8, #faq .container-fluid .row-fluid .col-xs-12 { | |
| display: flex; | |
| flex-flow: column; | |
| justify-content: center; | |
| align-items: center; | |
| align-content: center; | |
| width: 100%; | |
| padding: 0; | |
| } | |
| #faq .container-fluid { | |
| padding-top: 35px; | |
| } | |
| #faq .header { | |
| background-color: black; | |
| margin: 0; | |
| padding: 10px 0 0 0; | |
| width: 100%; | |
| } | |
| #faq .header h1 { | |
| font-family: 'Rock Salt', cursive; | |
| color: white; | |
| text-align: center; | |
| padding: 100px 0 90px 0; | |
| margin: auto; | |
| width: 100%; | |
| } | |
| .panel-group { | |
| margin: auto; | |
| width: 50%; | |
| } | |
| .panel-heading { | |
| background-color: white!important; | |
| } | |
| .panel-title { | |
| font-family: 'Lato', sans-serif; | |
| color: purple; | |
| opacity: 0.45; | |
| font-weight: bold; | |
| } | |
| .panel-title a:hover { | |
| text-decoration: none; | |
| color: gray; | |
| font-weight: bold; | |
| } | |
| .panel-body { | |
| font-family: 'Architects Daughter', cursive; | |
| color: black; | |
| background-color: white; | |
| font-size: 18px; | |
| } | |
| .panel { | |
| border: 2px solid black; | |
| width: 600px; | |
| } | |
| #accordion { | |
| padding-top: 50px; | |
| padding-left: 20px; | |
| } | |
| .glyphicon { | |
| padding: 3px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment