Last active
December 3, 2016 17:48
-
-
Save alextkachevcom/685cf2a57253837aed3dbf39f0cd40c0 to your computer and use it in GitHub Desktop.
Preloader + Page
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
| <div id="loader-wrapper"> | |
| <div id="loader"></div> | |
| <div class="loader-section section-left"></div> | |
| <div class="loader-section section-right"></div> | |
| </div> | |
| <header> | |
| <nav class="navigation"> | |
| <a class="menu-trigger">MENU</a> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#courses">Courses</a></li> | |
| <li><a href="#materials">Materials</a> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div class="person"> | |
| <p><img src="https://cdn0.iconfinder.com/data/icons/user-pictures/100/male-256.png" alt="AVATAR"/></p> | |
| <p>Alex Tkachov</p> | |
| <p class="social"> | |
| <a href="#"><img class="fb" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-64.png" alt="Facebook"/></a> | |
| <a href="#" ><img class="tw" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-64.png" alt="Twitter"/></a> | |
| <a href="#" ><img class="inst" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/instagram_circle_color-64.png" alt="Instagram"/></a> | |
| <a href="#" ><img class="gm" src="https://cdn0.iconfinder.com/data/icons/social-media-2071/100/social-05-64.png" alt="Gmail"/></a> | |
| </p> | |
| <p class="scrolldown"><a href="#down"><img src="https://cdn0.iconfinder.com/data/icons/common-2/100/icon-23-64.png" alt="SCROLLDOWN" /></a></p> | |
| </div> | |
| <div class="wrapper"> | |
| <h1 id="home">Home</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius!Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> | |
| <section class="about"> | |
| <h1 id="about">About</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius!Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> | |
| </section> | |
| <h1 id="courses">Courses</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius!Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> | |
| <h1 id="materials">Materials</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius!Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> | |
| <h1 id="contact">Contact</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius!Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> | |
| </div> | |
| <footer> | |
| <h3>©Copyright 2016. Made by <a href="https://www.instagram.com/simply_aalex/" target="_blank">Alex Popovich.</a></h3> | |
| <p><a href="#0" id="up"><img src="https://cdn0.iconfinder.com/data/icons/common-2/100/icon-21-48.png" alt="SCROLLTOP"></a></p> | |
| </footer> |
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
| $(document).ready(function() { | |
| // Fakes the loading setting a timeout | |
| setTimeout(function() { | |
| $('body').addClass('loaded'); | |
| }, 2500); | |
| }); | |
| //RESPONSIVE MENU | |
| $('.menu-trigger').click(function(){ | |
| $('.navigation ul').slideToggle(500); | |
| }); | |
| $(window).resize(function() { | |
| if ( $(window).width() > 500 ) { | |
| $('.navigation ul').removeAttr('style'); | |
| } | |
| });//end resize | |
| //NAVIGATION | |
| $(window).scroll(function(){ | |
| if($(window).scrollTop() >= 0) { | |
| $('nav').addClass('sticky'); | |
| } else { | |
| $('nav').removeClass('sticky'); | |
| } | |
| }); | |
| $('nav a').click(function(event) { | |
| var id = $(this).attr("href"); | |
| var offset = 100; | |
| var target = $(id).offset().top - offset; | |
| $('html, body').animate({ | |
| scrollTop: target }); | |
| }); | |
| //SCROLL TO TOP | |
| (function($) { | |
| $(function() { | |
| $('#up').click(function() { | |
| $('html, body').animate({scrollTop: 0},1000); | |
| return false; | |
| }) | |
| }) | |
| })(jQuery) | |
| //SCROLL TO DOWN | |
| $(function() { | |
| $('a[href*=#down]').on('click', function(e) { | |
| e.preventDefault(); | |
| $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); | |
| }); | |
| }); |
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
| <script src="http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| @import "bourbon"; | |
| @import url(http://fonts.googleapis.com/css?family=Varela+Round); | |
| //VARIABLES | |
| $footer:#f44030; | |
| $about:#36A154; | |
| $home:#339966; | |
| $courses:#C25847; | |
| $contact:#2E8A6B; | |
| $materials:#36A154; | |
| //END VARIABLES | |
| /* Demo Styles */ | |
| * { | |
| font-family: "Varela Round"; | |
| margin:0; | |
| padding:0; | |
| } | |
| img { | |
| max-width:100%; | |
| } | |
| #content { | |
| margin: 0 auto; | |
| padding-bottom: 50px; | |
| width: 80%; | |
| max-width: 978px; | |
| } | |
| h1 { | |
| font-size: 40px; | |
| } | |
| /* The Loader */ | |
| #loader-wrapper { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 10; | |
| overflow: hidden; | |
| // Modernizr no-js fallback | |
| .no-js & { | |
| display: none; | |
| } | |
| } | |
| #loader { | |
| display: block; | |
| position: relative; | |
| left: 50%; | |
| top: 50%; | |
| width: 150px; | |
| height: 150px; | |
| margin: -75px 0 0 -75px; | |
| border-radius: 50%; | |
| border: 3px solid transparent; | |
| border-top-color: #16a085; | |
| animation: spin 1.7s linear infinite; | |
| z-index: 11; | |
| &:before { | |
| content: ""; | |
| position: absolute; | |
| top: 5px; | |
| left: 5px; | |
| right: 5px; | |
| bottom: 5px; | |
| border-radius: 50%; | |
| border: 3px solid transparent; | |
| border-top-color: #e74c3c; | |
| animation: spin-reverse .6s linear infinite; | |
| } | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; | |
| right: 15px; | |
| bottom: 15px; | |
| border-radius: 50%; | |
| border: 3px solid transparent; | |
| border-top-color: #f9c922; | |
| animation: spin 1s linear infinite; | |
| } | |
| } | |
| // Bourbon mixins | |
| @include keyframes(spin) { | |
| 0% { | |
| @include transform(rotate(0deg)); | |
| } | |
| 100% { | |
| @include transform(rotate(360deg)); | |
| } | |
| } | |
| @include keyframes(spin-reverse) { | |
| 0% { | |
| @include transform(rotate(0deg)); | |
| } | |
| 100% { | |
| @include transform(rotate(-360deg)); | |
| } | |
| } | |
| #loader-wrapper .loader-section { | |
| position: fixed; | |
| top: 0; | |
| width: 51%; | |
| height: 100%; | |
| background: #222; | |
| z-index: 10; | |
| } | |
| #loader-wrapper .loader-section.section-left { | |
| left: 0; | |
| } | |
| #loader-wrapper .loader-section.section-right { | |
| right: 0; | |
| } | |
| /* Loaded styles */ | |
| .loaded #loader { | |
| opacity: 0; | |
| transition: all 0.3s ease-out; | |
| } | |
| .loaded #loader-wrapper { | |
| visibility: hidden; | |
| transform: translateY(-100%); | |
| transition: all 0.3s 1s ease-out; | |
| } | |
| //AVATAR IMAGE | |
| .person { | |
| background:#90D98C; | |
| height:700px; | |
| p { | |
| color:#fff; | |
| text-align:center; | |
| font-size:2em; | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| -o-user-select:none; | |
| user-select:none; | |
| img { | |
| margin-top:10%; | |
| border-radius:5px; | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| -o-user-select:none; | |
| user-select:none; | |
| } | |
| } | |
| .social img { | |
| margin-top:0; | |
| transition:0.5s; | |
| } | |
| .fb:hover { | |
| -webkit-transform:translateY(-30%); | |
| -moz-transform:translateY(-30%); | |
| -o-transform:translateY(-30%); | |
| transform:translateY(-30%); | |
| transition:0.5s; | |
| } | |
| .tw:hover { | |
| -webkit-transform:translateY(-30%); | |
| -moz-transform:translateY(-30%); | |
| -o-transform:translateY(-30%); | |
| transform:translateY(-30%); | |
| transition:0.5s; | |
| } | |
| .inst:hover { | |
| -webkit-transform:translateY(-30%); | |
| -moz-transform:translateY(-30%); | |
| -o-transform:translateY(-30%); | |
| transform:translateY(-30%); | |
| transition:0.5s; | |
| } | |
| .gm:hover { | |
| -webkit-transform:translateY(-30%); | |
| -moz-transform:translateY(-30%); | |
| -o-transform:translateY(-30%); | |
| transform:translateY(-30%); | |
| transition:0.5s; | |
| } | |
| .scrolldown img { | |
| margin-top:0; | |
| } | |
| } | |
| //ENDAVATAR IMAGE | |
| //SECTION ABOUT | |
| .about { | |
| background:$about; | |
| color:#fff; | |
| } | |
| //END SECTION ABOUT | |
| //NAVIGATION | |
| h1 { | |
| font-size: 2em; | |
| line-height: 1.5; | |
| text-transform: uppercase; | |
| font-weight: 400; | |
| padding-left: 20px; | |
| margin-top:25%; | |
| } | |
| .navigation { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| width: 100%; | |
| padding:10px; | |
| background-color: #f44030; | |
| opacity: 0.8; | |
| z-index:1; | |
| } | |
| .menu-trigger { | |
| display:none; | |
| color:#F8ECC2; | |
| } | |
| .navigation ul { | |
| list-style: none; | |
| text-align: center; | |
| padding: 0.3em 0; | |
| } | |
| .navigation ul li { | |
| display: inline-block; | |
| line-height: 1.5; | |
| } | |
| .navigation ul li::first-child{ | |
| margin-left: 0; | |
| } | |
| .navigation ul li a { | |
| margin-left:30px; | |
| } | |
| .navigation ul li a:hover { | |
| color:#222; | |
| } | |
| .navigation ul a { | |
| color: white; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| } | |
| p { | |
| margin-bottom: 20px; | |
| font-size: 1em; | |
| line-height: 1.5; | |
| padding: 0 20px; | |
| text-align: justify; | |
| } | |
| .sticky { | |
| position: fixed; | |
| opacity: 0.85; | |
| z-index: 1; | |
| -webkit-animation: moveDown .5s; | |
| } | |
| @-webkit-keyframes moveDown { | |
| 0% { -webkit-transform: translateY(-40px) } | |
| } | |
| .menu-trigger { | |
| display:none; | |
| color:#F8ECC2; | |
| text-decoration:none; | |
| } | |
| //END NAVIGATION | |
| //FOOTER | |
| footer { | |
| background:$footer; | |
| margin:0; | |
| padding:20px; | |
| h3 { | |
| color:#fff; | |
| text-align:center; | |
| font-size:1em; | |
| } | |
| p { | |
| text-align:center; | |
| #up img { | |
| user-select:none; | |
| margin-top:0; | |
| } | |
| } | |
| a { | |
| text-decoration:none; | |
| color:#444; | |
| } | |
| a:hover { | |
| color:#000; | |
| } | |
| } | |
| //END FOOTER | |
| //MEDIA QUERIES | |
| @media screen and(max-width: 580px) { | |
| h1 { | |
| margin-top:30%; | |
| } | |
| .navigation ul li { | |
| display:block; | |
| text-align:center; | |
| padding-right:25px; | |
| line-height:30px; | |
| } | |
| .navigation ul { | |
| display:none; | |
| } | |
| .menu-trigger { | |
| display:block; | |
| text-align:center; | |
| padding:10px; | |
| cursor:pointer; | |
| } | |
| .person { | |
| background:$contact; | |
| height:480px; | |
| p { | |
| color:#fff; | |
| text-align:center; | |
| font-size:2em; | |
| img { | |
| margin-top:25%; | |
| } | |
| } | |
| } | |
| .social { | |
| font-size:1em; | |
| display:none; | |
| } | |
| .scrolldown img { | |
| display:none; | |
| } | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo version weekend practice:)