Created
March 5, 2015 03:07
-
-
Save janetferguson/84b2b09bf9010838cd95 to your computer and use it in GitHub Desktop.
Exercise 7
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" /> | |
| <link href="css/normalize.css" rel="stylesheet" /> | |
| <link href="css/bootstrap.css" rel="stylesheet" /> | |
| <link href="css/about_styles.css" rel="stylesheet" /> | |
| <title>About Janet Full Stack Web Developer | Rubyist</title> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <![endif]--> | |
| <!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' /> | |
| </head> | |
| <!-- All the stuff you can see! :) --> | |
| <body> | |
| <div class="container"> | |
| <div class="nav"> | |
| <ul id="left"> | |
| <li><a href="#">Home</a></li> | |
| </ul> | |
| <ul id="right"> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| <li><a id="portfolio" href="#">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="#">Portfolio</a></li> | |
| </ul> | |
| </li> | |
| <li><a id="faq" href="faq.html">FAQ</a></li> | |
| </ul> | |
| </div> <!-- end nav div --> | |
| <div class="header"> | |
| <h1>About Janet</h1> | |
| </div> <!-- end header div --> | |
| <div class="upper"> | |
| <div class="image column"> | |
| <img src="img/janet2.png" alt="janet"/> | |
| </div> <!-- end image column class div --> | |
| <div class="intro column"> | |
| <h2>Who is Janet?</h2> | |
| <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 column class div --> | |
| <div class="skills column"> | |
| <h2>My Skills</h2> | |
| <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 column class div --> | |
| </div> <!-- end upper class div --> | |
| <div class="main_text"> | |
| <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. <a href="#">See my projects here.</a></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>My home base is in Los Angeles, California, but I've spent a lot of time living in Colorado as well. Both places have their appeal and quirks.</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> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p> | |
| </div> <!-- end main_text class div --> | |
| </div> <!-- end container div --> | |
| </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
| * { box-sizing: border-box; } | |
| body { | |
| position: relative; | |
| } | |
| .container { | |
| width: 90%; | |
| } | |
| .nav { | |
| background-color: black; | |
| opacity: 1; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 65px; | |
| padding: 0; | |
| z-index: 15; | |
| } | |
| .nav ul { | |
| float: right; | |
| display: inline; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .nav ul li { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| background: black; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 20px 0 20px; | |
| margin-right: -4px; | |
| cursor: pointer; | |
| font-family: 'Lato', sans-serif; | |
| color: white; | |
| -webkit-transition: all 0.2s; | |
| -moz-transition: all 0.2s; | |
| -ms-transition: all 0.2s; | |
| -o-transition: all 0.2s; | |
| transition: all 0.2s; | |
| } | |
| .nav ul li ul { | |
| padding: 0; | |
| position: absolute; | |
| top: 55px; | |
| left: 0; | |
| width: 150px; | |
| display: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| margin-left: -1px; | |
| opacity: 0; | |
| visibility: hidden; | |
| -webkit-transiton: opacity 0.2s; | |
| -moz-transition: opacity 0.2s; | |
| -ms-transition: opacity 0.2s; | |
| -o-transition: opacity 0.2s; | |
| -transition: opacity 0.2s; | |
| } | |
| .nav ul li ul li { | |
| background: black; | |
| display: inline-block; | |
| color: white; | |
| text-align: center; | |
| padding: 8px; | |
| padding-top: 14px; | |
| margin: auto; | |
| width: 110px; | |
| height: 55px; | |
| border: 1px solid white; | |
| } | |
| .nav ul li ul li:hover { | |
| background: #ff0960; | |
| padding: 7px; | |
| padding-top: 13px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li:hover ul { | |
| display: inline-block; | |
| opacity: 1; | |
| visibility: visible; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li ul li a { | |
| margin: auto; | |
| padding: 3px 2px; | |
| } | |
| .nav ul li ul li a:hover { | |
| margin: auto; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 2px 1px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li a { | |
| color: white; | |
| padding: 20px 20px; | |
| -webkit-transition: color 600ms; | |
| transition: color 600ms; | |
| } | |
| .nav ul li a:hover { | |
| background-color: #ff0960; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 19px 19px; | |
| border: 1px solid transparent; | |
| } | |
| .nav #left { | |
| float: left; | |
| padding-left: 0px; | |
| } | |
| h2, h3 { | |
| font-family: 'Architects Daughter', cursive; | |
| color: #9b111e; | |
| } | |
| p { | |
| font-family: 'Lato', sans-serif; | |
| color: #7A3D5C; | |
| font-size: 1em; | |
| } | |
| .header { | |
| background-color: black; | |
| margin: -20px -85px; | |
| padding: 12px 0; | |
| } | |
| .header h1 { | |
| font-family: 'Rock Salt', cursive; | |
| color: white; | |
| text-align: center; | |
| padding: 60px 0; | |
| } | |
| .column { | |
| display: inline-block; | |
| width: 30%; | |
| margin: 0 auto; | |
| } | |
| .upper { | |
| padding-top: 50px; | |
| margin: auto; | |
| width: 90%; | |
| padding-left: 5%; | |
| } | |
| .image { | |
| float: left; | |
| width: 30%; | |
| margin: auto; | |
| } | |
| .intro { | |
| padding: 0 18px; | |
| margin: auto; | |
| border: 2px dashed #FF0960; | |
| width: 27%; | |
| height: 230px; | |
| float: left; | |
| } | |
| .intro h2 { | |
| text-align: center; | |
| padding: 0; | |
| } | |
| .intro p { | |
| text-align: center; | |
| font-size: 1em; | |
| } | |
| .intro img { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .skills { | |
| background-color: #FFCCCC; | |
| padding: 10px 50px; | |
| margin: 0 75px; | |
| height: 230px; | |
| width: 27%; | |
| float: left; | |
| } | |
| .skills h2 { | |
| text-align: center; | |
| } | |
| #skill_list { | |
| display: inline; | |
| font-size: 12px; | |
| } | |
| #skill_list li { | |
| list-style-type: none; | |
| } | |
| .main_text { | |
| clear: both; | |
| padding-top: 60px; | |
| margin: auto; | |
| width: 90%; | |
| } | |
| .main_text h3 { | |
| padding-bottom: 15px; | |
| } | |
| .main_text p:last-child { | |
| padding-bottom: 20px; | |
| } |
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" /> | |
| <link href="css/normalize.css" rel="stylesheet" /> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> | |
| <!-- jQuery --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <link href="css/contact_styles.css" rel="stylesheet" /> | |
| <title>Contact Janet Full Stack Web Developer | Rubyist</title> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <![endif]--> | |
| <!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' /> | |
| <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> | |
| <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' /> | |
| </head> | |
| <!-- All the stuff you can see! :) --> | |
| <body> | |
| <div class="container"> | |
| <div class="nav"> | |
| <ul id="left"> | |
| <li><a href="#">Home</a></li> | |
| </ul> | |
| <ul id="right"> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| <li><a id="portfolio" href="#">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="#">Portfolio</a></li> | |
| </ul> | |
| </li> | |
| <li><a id="faq" href="faq.html">FAQ</a></li> | |
| </ul> | |
| </div> <!-- end nav div --> | |
| <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="border"></div> | |
| <div class="center info"> | |
| <div id="one"> | |
| <span class="glyphicon glyphicon-globe col-xs-12"></span><h3 class="col-xs-12">Redondo Beach, CA</h3> <h3 class="col-xs-12">Colorado Springs, CO</h3> | |
| </div> <!-- end div one --> | |
| <br> | |
| <div id="two"> | |
| <span class="glyphicon glyphicon-phone col-xs-3 text-right"></span><h3 class="col-xs-3">+1 323 489 8604</h3> | |
| </div> <!-- end div two --> | |
| <br> | |
| <div id="three"> | |
| <span class="glyphicon glyphicon-send col-xs-3 text-right"></span><h3 class="col-xs-3">janet.ferguson[at]me.com</h3> | |
| </div> <!-- end div three --> | |
| </div> <!-- end center info div --> | |
| </div> <!-- end contact div --> | |
| </div> <!-- end container div --> | |
| </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 { | |
| background-image: url("../img/squared-metal.png"); | |
| background-repeat: repeat; | |
| position: relative; | |
| width: 100%; | |
| } | |
| .container { | |
| width: 100%; | |
| padding: 0; | |
| } | |
| .nav { | |
| background-color: black; | |
| opacity: 1; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 65px; | |
| padding: 0; | |
| z-index: 15; | |
| } | |
| .nav ul { | |
| float: right; | |
| display: inline; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .nav ul li { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| background: black; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 20px 0 20px; | |
| margin-right: -4px; | |
| cursor: pointer; | |
| font-family: 'Lato', sans-serif; | |
| color: white; | |
| -webkit-transition: all 0.2s; | |
| -moz-transition: all 0.2s; | |
| -ms-transition: all 0.2s; | |
| -o-transition: all 0.2s; | |
| transition: all 0.2s; | |
| } | |
| .nav ul li ul { | |
| padding: 0; | |
| position: absolute; | |
| top: 55px; | |
| left: 0; | |
| width: 150px; | |
| display: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| margin-left: -1px; | |
| opacity: 0; | |
| visibility: hidden; | |
| -webkit-transiton: opacity 0.2s; | |
| -moz-transition: opacity 0.2s; | |
| -ms-transition: opacity 0.2s; | |
| -o-transition: opacity 0.2s; | |
| -transition: opacity 0.2s; | |
| } | |
| .nav ul li ul li { | |
| background: black; | |
| display: inline-block; | |
| color: white; | |
| text-align: center; | |
| padding: 8px; | |
| padding-top: 14px; | |
| margin: auto; | |
| width: 110px; | |
| height: 55px; | |
| border: 1px solid white; | |
| } | |
| .nav ul li ul li:hover { | |
| background: #ff0960; | |
| padding: 7px; | |
| padding-top: 13px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li:hover ul { | |
| display: inline-block; | |
| opacity: 1; | |
| visibility: visible; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li ul li a { | |
| margin: auto; | |
| padding: 3px 2px; | |
| } | |
| .nav ul li ul li a:hover { | |
| margin: auto; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 2px 1px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li a { | |
| color: white; | |
| padding: 20px 20px; | |
| -webkit-transition: color 600ms; | |
| transition: color 600ms; | |
| } | |
| .nav ul li a:hover { | |
| background-color: #ff0960; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 19px 19px; | |
| border: 1px solid transparent; | |
| } | |
| .nav #left { | |
| float: left; | |
| padding-left: 0; | |
| } | |
| .header { | |
| background-color: black; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .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: 'Lato', sans-serif; | |
| color: #FF0960; | |
| padding-top: 50px; | |
| margin: auto; | |
| } | |
| .contact h3 { | |
| font-family: 'Lato', sans-serif; | |
| color: black; | |
| display: inline; | |
| } | |
| .contact p { | |
| text-align: center; | |
| font-family: 'Lato', sans-serif; | |
| color: black; | |
| text-transform: uppercase; | |
| padding-top: 60px; | |
| } | |
| .contact .contact_me { | |
| font-family: 'Ubuntu Condensed', sans-serif; | |
| color: #FF0960; | |
| margin: auto; | |
| width: 70%; | |
| padding-top: 5px; | |
| padding-left: 10px; | |
| } | |
| .info { | |
| width: 90%; | |
| margin: auto; | |
| } | |
| span { | |
| font-size: 3em; | |
| margin: auto; | |
| text-align: center; | |
| } | |
| #one, #two, #three { | |
| width: 100%; | |
| font-family: 'Lato', sans-serif; | |
| margin: auto; | |
| } | |
| #one { | |
| width: 70%; | |
| display: inline-block; | |
| margin: 0; | |
| padding-top: 20px; | |
| } | |
| #one h3 { | |
| padding-left: 352px; | |
| padding-top, padding-bottom: 13px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .col-xs-12 { | |
| padding-top: 15px; | |
| } | |
| #two, #three { | |
| display: inline; | |
| width: 80%; | |
| margin: auto; | |
| padding-bottom: 50px; | |
| } | |
| #two { | |
| position: absolute; | |
| left: 65px; | |
| top: 220px; | |
| } | |
| #three { | |
| position: absolute; | |
| left: 430px; | |
| top: 220px; | |
| } | |
| .glyphicon-globe { | |
| margin: auto; | |
| padding-left: 345px; | |
| } | |
| .border { | |
| border-bottom: 1px dotted gray; | |
| width: 80%; | |
| margin: auto; | |
| padding-top: 25px; | |
| } | |
| span:hover, .contact h3:hover { | |
| color: #FF0960; | |
| cursor: default; | |
| } | |
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" /> | |
| <link href="css/normalize.css" rel="stylesheet" /> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> | |
| <!-- jQuery --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <link href="css/faq_styles.css" rel="stylesheet" /> | |
| <title>FAQs Janet Full Stack Web Developer | Rubyist</title> | |
| <!--[if lt IE 9]> | |
| <script src="dist/html5shiv.js"></script> | |
| <![endif]--> | |
| <!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' /> | |
| <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> | |
| <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' /> | |
| </head> | |
| <!-- All the stuff you can see! :) --> | |
| <body> | |
| <div class="container"> | |
| <div class="nav"> | |
| <ul id="left"> | |
| <li><a href="#">Home</a></li> | |
| </ul> | |
| <ul id="right"> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| <li><a id="portfolio" href="#">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="#">Portfolio</a></li> | |
| </ul> | |
| </li> | |
| <li><a id="faq" href="faq.html">FAQ</a></li> | |
| </ul> | |
| </div> <!-- end nav div --> | |
| <div class="header"> | |
| <h1>Frequently Asked Questions</h1> | |
| </div> <!-- end header div --> | |
| <div class="panel-group" 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 container div --> | |
| </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 { | |
| background-image: url("../img/pink-dots.png"); | |
| background-repeat: repeat; | |
| width: 100%; | |
| } | |
| .container { | |
| width: 100%; | |
| padding: 0; | |
| } | |
| .nav { | |
| background-color: black; | |
| opacity: 1; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 65px; | |
| padding: 0; | |
| z-index: 15; | |
| } | |
| .nav ul { | |
| float: right; | |
| display: inline; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .nav ul li { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| background: black; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 20px 0 20px; | |
| margin-right: -4px; | |
| cursor: pointer; | |
| font-family: 'Lato', sans-serif; | |
| color: white; | |
| -webkit-transition: all 0.2s; | |
| -moz-transition: all 0.2s; | |
| -ms-transition: all 0.2s; | |
| -o-transition: all 0.2s; | |
| transition: all 0.2s; | |
| } | |
| .nav ul li ul { | |
| padding: 0; | |
| position: absolute; | |
| top: 55px; | |
| left: 0; | |
| width: 150px; | |
| display: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| margin-left: -1px; | |
| opacity: 0; | |
| visibility: hidden; | |
| -webkit-transiton: opacity 0.2s; | |
| -moz-transition: opacity 0.2s; | |
| -ms-transition: opacity 0.2s; | |
| -o-transition: opacity 0.2s; | |
| -transition: opacity 0.2s; | |
| } | |
| .nav ul li ul li { | |
| background: black; | |
| display: inline-block; | |
| color: white; | |
| text-align: center; | |
| padding: 8px; | |
| padding-top: 14px; | |
| margin: auto; | |
| width: 110px; | |
| height: 55px; | |
| border: 1px solid white; | |
| } | |
| .nav ul li ul li:hover { | |
| background: #ff0960; | |
| padding: 7px; | |
| padding-top: 13px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li:hover ul { | |
| display: inline-block; | |
| opacity: 1; | |
| visibility: visible; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li ul li a { | |
| margin: auto; | |
| padding: 3px 2px; | |
| } | |
| .nav ul li ul li a:hover { | |
| margin: auto; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 2px 1px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li a { | |
| color: white; | |
| padding: 20px 20px; | |
| -webkit-transition: color 600ms; | |
| transition: color 600ms; | |
| } | |
| .nav ul li a:hover { | |
| background-color: #ff0960; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 19px 19px; | |
| border: 1px solid transparent; | |
| } | |
| .nav #left { | |
| float: left; | |
| padding-left: 0; | |
| } | |
| .header { | |
| background-color: black; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .header h1 { | |
| font-family: 'Rock Salt', cursive; | |
| color: white; | |
| text-align: center; | |
| padding: 100px 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: #ff0960; | |
| } | |
| .panel-title a:hover { | |
| text-decoration: none; | |
| font-family: 'Francois One', sans-serif; | |
| opacity: 0.75; | |
| 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; | |
| } |
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> | |
| <!-- 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" /> | |
| <!-- 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> | |
| <div class="nav"> | |
| <ul id="left"> | |
| <li><a href="#">Home</a></li> | |
| </ul> | |
| <ul id="right"> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| <li><a id="portfolio" href="#">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="#">Portfolio</a></li> | |
| </ul> | |
| </li> | |
| <li><a id="faq" href="faq.html">FAQ</a></li> | |
| </ul> | |
| </div> <!-- end nav div --> | |
| <!-- Main jumbotron for a primary marketing message or call to action --> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <div class="intro"> | |
| <h1>Janet Ferguson</h1> | |
| <p>Full Stack Web Developer & Rubyist</p> | |
| <img class="ruby" src="img/ruby-pink.png" /> | |
| <p><span>Placeholder text</span></p> | |
| <p><span>Placeholder text</span></p> | |
| </div> <!-- end intro div --> | |
| </div> <!-- end container div --> | |
| </div> | |
| <div class="container"> | |
| <!-- Example row of columns --> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2>Portfolio Concept</h2> | |
| <p>My portfolio will be showcasing a variety of Rails powered applications that demonstrate superior user experience, simple designs, and good, clean code written in Ruby. And coolness in general.</p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h2>Project Goals</h2> | |
| <p>Every project will receive my utmost concentration and effort. I tend to be a perfectionist, so I can see myself spending significant time tweaking small details for each portfolio piece.</p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h2>Course Goals</h2> | |
| <p>I will be open to getting a junior developer job in the beginning, but eventually I would like to be a freelancer to build projects for clients and for my own startup ideas. <a href="about.html">Read more about me here.</a></p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| </div> | |
| <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> | |
| <hr> | |
| <footer> | |
| <p><strong>My ♡ beats for Ruby.</strong> | <span><em>What can I help you portray to the world?</em></span> | <a href="contact.html">Contact me here.</a></p> | |
| </footer> | |
| </div> <!-- /container --> | |
| <!-- | |
| ================================================== --> | |
| <!-- Can place script tags with JavaScript files here --> | |
| </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; | |
| } | |
| .nav { | |
| background-color: black; | |
| opacity: 1; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 65px; | |
| padding: 0; | |
| z-index: 15; | |
| } | |
| .nav ul { | |
| float: right; | |
| display: inline; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .nav ul li { | |
| display: inline-block; | |
| float: left; | |
| position: relative; | |
| background: black; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 20px 0 20px; | |
| margin-right: -4px; | |
| cursor: pointer; | |
| font-family: 'Lato', sans-serif; | |
| color: white; | |
| -webkit-transition: all 0.2s; | |
| -moz-transition: all 0.2s; | |
| -ms-transition: all 0.2s; | |
| -o-transition: all 0.2s; | |
| transition: all 0.2s; | |
| } | |
| .nav ul li ul { | |
| padding: 0; | |
| position: absolute; | |
| top: 55px; | |
| left: 0; | |
| width: 150px; | |
| display: none; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| margin-left: -1px; | |
| opacity: 0; | |
| visibility: hidden; | |
| -webkit-transiton: opacity 0.2s; | |
| -moz-transition: opacity 0.2s; | |
| -ms-transition: opacity 0.2s; | |
| -o-transition: opacity 0.2s; | |
| -transition: opacity 0.2s; | |
| } | |
| .nav ul li ul li { | |
| background: black; | |
| display: inline-block; | |
| color: white; | |
| text-align: center; | |
| padding: 8px; | |
| padding-top: 14px; | |
| margin: auto; | |
| width: 110px; | |
| height: 55px; | |
| border: 1px solid white; | |
| } | |
| .nav ul li ul li:hover { | |
| background: #ff0960; | |
| padding: 7px; | |
| padding-top: 13px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li:hover ul { | |
| display: inline-block; | |
| opacity: 1; | |
| visibility: visible; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li ul li a { | |
| margin: auto; | |
| padding: 3px 2px; | |
| } | |
| .nav ul li ul li a:hover { | |
| margin: auto; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 2px 1px; | |
| border: 1px solid transparent; | |
| } | |
| .nav ul li a { | |
| color: white; | |
| padding: 20px 20px; | |
| -webkit-transition: color 600ms; | |
| transition: color 600ms; | |
| } | |
| .nav ul li a:hover { | |
| background-color: #ff0960; | |
| text-decoration: none; | |
| text-shadow: none; | |
| padding: 19px 19px; | |
| border: 1px solid transparent; | |
| } | |
| .nav #left { | |
| float: left; | |
| padding-left: 0px; | |
| } | |
| .jumbotron { | |
| background-color: black; | |
| background-size: cover; | |
| } | |
| .jumbotron h1 { | |
| color: #9b111e; | |
| font-family: 'Rock Salt', cursive; | |
| font-size: 40px; | |
| padding-top: 30px; | |
| } | |
| .jumbotron p span { | |
| visibility: hidden; | |
| } | |
| .jumbotron p { | |
| color: #ff0960; | |
| font-family: 'Fira Sans', sans-serif; | |
| font-size: 16px; | |
| padding: 5px 0; | |
| } | |
| .ruby { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .col-md-4 { | |
| font-family: 'Lato', sans-serif; | |
| } | |
| a { | |
| color: #9b111e; | |
| } | |
| footer { | |
| color: #ff0960; | |
| } | |
| footer p span { | |
| color: black; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment