Created
July 7, 2017 04:27
-
-
Save anonymous/283ce13935a9800d9fd6f4567b551a1f to your computer and use it in GitHub Desktop.
Measure Me
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
| <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 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 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 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 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