Created
November 27, 2017 10:04
-
-
Save DixieKorley/2aed08a06e682f6a0b9150e617a428a4 to your computer and use it in GitHub Desktop.
Measure Me
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
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Measure Me</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="main"> | |
| <div> | |
| <nav class="fixed-nav-bar"> | |
| <button class="first"><a href="#profile">The Customer Sheet</a></button> | |
| <button class="second"><a href="#lookup">How Do We Lookup?</a></button> | |
| </nav> | |
| </div> | |
| <div class="aqua"> | |
| <h1><strong>Measure Me</strong></h1> | |
| <p><strong>Measure Me</strong> is an app acting as the clothing designer's measuring book.</p> | |
| <p>It stores all profile sheets and makes it easy to access customer information anywhere, whether at home or on-the-go. | |
| </p> | |
| </div> | |
| <div class="pink" id="profile"> | |
| <h3>Profile</h3> | |
| <em>This is an example of a profile for a customer.</em> | |
| <img class="imgpad" src="https://lh3.googleusercontent.com/YD0-zl2HWTR3frmSTrD5lP7SuHdriAJh1Ld0Xs4qtDz_Q0vjBLOK_IryfCNJUL_BWtt6f4qKtwwuBF-jVBZkGbRaS4Wcsf3ClWu5ZNzJFbcvCQo9egfUgNxDuxEzBHySFo-qvdQf8g" alt="Same profile page" /> | |
| </div> | |
| <div class="gray" id="lookup"> | |
| <h3>Lookup</h3> Type over the search bar to find the customer you're looking for instead of going through tons of paper. | |
| <img class="imgpad" src="https://lh3.googleusercontent.com/mpzoz4ohcIpre3ZBCsT0Uys1r5GKexmD9v4L6SlSJpvdYZ8vuwpmDWFEk8AE4ZD8jfKxUtyEJ-q95ituoo59sJB4j1o54OVwkVef3ig7GKSQwN2Na30l7wD5jHPts8l_Z7J_UAyOmA" alt="Same lookup page" /> | |
| </div> | |
| <div class="green"> | |
| <div class="center"> | |
| <h3>Storage</h3> </div> | |
| <div> | |
| <h5><em> All customer information stored here for your convenience. No paper, no mess.</em></h5> | |
| </div> | |
| <div class="imgpad"> | |
| <img src="https://lh3.googleusercontent.com/yDvWJ1KjQqR8WHmzHhYQm8ovGJXj_3_MWceBcuQcdNj0tB2ICEdxW2fiMKviT4XxJV4Qcghfkby71gug9N7747lie4QX-u4aeaDH6fkr-xTK2mzYySpvhaEbd5XcQhVbF9Sn4h8GNA" alt="Sample storage page"/> | |
| </div> | |
| </div> | |
| <footer>Dixie Korley © 2017 </footer> | |
| <script src="jquery-3.2.1.min.js"></script> | |
| <script src=script.js></script> | |
| </body> |
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
| $(document).ready(function() { | |
| $(".main").hide(); | |
| $(".main").fadeIn(1000); | |
| $("button.first").click(function() { | |
| $("div.pink").hide(); | |
| $("div.pink").slideToggle(800); | |
| }); | |
| $("button.second").click(function() { | |
| $("div.gray").hide(); | |
| $("div.gray").slideToggle(800); | |
| }); | |
| }); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
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
| /* Fonts from Google Fonts - more at https://fonts.google.com */ | |
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); | |
| @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); | |
| body { | |
| background-color: white; | |
| font-family: "Open Sans", sans-serif; | |
| padding: 5px 25px; | |
| font-size: 18px; | |
| margin: 0; | |
| color: black; | |
| } | |
| h1 { | |
| font-family: "Merriweather", serif; | |
| font-size: 32px; | |
| text-align: center; | |
| } | |
| h3 { | |
| font-family: "Merriweather", serif; | |
| text-align: center; | |
| } | |
| footer { | |
| background-color:palevioletred; | |
| padding: 20px 20px 20px 20px; | |
| } | |
| .aqua { | |
| padding: 60px 60px 60px 60px; | |
| } | |
| .green { | |
| padding: 60px 60px 60px 60px; | |
| background-color: lightgray; | |
| } | |
| .pink { | |
| background-color: aqua; | |
| padding: 60px 60px 60px 60px; | |
| } | |
| .gray { | |
| padding: 60px 60px 60px 60px; | |
| } | |
| .fixed-nav-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 9999; | |
| width: 100%; | |
| background-color: violet; | |
| padding: 10px 10px 10px 10px; | |
| } | |
| a { | |
| color: black; | |
| } | |
| button a:hover { | |
| color: white; | |
| } | |
| button { | |
| border: none; | |
| background-color: violet; | |
| } | |
| a:link { | |
| text-decoration: none; | |
| } | |
| .first { | |
| width: 200px; | |
| float: left; | |
| } | |
| .second { | |
| width: 200px; | |
| float: right; | |
| } | |
| .main { | |
| margin-top: 40px; | |
| } | |
| .left { | |
| width: 500px; | |
| float: left; | |
| } | |
| .right { | |
| width: 200px | |
| float: right; | |
| } | |
| .center { | |
| padding: 10px 10px 10px 10px; | |
| } | |
| .imgpad { | |
| padding: 15px 15px 15px 15px; | |
| } | |
| h5 { | |
| font-size: 20px; | |
| font-family: Merriweather; | |
| text-align: center; | |
| } | |
| img { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| footer { | |
| text-align: center; | |
| background-color: white; | |
| } | |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Took out jQuery for now.