SKammerman (Talk | contribs) |
SKammerman (Talk | contribs) |
||
Line 10: | Line 10: | ||
</head> | </head> | ||
− | <body> | + | <style> |
+ | body { | ||
+ | font: 400 15px Lato, sans-serif; | ||
+ | line-height: 1.8; | ||
+ | color: #818181; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 24px; | ||
+ | text-transform: uppercase; | ||
+ | color: #303030; | ||
+ | font-weight: 600; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 19px; | ||
+ | line-height: 1.375em; | ||
+ | color: #303030; | ||
+ | font-weight: 400; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .jumbotron { | ||
+ | background-color: #f4511e; | ||
+ | color: #fff; | ||
+ | padding: 100px 25px; | ||
+ | font-family: Montserrat, sans-serif; | ||
+ | } | ||
+ | .container-fluid { | ||
+ | padding: 60px 50px; | ||
+ | } | ||
+ | .bg-grey { | ||
+ | background-color: #f6f6f6; | ||
+ | } | ||
+ | .logo-small { | ||
+ | color: #f4511e; | ||
+ | font-size: 50px; | ||
+ | } | ||
+ | .logo { | ||
+ | color: #f4511e; | ||
+ | font-size: 200px; | ||
+ | } | ||
+ | .thumbnail { | ||
+ | padding: 0 0 15px 0; | ||
+ | border: none; | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | .thumbnail img { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .carousel-control.right, .carousel-control.left { | ||
+ | background-image: none; | ||
+ | color: #f4511e; | ||
+ | } | ||
+ | .carousel-indicators li { | ||
+ | border-color: #f4511e; | ||
+ | } | ||
+ | .carousel-indicators li.active { | ||
+ | background-color: #f4511e; | ||
+ | } | ||
+ | .item h4 { | ||
+ | font-size: 19px; | ||
+ | line-height: 1.375em; | ||
+ | font-weight: 400; | ||
+ | font-style: italic; | ||
+ | margin: 70px 0; | ||
+ | } | ||
+ | .item span { | ||
+ | font-style: normal; | ||
+ | } | ||
+ | .panel { | ||
+ | border: 1px solid #f4511e; | ||
+ | border-radius:0 !important; | ||
+ | transition: box-shadow 0.5s; | ||
+ | } | ||
+ | .panel:hover { | ||
+ | box-shadow: 5px 0px 40px rgba(0,0,0, .2); | ||
+ | } | ||
+ | .panel-footer .btn:hover { | ||
+ | border: 1px solid #f4511e; | ||
+ | background-color: #fff !important; | ||
+ | color: #f4511e; | ||
+ | } | ||
+ | .panel-heading { | ||
+ | color: #fff !important; | ||
+ | background-color: #f4511e !important; | ||
+ | padding: 25px; | ||
+ | border-bottom: 1px solid transparent; | ||
+ | border-top-left-radius: 0px; | ||
+ | border-top-right-radius: 0px; | ||
+ | border-bottom-left-radius: 0px; | ||
+ | border-bottom-right-radius: 0px; | ||
+ | } | ||
+ | .panel-footer { | ||
+ | background-color: white !important; | ||
+ | } | ||
+ | .panel-footer h3 { | ||
+ | font-size: 32px; | ||
+ | } | ||
+ | .panel-footer h4 { | ||
+ | color: #aaa; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | .panel-footer .btn { | ||
+ | margin: 15px 0; | ||
+ | background-color: #f4511e; | ||
+ | color: #fff; | ||
+ | } | ||
+ | footer .glyphicon { | ||
+ | font-size: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | color: #f4511e; | ||
+ | } | ||
+ | .slideanim {visibility:hidden;} | ||
+ | .slide { | ||
+ | animation-name: slide; | ||
+ | -webkit-animation-name: slide; | ||
+ | animation-duration: 1s; | ||
+ | -webkit-animation-duration: 1s; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | @keyframes slide { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | transform: translateY(70%); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 1; | ||
+ | transform: translateY(0%); | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes slide { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | -webkit-transform: translateY(70%); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: translateY(0%); | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 768px) { | ||
+ | .col-sm-4 { | ||
+ | text-align: center; | ||
+ | margin: 25px 0; | ||
+ | } | ||
+ | .btn-lg { | ||
+ | width: 100%; | ||
+ | margin-bottom: 35px; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 480px) { | ||
+ | .logo { | ||
+ | font-size: 150px; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> | ||
− | <div class="jumbotron"> | + | <div class="jumbotron text-center"> |
<h1>Company</h1> | <h1>Company</h1> | ||
<p>We specialize in blablabla</p> | <p>We specialize in blablabla</p> | ||
+ | <form> | ||
+ | <div class="input-group"> | ||
+ | <input type="email" class="form-control" size="50" placeholder="Email Address" required> | ||
+ | <div class="input-group-btn"> | ||
+ | <button type="button" class="btn btn-danger">Subscribe</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | </form> | ||
</div> | </div> | ||
− | |||
− | + | <!-- Container (About Section) --> | |
− | + | <div id="about" class="container-fluid"> | |
− | <div class=" | + | <div class="row"> |
− | + | <div class="col-sm-8"> | |
− | + | <h2>About Company Page</h2><br> | |
− | + | <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> | |
− | + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
− | <div class=" | + | <br><button class="btn btn-default btn-lg">Get in Touch</button> |
− | + | </div> | |
− | <div class=" | + | <div class="col-sm-4"> |
− | < | + | <span class="glyphicon glyphicon-signal logo"></span> |
− | < | + | </div> |
− | < | + | </div> |
− | < | + | |
− | < | + | |
− | < | + | |
− | </ | + | |
</div> | </div> | ||
− | <div class=" | + | <div class="container-fluid bg-grey"> |
− | <div class=" | + | <div class="row"> |
− | < | + | <div class="col-sm-4"> |
− | < | + | <span class="glyphicon glyphicon-globe logo slideanim"></span> |
− | <p> | + | </div> |
− | </div> | + | <div class="col-sm-8"> |
+ | <h2>Our Values</h2><br> | ||
+ | <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> | ||
+ | <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
+ | <!-- Container (Portfolio Section) --> | ||
+ | <div id="portfolio" class="container-fluid text-center bg-grey"> | ||
+ | <h2>Portfolio</h2><br> | ||
+ | <h4>What we have created</h4> | ||
+ | <div class="row text-center slideanim"> | ||
+ | <div class="col-sm-4"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="paris.jpg" alt="Paris" width="400" height="300"> | ||
+ | <p><strong>Paris</strong></p> | ||
+ | <p>Yes, we built Paris</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-4"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="newyork.jpg" alt="New York" width="400" height="300"> | ||
+ | <p><strong>New York</strong></p> | ||
+ | <p>We built New York</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-4"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="sanfran.jpg" alt="San Francisco" width="400" height="300"> | ||
+ | <p><strong>San Francisco</strong></p> | ||
+ | <p>Yes, San Fran is ours</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div><br> | ||
+ | |||
− | + | <!-- Container (Contact Section) --> | |
− | + | <div id="contact" class="container-fluid bg-grey"> | |
− | <div class=" | + | <h2 class="text-center">CONTACT</h2> |
− | < | + | <div class="row"> |
− | <p> | + | <div class="col-sm-5"> |
− | <p> < | + | <p>Contact us and we'll get back to you within 24 hours.</p> |
− | + | <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p> | |
+ | <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p> | ||
+ | <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p> | ||
+ | </div> | ||
+ | <div class="col-sm-7 slideanim"> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-6 form-group"> | ||
+ | <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> | ||
+ | </div> | ||
+ | <div class="col-sm-6 form-group"> | ||
+ | <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> | ||
+ | </div> | ||
+ | </div> | ||
+ | <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-12 form-group"> | ||
+ | <button class="btn btn-default pull-right" type="submit">Send</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <footer class="container-fluid text-center"> | ||
+ | <a href="#myPage" title="To Top"> | ||
+ | <span class="glyphicon glyphicon-chevron-up"></span> | ||
+ | </a> | ||
+ | <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p> | ||
+ | </footer> | ||
− | < | + | <script> |
− | + | $(document).ready(function(){ | |
− | + | // Add smooth scrolling to all links in navbar + footer link | |
− | + | $(".navbar a, footer a[href='#myPage']").on('click', function(event) { | |
− | + | // Make sure this.hash has a value before overriding default behavior | |
− | + | if (this.hash !== "") { | |
− | + | // Prevent default anchor click behavior | |
− | + | event.preventDefault(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | // Store hash | ||
+ | var hash = this.hash; | ||
+ | // Using jQuery's animate() method to add smooth page scroll | ||
+ | // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $(hash).offset().top | ||
+ | }, 900, function(){ | ||
+ | |||
+ | // Add hash (#) to URL when done scrolling (default click behavior) | ||
+ | window.location.hash = hash; | ||
+ | }); | ||
+ | } // End if | ||
+ | }); | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | $(".slideanim").each(function(){ | ||
+ | var pos = $(this).offset().top; | ||
+ | var winTop = $(window).scrollTop(); | ||
+ | if (pos < winTop + 600) { | ||
+ | $(this).addClass("slide"); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
</body> | </body> | ||
− | |||
</html> | </html> |
Revision as of 03:40, 10 September 2017
Company
We specialize in blablabla
About Company Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Our Values
MISSION: Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
VISION: Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Portfolio
What we have created
CONTACT
Contact us and we'll get back to you within 24 hours.
Chicago, US
+00 1515151515
myemail@something.com