Created
May 14, 2015 15:50
-
-
Save ishouty/1c61accf3bca77c6b521 to your computer and use it in GitHub Desktop.
example - how it works
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
| <style> | |
| .how-it-works-container { | |
| margin-top: 10px; | |
| } | |
| .how-it-works-container h1 { | |
| text-align: center; | |
| font-size: 85px; | |
| box-shadow: 2px 5px 6px #B8B8B8; | |
| margin-bottom: 20px; | |
| color: white; | |
| border: 2px solid black; | |
| border-radius: 50px; | |
| width: 100px; | |
| background: black; | |
| margin: 0px auto; | |
| margin-bottom: 40px; | |
| } | |
| .how-it-works-container h2 { | |
| text-align: center; | |
| font-family: AvenirLTStd-Heavy; | |
| font-size: 35px; | |
| } | |
| .how-it-works-container p { | |
| text-align: center; | |
| font-size: 17px !important; | |
| line-height: 25px !important; | |
| } | |
| </style> | |
| <style type="text/css"> | |
| .how-it-works-features-container { | |
| margin-top: 10px; | |
| } | |
| .how-it-works-features-container h1 { | |
| font-size: 17px; | |
| text-align: center; | |
| line-height: 1.5; | |
| padding-top: 20px; | |
| } | |
| .how-it-works-features-container h2 { | |
| text-align: center; | |
| font-family: AvenirLTStd-Heavy; | |
| font-size: 35px; | |
| } | |
| .how-it-works-features-container p { | |
| text-align: center; | |
| font-size: 17px !important; | |
| line-height: 25px !important; | |
| } | |
| .how-it-works-features { | |
| padding-top: 30px; | |
| margin: 0px auto; | |
| } | |
| .how-it-works-features .glyphicon { | |
| font-size: 60px; | |
| } | |
| .how-it-works-features .col-sm-3 { | |
| text-align: center; | |
| } | |
| .how-it-works-features .col-sm-6 { | |
| height: 100px; | |
| } | |
| .how-it-works-features .col-sm-7 { | |
| height: 150px; | |
| } | |
| .how-it-works-features .col-sm-7 p { | |
| text-align: left; | |
| margin: 0px; | |
| margin-top: 5px; | |
| font-size: 13px !important; | |
| line-height: 1.2 !important; | |
| } | |
| .how-it-works-features .title { | |
| padding-bottom: 20px; | |
| } | |
| @media (max-width: 992px) { | |
| .how-it-works-features .col-xs-4 { | |
| width: 100%; | |
| height: 160px; | |
| text-align: center; | |
| } | |
| .bg-how-it-works { | |
| height: 339px; | |
| } | |
| } | |
| .bg-how-it-works { | |
| background: url(http://www.freauty.com/uploads/slideshows/1431076994-w_main_slide-original.jpg); | |
| background-size: cover; | |
| background-position: top center; | |
| height: 289px; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| <div class="row how-it-works-container"> | |
| <div class="col-sm-12 bg-how-it-works" ></div> | |
| </div> | |
| <div class="row how-it-works-container"> | |
| <div class="col-md-4"> | |
| <h1>1</h1> | |
| <h2>Look</h2> | |
| <p>Browse our professionals and see what services they provide.</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h1>2</h1> | |
| <h2>Book</h2> | |
| <p>Once you've searched for the beauty professional you want, book an appointment time.</p> | |
| </div> | |
| <div class="col-md-4"> | |
| <h1>3</h1> | |
| <h2>Wait</h2> | |
| <p>Make payment, check for the confirmation email in your inbox and wait for your professional to arrive.</p> | |
| </div> | |
| </div> | |
| <div class="row how-it-works-features-container" > | |
| <div class="col-sm-12"> | |
| <div class="row how-it-works-features"> | |
| <h2 class="title">Freauty Professionals</h2> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-user" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Create a Profile</h3> | |
| <p>Showcase your work or business with style on the freauty platform.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-search" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Offer Online Booking</h3> | |
| <p>Set up online booking for free. Send automatic appointment confirmations, reminders, and thank yous.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Get More Clients</h3> | |
| <p>Build word-of-mouth with social media tools. Post deals & promotions. Highlight client recommendations that you control.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Grow Your Business</h3> | |
| <p>Keep track of all your clients and online clients through the freauty platform.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-12"> | |
| <div class="row how-it-works-features"> | |
| <h2 class="title">Freauty Members</h2> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-search" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Find Stylists</h3> | |
| <p>Find the perfect professional for your next appointment. Search based on service, location, recommendations, and more.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Book online</h3> | |
| <p>Book appointments, reschedule easily, and track your appointment history.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Be Inspired</h3> | |
| <p>Not sure what service you want next? Browse photos and professionals to discover trends and ideas.</p> | |
| </div> | |
| </div> | |
| <div class="col-xs-4 col-sm-6"> | |
| <div class="col-sm-3"> | |
| <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> | |
| </div> | |
| <div class="col-sm-7"> | |
| <h3>Promotions</h3> | |
| <p>Learn about top deals in your area, find last minute appointments, and more.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="col-sm-12 bg-how-it-works" ></div> --> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment