Created
September 30, 2016 15:44
-
-
Save ScorpIan555/a6030fa26e84600693c58b9da7eac60c to your computer and use it in GitHub Desktop.
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> | |
| <!--Title--> | |
| <title>ZF Home</title> | |
| <!--meta tags--> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <!-- Custom styles for this template go here --> | |
| <link rel="stylesheet" href="css/mad_styles.css"> | |
| <!-- ref lesson 2.1 --> | |
| <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | |
| </head><!--head--> | |
| <body data-spy="scroll" data-target=".navbar"> | |
| <!--fb script, ref lesson 2.1--> | |
| <div id="fb-root"></div> | |
| <!--facebook like button script--> | |
| <script>(function(d, s, id) { | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) return; | |
| js = d.createElement(s); js.id = id; | |
| js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk'));</script> | |
| <!--navbar starts here--> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button><!--/button--> | |
| <div class="zf navbar-brand"> | |
| <a href="#">ZF</a> | |
| </div><!--end project name --> | |
| </div> <!--/navbar-header --> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav nav-pills navbar-nav navbar-right"> | |
| <li class="list-item"> | |
| <a href="#index" title="ZF Home">Home</a> | |
| </li><!--list item--> | |
| <li class="list-item"> | |
| <a href="#about" title="About ZF">About</a> | |
| </li><!--list item--> | |
| <li class="list-item"> | |
| <a href="#faq" title="FAQ">FAQ</a> | |
| </li><!--list item--> | |
| <li class="list-item"> | |
| <a href="#contact" title="Contact">Contact</a> | |
| </li><!--list item--> | |
| <li class="list-item"> | |
| <a href="#qs" title="FAQ">Q's</a> | |
| </li><!--list item--> | |
| <li role="presentation" class="dropdown"> | |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work | |
| <span class="caret"></span> | |
| </a><!--dropdown--> | |
| <ul class="dropdown-menu" id="ddmenu1"> | |
| <li><a href="#calc">work1-Calculator</a></li> | |
| <li><a href="#work2">work2-Forms</a></li> | |
| <li><a href="#work3">work3-Contact</a></li> | |
| </ul><!--dropdown menu--> | |
| </li><!--dropdown--> | |
| <li role="presentation" class="dropdown"> | |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Our Partners | |
| <span class="caret"></span> | |
| </a><!--dropdown--> | |
| <ul class="dropdown-menu" id="ddmenu2"> | |
| <li><a href="http://www.google.com" target="_blank">Google</a></li> | |
| <li><a href="http://www.guardian.co.uk" target="_blank">The Guardian</a></li> | |
| </ul><!--dropdown menu--> | |
| </li><!--dropdown item--> | |
| </ul><!--/navbar-pills--> | |
| </div> <!--/navbar-collapse--> | |
| </div> <!--/nav container-fluid--> | |
| </nav><!--/navbar--> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #index ***************--> | |
| <!--index body--> | |
| <div id="index"> | |
| <!--start of carousel--> | |
| <div class="container-fluid"> | |
| <div id="my_carousel" class="carousel slide" data-ride="carousel"> | |
| <!--indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#my_carousel" data-slide-to="0" class="active"></li> | |
| <li data-target="#my_carousel" data-slide-to="1"></li> | |
| <li data-target="#my_carousel" data-slide-to="2"></li> | |
| <li data-target="#my_carousel" data-slide-to="3"></li> | |
| <li data-target="#my_carousel" data-slide-to="4"></li> | |
| <li data-target="#my_carousel" data-slide-to="5"></li> | |
| </ol><!-- /Carousel Indicators--> | |
| <!--slides, carousel-inner--> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <img src="img/night world.jpg" alt="Night World" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Night World"</h3> | |
| <p>Vincent van Gogh</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item Active--> | |
| <div class="item"> | |
| <img src="img/Water Lillies1.jpg" alt="Water Lillies" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Water Lillies"</h3> | |
| <p>Claude Monet</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item --> | |
| <div class="item"> | |
| <img src="img/Water Lillies3.jpg" alt="Water Lillies" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Water Lillies"</h3> | |
| <p>Claude Monet</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item --> | |
| <div class="item"> | |
| <img src="img/space_moans2.jpg" alt="Space Moans" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Space Moans"</h3> | |
| <p>Stock</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item --> | |
| <div class="item"> | |
| <img src="img/Miles_Davis.jpg" alt="Miles" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Miles On The Horn"</h3> | |
| <p>Unknown, Portrait of Miles Davis</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item --> | |
| <div class="item"> | |
| <img src="img/monet-il_palazzo_da_mula2.jpg" alt="Column of Ships" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3>"Il Palazzo da Mula"</h3> | |
| <p>Claude Monet</p> | |
| </div><!-- /Carousel Caption --> | |
| </div><!-- /Item --> | |
| <!--controls --> | |
| <a class="left carousel-control" href="#my_carousel" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a><!--/Left Carousel --> | |
| <a class="right carousel-control" href="#my_carousel" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a><!-- /Right Carousel --> | |
| </div><!-- /carousel-inner--> | |
| </div><!--/my_carousel--> | |
| </div><!--/container-fluid--> | |
| <hr> | |
| </div><!--/index--> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #about ***************--> | |
| <!--about body--> | |
| <div id="about"> | |
| <!--about container--> | |
| <div class="container"> | |
| <div class="row" id="about_row"> | |
| <div class="col-xs-6 col-md-4"> | |
| <h2>Comic</h2> | |
| <img src="img/Louis_CK.jpg" class="img-responsive" alt="Louis CK" title="Louis CK" class="image-class1" height="100%" width="100%" </img> | |
| </div><!-- /col --> | |
| <div class="col-xs-6 col-md-4 intro column"> | |
| <h2>Intro</h2> | |
| <p>duction.</p> | |
| </div><!-- /col --> | |
| <div class="col-xs-6 col-md-4 skills column"> | |
| <ul id="skill-list"> | |
| <h3>Mad Skills</h3> | |
| <li>M</li> | |
| <li>A</li> | |
| <li>D</li> | |
| <li>S</li> | |
| <li>K</li> | |
| <li>I</li> | |
| <li>L</li> | |
| <li>L</li> | |
| <li>S</li> | |
| </ul><!--/skill-list--> | |
| </div><!-- /col --> | |
| </div><!-- /row --> | |
| </div><!--/container--> | |
| <hr> | |
| <!--about me --> | |
| <div class="jumbotron"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h2>Portfolio Concept</h2> | |
| <p>My portfolio will showcase my two distinct professional pursuits, web development and my work as a stand-up comic and writer.</p> <p>I have branded my website as <span class="branded-text">Zen Franklin.</span> </p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Project Goals</h2> | |
| <p>I want to build a clean, sophisticated, professional portfolio site showcasing my skills as a web developer.</p> <p>At the same time, I want to build a structure which will house a variety of material which will comprise my portfolio as a comic.</p> <p>One important goal for 2017 will be producing and recording my first special. I also want to have a blog, a space to store and display short stories and contact information.</p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| <div class="col-md-4"> | |
| <h2>Course Goals</h2> | |
| <p>I am looking to complete the course by the end of 2016. I am working part-time to give myself enough time to work and complete tasks. I also worked hard to learn material before class started.</p> <p>I have some front-end dev skills so I am hoping to get a bit more advanced in the front end while becoming competent with Ruby and back-end development.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div><!-- /col --> | |
| </div><!-- /row --> | |
| </div><!-- /jumbotron --> | |
| <hr> | |
| </div><!--/about--> | |
| <hr> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #faq ***************--> | |
| <!-- faq body--> | |
| <div id="faq"> | |
| <h2 id="faq-title">Frequently Asked Questions (F.A.Q.)</h2> | |
| <!-- faq accordion--> | |
| <div id="faqs"> | |
| <div class="row"> | |
| <div class="mcModals"> | |
| <h2 class="learn-more">Learn More</h2> | |
| <!-- Lg modal button --> | |
| <div class="modal-button"> | |
| <button class="btn btn-primary" id="lg-modal-btn" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> | |
| </div><!--/modal-button--> | |
| <!-- Lg modal --> | |
| <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h4 class="modal-title" id="myModalLabel">Modal title</h4> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button><!--button--> | |
| </div><!--modal-header--> | |
| <div class="modal-body"> | |
| <p>fluffuffuffuffuff</p> | |
| <embed id="modalembed" src="Ian Daley - Resume.docx"> | |
| </div><!--/content--> | |
| </div><!--/modal-dialog--> | |
| </div><!--modal-body--> | |
| </div><!--/fade--> | |
| </div><!--/mcModals-------------------------------------------> | |
| </div><!--/row--> | |
| <div class="container-fluid"> | |
| <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-plus"> | |
| So... What kinda questions do people ask you frequently? | |
| </span> | |
| </a><!--/collapseOne--> | |
| </h4><!--/panel-title--> | |
| </div><!--/panel heading--> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| <p>I really have no idea, I just started.</p> | |
| </div><!-- /panel-body--> | |
| </div><!-- /panel-collapse collapse--> | |
| </div><!--/panel panel-default--> | |
| <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-plus"> | |
| So... What is Zen Franklin? | |
| </span> | |
| </a><!--/collapseTwo--> | |
| </h4><!--/panel-title--> | |
| </div><!--/panel heading--> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <span class="branded-text">ZenFranklin.com</span> is my portfolio page. | |
| </div><!-- /panel-body--> | |
| </div><!-- /panel-collapse collapse--> | |
| </div><!--/panel panel-defaul--> | |
| <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-plus"> | |
| Is it true you're running out of questions to ask yourself? | |
| </span> | |
| </a><!--/collapseThree--> | |
| </h4><!--/panel-title--> | |
| </div><!--/panel heading--> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| At the moment, yes. | |
| </div><!-- /panel-body--> | |
| </div><!-- /panel-collapse collapse--> | |
| </div><!--/panel panel-defaul--> | |
| <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-plus"> | |
| Is this the fourth question? | |
| </span> | |
| </a><!--/collapseFour--> | |
| </h4><!--/panel-title--> | |
| </div><!--/panel heading--> | |
| <div id="collapseFour" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Yes it is! | |
| </div><!-- /panel-body--> | |
| </div><!-- /panel-collapse collapse--> | |
| </div><!--/panel panel-defaul--> | |
| <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-plus"> | |
| Are you done yet? | |
| </span> | |
| </a><!--/collapseFive--> | |
| </h4><!--/panel-title--> | |
| </div><!--/panel heading--> | |
| <div id="collapseFive" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Now I am. | |
| </div><!-- /panel-body--> | |
| </div><!-- /panel-collapse collapse--> | |
| </div><!--/panel panel-defaul--> | |
| </div><!--panel-group--> | |
| </div><!--/container-fluid--> | |
| </div><!--/faqs--> | |
| </div><!--/faq-body--> | |
| <hr> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #contact ***************--> | |
| <!--contact body--> | |
| <div id="contact" data-stellar-background-ratio="10"> | |
| <div class="container"> | |
| <div id="contact_us"> | |
| <h2>Contact Us</h2> | |
| </div><!--/contact--> | |
| <div id="mission"> | |
| <p><span class="branded-text"><strong>Zen Franklin</strong></span> aspires to inspire. For general inquiries, feel free to send love, hate, yin or yang to:</p> | |
| </div><!--/mission--> | |
| <div id="email_address"> | |
| <p><a href="mailto:contact@zenfranklin.com" target="_blank"><span class="glyphicon glyphicon-envelope"> </span> contact@zenfranklin.com</a></p> | |
| </div><!--/email_address--> | |
| <div class="email_contact" data-stellar-ratio="2"> | |
| <h4>Other Email Inquiries:</h4> | |
| </div><!--/email_contact--> | |
| <div class="email_list" data-stellar-ratio="2"> | |
| <p><span class="glyphicon glyphicon-flash"></span> General inquiries: <a href="mailto:contact@zenfranklin.com" target="_blank">contact@zenfranklin.com</a></p> | |
| <p><span class="glyphicon glyphicon-film"></span> Media requests: <a href="mailto:media@zenfranklin.com" target="_blank">media@zenfranklin.com</a></p> | |
| <p><span class="glyphicon glyphicon-earphone"></span> Sales inquiries: <a href="mailto:sales@zenfranklin.com" target="_blank">sales@zenfranklin.com</a></p> | |
| <p><span class="glyphicon glyphicon-sunglasses"></span> Ian Daley: <a href="mailto:ian@zenfranklin.com" target="_blank">ian@zenfranklin.com</a></p> | |
| </div><!--/email_list --> | |
| <div class="snailmail1"> | |
| <h4>Snail Mail</h4> | |
| </div><!--/snailmail1--> | |
| <div class="snailmail2"> | |
| <p>123 Fake St</p> | |
| <p>Brooklyn, NY 11011</p> | |
| <p>U.S.A.</p> | |
| </div><!--/snailmail2--> | |
| </div><!--/container--> | |
| <hr> | |
| </div><!--/contact body--> | |
| <hr> | |
| <!--*****superHero img*****************--> | |
| <div id="superHero" data-stellar-background-ratio=".5"> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #qs ***************--> | |
| <!-- q's body--> | |
| <!-- q's--> | |
| <div id="qs"> | |
| <div class="container"> | |
| <h2 id="qs-title">Questions 1.9</h2> | |
| <div class="ques" id="ques1"> | |
| <h4>Questions:</h4> | |
| <h5>Describe the <b><i>advantages</i></b> and <b><i>disadvantages</i></b> of designing for mobile-first...</h5> | |
| <h5 id="and">...and...</h5> | |
| <h5>The differences between <b><i>responsive</i></b> and <b><i>adaptive</i></b> design.</h5> | |
| </div><!--/ques--> | |
| <div class="ques ques2"> | |
| <h4>Answers:</h4> | |
| <p>Mobile design necessarily prioritizes content over decoration, so it does limit some of the design work that is possible. However, it is more complex because more types and sizes of device need to be perpetually considered. </p> | |
| <p>Adaptive designs are not necessarily built on a fluid grid, they can have fixed grids. They can introduce media queries to target devices so they represent something of a compromise from static to mobile design. Adaptive pages tend to load quicker than responsive, however, mobile is the wave of the future.</p> | |
| </div><!--/ques--> | |
| <div id="smartass_comment"> | |
| <p>nice view, eh?</p> | |
| </div><!--/smartass_comment--> | |
| </div><!--/container--> | |
| </div><!--/qs--> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- *************** #calc ***************--> | |
| <!--calc body--> | |
| <!--whole calculator div starts here--> | |
| <div id="calc"> | |
| <div id="screen"> | |
| <p id="demo">_</p> | |
| </div><!--/screen--> | |
| <div class="buttons"> | |
| <div class="row"> | |
| <button onclick="myFunction()">1</button> | |
| <button onclick="myFunction()">2</button> | |
| <button onclick="myFunction()">3</button> | |
| <button onclick="myFunction()">-</button> | |
| </div><!--/row--> | |
| <div class="row"> | |
| <button type="button">4</button> | |
| <button type="button">5</button> | |
| <button type="button">6</button> | |
| <button type="button">*</button> | |
| </div><!--/row--> | |
| <div class="row"> | |
| <button type="button">7</button> | |
| <button type="button">8</button> | |
| <button type="button">9</button> | |
| <button type="button">/</button> | |
| </div><!--/row--> | |
| <div class="row"> | |
| <button type="button">0</button> | |
| <button type="button">.</button> | |
| <button type="button">=</button> | |
| <button type="button">+</button> | |
| </div><!--/row--> | |
| </div><!--/buttons--> | |
| </div><!--calc--> | |
| <div id="work2"> | |
| <div id="formsHeader"> | |
| <h2>Forms</h2> | |
| </div><!--/formsHeader--> | |
| <form> | |
| <div class="form-group" id="nameform1"> | |
| <label for="nameform1" class="sr-only">Name</label> | |
| <input type="textBox" name="textBox" required="required" class="form-control" placeholder="Name" title="Name*"> | |
| </div><!--/form-group--> | |
| <div class="form-group" id="phoneform1"> | |
| <label for="phoneform1" class="sr-only">Name</label> | |
| <input type="tel" name="tel" required="required" class="form-control" placeholder="Phone Number" title="Name*"> | |
| </div><!--/form-group--> | |
| <div class="form-group" id="emailform1"> | |
| <label for="emailform1" class="sr-only">Email address</label> | |
| <input type="email" name="email" class="form-control" placeholder="Email Address" title="Email*"> | |
| </div><!--/form-group--> | |
| <div class="form-group"> | |
| <textarea style="resize:none" cols="40" rows="5" id="message-box" class="form-control"></textarea><!--/textarea>--> | |
| <button type="submit" class="btn btn-danger btn-lg" id="submit_button1">Submit</button> | |
| </div><!--/form-group--> | |
| </form><!--/form--> | |
| <div id="work3"> | |
| <div id="contact_2"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div id="contact_info" class="col-lg-4 col-md-4"> | |
| <h2>Contact Information</h2> | |
| <h4>+01-860-810-9010</h4> | |
| <p>ian@zenfranklin</p> | |
| </div><!--contact_info--> | |
| <div id="contact_form" class="col-lg-8 col-md-8"> | |
| <form action="/login" method="post" name="login"> | |
| <div class="form-group" id="nameform2"> | |
| <label for="nameform2" class="sr-only">Name</label> | |
| <input type="textBox" name="textBox" required="required" class="form-control" placeholder="Name" title="Name*"> | |
| </div><!--/form-group--> | |
| <div class="form-group" id="phoneform2"> | |
| <label for="phoneform2" class="sr-only">Name</label> | |
| <input type="tel" name="tel" class="form-control" placeholder="Phone Number" title="Name*"> | |
| </div><!--/form-group--> | |
| <div class="form-group" id="emailform2"> | |
| <label for="emailform2" class="sr-only">Email address</label> | |
| <input type="email" name="email" class="form-control" placeholder="Email Address" title="Email*"> | |
| </div><!--/form-group--> | |
| </form><!--/form--> | |
| </div><!--/contact_form--> | |
| <div id="contact_button" class="col-lg-12 col-md-12"> | |
| <button type="submit" id="submit_button2" class="btn btn-danger btn-lg">Submit! | |
| </button> | |
| </div><!--/contact_button--> | |
| </div><!--/row--> | |
| </div><!--/container--> | |
| </div><!--/contact_2--> | |
| <!--removed video temporarily | |
| <div class="video embed-responsive embed-responsive-4by3"> | |
| <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/o8syBrqA1r8" frameborder="0" allowfullscreen></iframe> | |
| </div><!--/video--> | |
| </div><!--/work3--> | |
| </div><!--/work2--> | |
| </div><!--************/SUPERHERO*************--> | |
| <!--************ open footer*************--> | |
| <footer> | |
| <p><strong>© 2016 ZF</strong></p> | |
| <div><a href="https://twitter.com/TwitterDev" class="twitter-follow-button" data-show-count="false">Follow @TwitterDev</a></div> | |
| <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> | |
| <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div> | |
| </footer> | |
| <!--script to make functioning calculator, to work on later--> | |
| <script> | |
| var display = [""]; | |
| document.getElementById("demo").innerHTML = display; | |
| function myFunction() { | |
| document.getElementById("demo").innerHTML = display.fill("1"); | |
| } | |
| </script><!--/script--> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!-- jQuery --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <!-- javaScript bootstrap--> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <!-- Can place script tags with javaScript files here --> | |
| <script src="js/jquery.stellar.min"></script> | |
| <!--jQuery stellar script--> | |
| <script> | |
| $.stellar(); | |
| </script> | |
| <!-- *************** --> | |
| <!-- *************** --> | |
| <!--.navbar javascript--> | |
| <script type="text/javascript"> | |
| var $root = $('html, body'); | |
| $('.navbar-nav a').click(function() { | |
| var href = $.attr(this, 'href'); | |
| $root.animate({ | |
| scrollTop: $(href).offset().top | |
| }, 500, function () { | |
| window.location.hash = href; | |
| }); | |
| return false; | |
| }); | |
| </script> | |
| </body><!--/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; | |
| } | |
| .navbar-nav { | |
| padding-right:2em; | |
| } | |
| .zf { | |
| text-transform: uppercase; | |
| } | |
| .zf a { | |
| color: white; | |
| text-style:none; | |
| font-family:"Papyrus", "Times New Roman", sans-serif; | |
| } | |
| .zf a:hover { | |
| color: black; | |
| background-color:white; | |
| text-style:none; | |
| font-family:"Papyrus", "Times New Roman", sans-serif; | |
| text-transform:uppercase; | |
| letter-spacing: 0.025em; | |
| transition: color 450ms; | |
| -webkit-transition: color 300ms; | |
| font-size:125%; | |
| } | |
| /* navs */ | |
| #about_row { | |
| margin-top:5em; | |
| } | |
| .container-fluid { | |
| /*over-writing default .container-fluid bootstrap rule*/ | |
| padding-left:0; | |
| } | |
| /*.navbar { <*** old navbar | |
| position: fixed; | |
| width: 100%; | |
| top:0; | |
| background-color:white; | |
| z-index:1; | |
| border-bottom: .15em solid #99ccff; | |
| } | |
| * | |
| .navbar ul li { | |
| display:block; | |
| padding: .33em .5em .33em; | |
| float:right; | |
| } | |
| .navbar ul li a { | |
| color:#99ccff; | |
| text-transform:uppercase; | |
| letter-spacing: 0.025em; | |
| transition: color 300ms; | |
| -webkit-transition: color 600ms; | |
| } | |
| */ | |
| .navbar { | |
| display:inline-block; | |
| padding: .33em .5em .33em; | |
| color:yellow; | |
| } | |
| .navbar a:link { | |
| color:white; | |
| text-transform:uppercase; | |
| letter-spacing: 0.025em; | |
| } | |
| .navbar a:visited { | |
| color:white; | |
| } | |
| .navbar a:hover { | |
| text-decoration: none; | |
| text-style:bold; | |
| font-size:125%; | |
| font-family: "Papyrus", "Times New Roman", sans-serif; | |
| -webkit-transition: color 600ms; | |
| } | |
| .navbar a:active { | |
| color: red; | |
| text-decoration: none; | |
| text-style:bold; | |
| font-size:125%; | |
| -webkit-transition: color 600ms; | |
| }*/ | |
| .jumbotron { | |
| background-color:#99ccff; | |
| color:white; | |
| } | |
| .dropdown-menu { | |
| background-color:black; | |
| color:silver; | |
| } | |
| /**************Contact Page***************/ | |
| #contact_us { | |
| padding-top:4em; | |
| } | |
| #contact { | |
| background-color:black; | |
| /*SIMPLE PARALLAX from CF 1.10/* | |
| /*Add a background image*/ | |
| background-image: url("../img/black_forest_woods.jpg"); | |
| background-attachment: fixed; | |
| /*Give the background a fixed position does it not scroll when you scroll*/ | |
| background-size: cover; | |
| /*Have the background cover the entire div section*/ | |
| color: white; | |
| /*Change the color of the text on top so it is readable, and adjust the padding as needed.*/ | |
| padding:100px; | |
| padding-top: 50px; | |
| /*height: 400px; causing problems at the bottom of the page*/ | |
| } | |
| #contact a:link { | |
| color:red; | |
| } | |
| #contact a:visited { | |
| color:orange; | |
| } | |
| #contact a:hover { | |
| color:white; | |
| } | |
| #contact a:active { | |
| color:red; | |
| } | |
| #mission { | |
| padding-top: 15px; | |
| text-align: center; | |
| } | |
| #email_address { | |
| text-align:center; | |
| margin-bottom:3em; | |
| } | |
| .email_list, .snailmail2, .ques { | |
| padding-left:7em; | |
| z-index:1; | |
| } | |
| .email_list { | |
| padding-bottom:.5em; | |
| } | |
| .snailmail2 { | |
| padding-bottom:40em; | |
| } | |
| .contact_us, .email_contact, .snailmail1 { | |
| padding-left:5em; | |
| } | |
| #contact_2 { | |
| padding-top:20em; | |
| color:white; | |
| text-shadow: 2px 2px orange; | |
| } | |
| #nameform2, #phoneform2 { | |
| display:inline-block; | |
| padding-top:1.5em; | |
| } | |
| #submit_button1, #submit_button2 { | |
| margin-left:27.5em; | |
| display:inline-block; | |
| align:center; | |
| margin-bottom:40em; | |
| margin-top:3.5em; | |
| } | |
| /**************FAQ Page***************/ | |
| .container-fluid { | |
| padding-left:0px; | |
| padding-right:0px; | |
| } | |
| .faq_us { | |
| padding-top:.5em; | |
| } | |
| #faq { | |
| background-color:black; | |
| color:black; | |
| background-image: url("../img/black_forest_cave.jpg"); | |
| background-size:cover; | |
| ; | |
| } | |
| #faqs { | |
| padding-bottom: em; | |
| padding-top:0em; | |
| } | |
| #faq-title { | |
| padding-bottom: 5em; | |
| padding-top:5em; | |
| } | |
| .panel-default { | |
| background-color:#99ccff; | |
| width:50%; | |
| margin-left:20em; | |
| } | |
| #faq-title { | |
| color:white; | |
| padding-left:10em; | |
| padding-top:3em; | |
| } | |
| #accordion { | |
| width:100%; | |
| } | |
| #accordion a:link { | |
| color:#99ccff; | |
| text-decoration:underline; | |
| text-style:bold; | |
| } | |
| #accordion a:visited { | |
| color:#99ccff; | |
| } | |
| #accordion a:hover { | |
| color:white; | |
| background-color:#99ccff; | |
| text-decoration:none; | |
| } | |
| #accordion a:active { | |
| color:red; | |
| } | |
| .learn-more { | |
| text-align: left; | |
| float: left; | |
| color:white; | |
| padding-bottom:5em; | |
| } | |
| .modal-button { | |
| float: right; | |
| margin-left:7.5em; | |
| } | |
| #modalembed { | |
| height: 500px; | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| .modal { | |
| margin-left:5em; | |
| margin-right:5em; | |
| } | |
| /**Calc**/ | |
| #calc { | |
| max-width: 20em; /*Project recommends 320px to fit w/ smallest devices*/ | |
| padding: 5em 25em 0em 35em; | |
| } | |
| #screen { | |
| display: inline-block; | |
| width:13em; | |
| height:1em; | |
| border-left: 1.5625em solid teal; | |
| border-top:1.5625em solid teal; | |
| border-right: 1.5625em solid teal; | |
| padding: 1.5625em; | |
| margin: 1.5625em 1.5625em 0px 1.5625em; | |
| box-shadow: 10px 10px 5px #888888; | |
| float:left; | |
| z-index:1; | |
| } | |
| .buttons { | |
| display:inline-block; | |
| float:left; | |
| border-left: 1.5625em solid teal; | |
| border-top:1.5625em solid teal; | |
| border-right: 1.5625em solid teal; | |
| box-shadow: 10px 10px 5px #888888; | |
| width:13em; | |
| border: 1.5625em solid teal; | |
| padding: 1.5625em; | |
| margin: 0px 1.5625em 0px; | |
| font-decoration: bold; | |
| } | |
| .row button { | |
| color:white; | |
| background-color:teal; | |
| margin: 2.5px; | |
| box-shadow: 10px 10px 5px #888888; | |
| } | |
| #calc { | |
| padding-top:15em; | |
| padding-bottom:35em; | |
| } | |
| span { | |
| text-decoration:italics; | |
| } | |
| /************* Q's *******/ | |
| #qs { | |
| padding-top:5em; | |
| z-index:1; | |
| } | |
| .ques { | |
| padding-top:1em; | |
| z-index:1; | |
| text-shadow: 2px 2px orange; | |
| } | |
| .ques2 { | |
| padding-bottom:25em; | |
| padding-top:8em; | |
| z-index:1; | |
| } | |
| #and { | |
| padding-left:1em; | |
| } | |
| #qs-title { | |
| padding-left:5em; | |
| } | |
| #ques1 { | |
| text-align:left; | |
| } | |
| #smartass_comment { | |
| text-align:center; | |
| text-shadow: 2px 2px orange; | |
| } | |
| #superHero { | |
| /*SIMPLE PARALLAX from CF 1.10/* | |
| /*Add a background image*/ | |
| background-image: url("../img/railroad_tracks.jpg"); | |
| background-attachment: fixed; | |
| /*Give the background a fixed position does it not scroll when you scroll*/ | |
| background-size: cover; | |
| /*Have the background cover the entire div section*/ | |
| color: white; | |
| /*Change the color of the text on top so it is readable, and adjust the padding as needed.*/ | |
| padding:; | |
| padding-top:; | |
| /*height: 400px; causing problems at the bottom of the page*/ | |
| } | |
| /***************video***************/ | |
| .video { | |
| width:50%; | |
| margin-left:20em; | |
| } | |
| /***************forms 2.2***************/ | |
| form { | |
| } | |
| #work2 { | |
| padding-top:10em; | |
| } | |
| #formsHeader { | |
| padding-bottom:2em; | |
| padding-left:15em; | |
| color:brown; | |
| } | |
| .form-control { | |
| width:80%; | |
| margin-left:10em; | |
| } | |
| #nameform { | |
| padding-top:2.5em; | |
| } | |
| /***************footer***************/ | |
| footer p { | |
| text-align:center; | |
| } | |
| .fb-like { | |
| padding: .2em; | |
| float:left; | |
| } | |
| .twitter-follow-button { | |
| padding: .1 .3em; | |
| float:left; | |
| } | |
| .video { | |
| max-width:100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment