A Pen by Sonya Moisset on CodePen.
Created
August 17, 2015 17:24
-
-
Save SonyaMoisset/b22209c6544e1263d68c to your computer and use it in GitHub Desktop.
Shutterbugg | Codecademy | My solution
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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="main"> | |
| <div class="container"> | |
| <h1>Introducing Shutterbugg</h1> | |
| <p>Capture the moments that matter.</p> | |
| <a href="#" class="btn">Download Shutterbugg</a> | |
| </div> | |
| </div> | |
| <div class="content-container"> | |
| <div class="section"> | |
| <div class="section-container container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png"> | |
| </div> | |
| <div class="col-md-6"> | |
| <h1>Share</h1> | |
| <p>Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-container container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h1>Explore</h1> | |
| <p>Explore moments from your friends and family. Shutterbugg makes it easy to see what's happening in the world and take in everything around you.</p> | |
| </div> | |
| <div class="col-md-6" style="text-align:right";> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-container container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png"> | |
| </div> | |
| <div class="col-md-6"> | |
| <h1>Save</h1> | |
| <p>Save every photo you take. Shutterbugg automatically saves your photos so you can show them off from anywhere.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="store section container"> | |
| <h2>Available for iPhone, iPad, and Android.</h2> | |
| <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" /> | |
| <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" /> | |
| </div> | |
| <div class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <h3>Company</h3> | |
| <ul> | |
| <li>Careers</li> | |
| <li>Terms</li> | |
| <li>Help</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-3"> | |
| <h3>Products</h3> | |
| <ul> | |
| <li>Shutterbugg</li> | |
| <li>Speakerboxx</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-3"> | |
| <h3>News</h3> | |
| <ul> | |
| <li>Blog</li> | |
| <li>Twitter</li> | |
| <li>YouTube</li> | |
| <li>Google+</li> | |
| <li>Facebook</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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
| .container { | |
| max-width: 928px; | |
| } | |
| h1, h2, p, a { | |
| font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif; | |
| } | |
| h1 { | |
| font-size: 64px; | |
| font-weight: 100; | |
| margin-bottom: 20px; | |
| } | |
| h2 { | |
| color: #000; | |
| font-size: 2.3em; | |
| font-weight: 300; | |
| line-height: 1.25; | |
| margin: 1em 0; | |
| } | |
| h3 { | |
| color: #555; | |
| margin-bottom: 10px; | |
| font-family: 'Open Sans', arial, sans-serif; | |
| font-weight: 300; | |
| font-size: 1.2em; | |
| } | |
| p { | |
| font-size: 26px; | |
| font-weight: 200; | |
| } | |
| a { | |
| font-size:18px; | |
| font-weight: 200; | |
| } | |
| /* Main */ | |
| .main { | |
| background-image: url('https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg'); | |
| background-size: cover; | |
| height: 550px; | |
| padding-top: 55px; | |
| } | |
| .main p { | |
| font-size: 26px; | |
| font-weight: 200; | |
| margin-bottom: 40px; | |
| } | |
| .main .btn { | |
| background-color: rgba(238,68,95,0.9); | |
| border-radius: 4px; | |
| color: #fff; | |
| padding: 8px 30px; | |
| } | |
| .main .btn:hover { | |
| background-color: rgba(238,68,95,1); | |
| cursor: pointer; | |
| -webkit-box-shadow: box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | |
| -moz-box-shadow: box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | |
| box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | |
| transition-property: box-shadow; | |
| transition-duration: .5s; | |
| } | |
| /* Sections */ | |
| .section { | |
| padding-top: 50px; | |
| } | |
| .section-container { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| border-bottom: 1px solid #dbdbdb; | |
| } | |
| .section .row { | |
| margin-right: -15px; | |
| margin-left: -15px; | |
| } | |
| /* Store */ | |
| .store { | |
| text-align: center; | |
| border-bottom: 0px; | |
| padding-bottom:100px | |
| } | |
| /* Footer */ | |
| .footer { | |
| border-top: 1px solid #dbdbdb; | |
| background-color: #f3f3f3; | |
| padding: 20px 0px 80px; | |
| } | |
| .footer ul { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| .footer li { | |
| color: #999; | |
| font-weight: 600; | |
| } | |
| @media (max-width: 500px) { | |
| .col-md-6 img { | |
| padding: 50px; | |
| width: 100%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment