Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
test-site/bootstrap-practice/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
194 lines (183 sloc)
9.42 KB
This file contains 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"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"><title>Owltastic</title> | |
| <link rel="stylesheet" type="text/css" href="bootstrap-practice.css"> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Playfair+Display:700|Roboto" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <nav class="row"> | |
| <div class="row"> | |
| <div id="owl-box" class="col-lg-2 col-md-2 col-sm-2 col-xs-12" align="center"><img src="images/owl.png"></div> | |
| <div id="des-box" class="col-lg-4 col-md-4 col-sm-10 col-xs-12"><p class="big-p">Hello! I’m Meagan Fisher. I design and build digital experiences. I also speak and write about my work and life.</p></div> | |
| <ul id="my-nav" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> | |
| <div class="row"> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>WRITING</h4></a></li> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>SPEAKING</h4></a></li> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>WORK</h4></a></li> | |
| </div> | |
| <div class="row"> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>NOTES</h4></a></li> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>ABOUT</h4></a></li> | |
| <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center"><a href="#"><h4>CONTACT</h4></a></li> | |
| </div> | |
| </ul> | |
| </nav> | |
| </div> | |
| <header> | |
| <div class="row"> | |
| <div id="header-info" class="col-lg-6 col-md-6 col-sm-8 col-xs-12"> | |
| <h4>LATEST NEWS</h4> | |
| <h1>Design & Vulnerability</h1> | |
| <p class="big-2-p">An article about the painful, humbling nature of creating designs, and what it feels like to me to do work I care deeply about. Read on <span>Medium</span> or this <span>site</span>.</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div id="logo-bar" class="col-lg-6 col-md-6 col-sm-8 col-xs-12"> | |
| <h4>FOLLOW<span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></h4> | |
| </div> | |
| </div> | |
| </header> | |
| </div> | |
| <article> | |
| <section id="gray-box"> | |
| <div class="row"> | |
| <h1 class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Worth Noting</h1> | |
| <p class="big-p col-lg-6 col-md-6 col-sm-12 col-xs-12 padding">A curated collection of inspiring work and articles. <span class="green">See all.</span></p> | |
| </div> | |
| <div class="row"> | |
| <div id="box-1"> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <img src="images/art-pic-1.jpg" alt="font face"> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <h4><a href="#">LOGO-A-GO-GO: 100 YEARS OF FORBES TYPOGRAPHY</a></h4> | |
| <p>“In 1948, the logo said 'Calm down.' The war is over.” Love this roundup of 100 years of Forbes logos. They went so far and wide with them! Also didn't realize Forbes had been around for so... <span class="green"><a href="#">KEEP READING</a></p></span> | |
| </div> | |
| </div> | |
| <div id="box-2"> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <img src="images/art-pic-2.jpg" alt="colorful art"> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <h4><a href="#">ARTWORK BY JULIETTE OBERNDORFER</a></h4> | |
| <p>Juliette Oberndorfer's work is simply stunning; it reminds me of a favorite children's book or old Disney animations, bit with NEON. Do yourself a favor and follow her on Instagram....<span class="green"><a href="#">KEEP READING</a></p></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div id="box-3"> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <img src="images/art-pic-3.jpg" alt="gallery"> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <h4><a href="#">WEWORK LA FAYETTE CO-WORKING SPACE – DESIGN MILK</a></h4> | |
| <p>Never thought I'd want to visit Paris again just to work there, but this gorgeous WeWork space would be worth the trip. Source: WeWork La Fayette Co-Working Space Gives Nod to the 1920s - Design... <span class="green"><a href="#">KEEP READING</a></p></span> | |
| </div> | |
| </div> | |
| <div id="box-4"> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <img src="images/art-pic-4.jpg" alt="sunset"> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> | |
| <h4><a href="#">UPPERQUAD</a></h4> | |
| <p>I'm blown away by the color and animation for UPPERQUAD's site; they've attended to every detail so...<span class="green"><a href="#">KEEP READING</a></p></span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="pink-box"> | |
| <h1>Recent Work</h1> | |
| <p class="big-p">I design and build responsive marketing sites and digital products. Here's a few of them. <span><a href="#">See more</a></span></p> | |
| <div class="row" > | |
| <img src="images/responsive-design.jpg" alt="responsive design example" class="col-lg-4 col-md-4 col-sm-6 col-xs-12 img-1" align="center"> | |
| <img src="images/responsive-design.jpg" alt="responsive design example" class="col-lg-4 col-md-4 col-sm-6 col-xs-12" align="center"> | |
| <img src="images/responsive-design.jpg" alt="responsive design example" class="col-lg-4 col-md-4 col-sm-6 col-xs-12" align="center"> | |
| </div> | |
| </section> | |
| <section id="aqua-box"> | |
| <div class="row"> | |
| <h1 class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Recent Events</h1> | |
| <p class="big-p col-lg-6 col-md-6 col-sm-12 col-xs-12 padding">I love speaking. <span><a href="#">See a complete history of events here.</a></span></p> | |
| </div> | |
| <hr> | |
| <div id="row-1" class="row"><a href="#"> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>MAY 19TH, 2016</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>PORTLAND, OR</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS PORTLAND 2016</h4> | |
| </div></a> | |
| <div id="button" class="col-lg-12 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div> | |
| </div> | |
| <hr> | |
| <div id="row-2" class="row"><a href="#"> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>APRIL 7TH, 2016</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>NEW YORK, NY</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS NYC 2015</h4> | |
| </div></a> | |
| <div id="button" class="col-lg-12 col-md-3 col-sm-3 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div> | |
| </div> | |
| <hr> | |
| <div id="row-3" class="row"><a href="#"> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>SEPTEMBER 23RD, 2015</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>CHICAGO, IL</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>WEBVISIONS CHICAGO 2015</h4> | |
| </div></a> | |
| <div id="button" class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div> | |
| </div> | |
| <hr> | |
| <div id="row-4" class="row"><a href="#"> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>MARCH 17TH, 2015</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>OXFORD, UK</h4> | |
| </div> | |
| <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> | |
| <h4><span class="glyphicon glyphicon-star" aria-hidden="true"></span>SMASHING OXFORD 2015</h4> | |
| </div></a> | |
| <div id="button" class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><h4><a href="#">SEE RESOURCES</a></h4></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="white-box"> | |
| <h1>Elsewhere & Contact</h1> | |
| <p class="big-2-p">Follow me on Twitter and Facebook to see my latest work and inspiration. I am an enthusiastic Dribbbler. I post case studies on Behance too. My writing lives on Medium, and you can connect with me on LinkedIn. To reach out directly, please email me at contact@owltastic.com.</p> | |
| </section> | |
| </article> | |
| <footer class="row"> | |
| <ul class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> | |
| <li>HOME</li> | |
| <li>TALKS</li> | |
| <li>TWITTER</li> | |
| <li>WRITING</li> | |
| <li>CONTACT</li> | |
| <li>FACEBOOK</li> | |
| <li>NOTES</li> | |
| <li>ABOUT</li> | |
| <li>DRIBBLE</li> | |
| </ul> | |
| <p class="col-lg-6 col-md-6 col-sm-6 col-xs-12">© 2017 Meagan Fisher. Thanks for stopping by! If you want, you can email me at <span id="green">contact@owltastic.com.</span></p> | |
| </footer> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
| </body> | |
| </html> |