I develop this website as my first Free Code Camp front-end project.
A Pen by Duy Nguyen on CodePen.
Created
December 23, 2017 14:55
-
-
Save duycoding710/6f0fb2ea20df5d3a096372ecc0fed66a to your computer and use it in GitHub Desktop.
Classical Quotes
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
| <body> | |
| <div class="container-fluid"> | |
| <div class="jumbotron"> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <h1 class="text-center">Classic Quotes</h1> | |
| <h3 class="text-center"><i>Greatest quotes of all time</i></h3> | |
| <!-- Image and caption --> | |
| <div class="img-cap"> | |
| <img class="img-responsive img-thumbnail" alt="Book and leaf" src="https://images.unsplash.com/photo-1490633874781-1c63cc424610?auto=format&fit=crop&w=1350&q=80" /> | |
| <!-- Can't override font size, use html property instead --> | |
| <p class="text-center" style="font-size: 15px;">Source: <i class="fa fa-camera" aria-hidden="true"></i><a href="https://images.unsplash.com/photo-1490633874781-1c63cc424610?auto=format&fit=crop&w=1350&q=80"> Unsplash.com</a></p> | |
| </div> | |
| <div class="quotes"> | |
| <p class="quote reveal">" You are a shit in a bunch of shits. "</p> | |
| <div class="author"> | |
| <p>Đỗ Nam Trung</p> | |
| </div> | |
| </div> | |
| <div class="quotes"> | |
| <p class="quote reveal">" Walk as if you are kissing the Earth with your feet. "</p> | |
| <div class="author"> | |
| <p>Thích Nhật Hạnh</p> | |
| </div> | |
| </div> | |
| <div class="quotes reveal"> | |
| <p class="quote">" 1 + 1 = 2, and 2 = 1 + 1 "</p> | |
| <div class="author"> | |
| <p>Albert Einstein</p> | |
| </div> | |
| </div> | |
| <div class="quotes reveal"> | |
| <p class="quote">" If you are capable of making your will as long and big as my penis, you will succeed in everything you do. "</p> | |
| <div class="author"> | |
| <p>Khương Duy</p> | |
| </div> | |
| </div> | |
| <div class="quotes"> | |
| <p class="quote revea">" *** ** ***, son of a *****. "</p> | |
| <div class="author"> | |
| <p>JVevermind</p> | |
| </div> | |
| </div> | |
| <footer> | |
| <p class="text-center" style="font-size: 15px;">With <i class="fa fa-heart"></i> from <a href="https://github.com/duycoding710">@duycoding710</a></p> | |
| </footer> | |
| </div> | |
| </div> | |
| </div> | |
| </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() { | |
| window.sr = ScrollReveal({ reset: true }); | |
| sr.reveal('.reveal', { duration: 1000 }); | |
| }); |
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> | |
| <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.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
| html { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| margin: 60px 70px; | |
| font-family: "Open Sans", Helvetica, sans-serif; | |
| } | |
| .img-cap { | |
| margin: 20px; | |
| font-size: 10px; | |
| } | |
| .img-cap p {padding-top: 7px;} | |
| .quotes { | |
| margin-top: 37px; | |
| padding: 0px 10px 0px 10px; | |
| } | |
| .quote { | |
| font-family: Qwigley; | |
| font-size: 35px !important; | |
| text-align: center; | |
| } | |
| .author { | |
| text-align: right; | |
| font-style: italic; | |
| font-family: Pangolin, "Open Sans"; | |
| /* Make the author's name a little bit closer to the quote */ | |
| margin-top: -20px; | |
| padding-right: 15px; | |
| } | |
| footer { | |
| height: 50px; | |
| weight: 100%; | |
| margin-bottom: -65px; | |
| } | |
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://fonts.googleapis.com/css?family=Cabin" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Qwigley|Pangolin" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment