API tools faq
paste
iliya87

Transition html5

iliya87
Jul 6th, 2017
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="bg">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>CSS Example</title>
  6.                 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  7.                 <style>
  8.                     header{position: relative}
  9.                     header nav{position: absolute; top:35px; left:360px}
  10.                     header nav ul{list-style: none;}
  11.                     header nav ul li{display:inline-block}
  12.                     header nav ul li a{font-size: 20px;text-decoration: none; color:#906090; padding-left: 10px; padding-right: 10px;}
  13.                     h1,h2,h3{text-align: center}
  14.                     .wraper{width:1060px; margin:0 auto}
  15.                     section:nth-of-type(1){background-color: #d6d6d6; padding-bottom: 30px; padding-top:30px}
  16.                     .fe1{width:48%;position:relative; overflow: hidden; height: 500px;background-color: #000;}
  17.                     .fe1 img{position:absolute; width: 900px;opacity: 0.7;transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  18.                     .fe1:hover img{width:1000px; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  19.                     .fe1 button{width: 150px; height: 80px; text-align: center; background-color: rgba(0,0,0,0.1);font-size: 26px;font-style: italic; color:cyan;position: absolute; bottom: -100px;left:0;right:0;margin:0 auto;transition: all 0.8s linear 0.9s}
  20.                     .fe1 p:hover + button{bottom:100px; transition: all 0.8s linear 0.2s}
  21.                     .fe1 p{position: absolute; top: -100px;width:100%; text-align: center; font-size: 26px; color:cyan; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  22.                     .fe1:hover p{top:150px; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  23.                     .fe2{width:48%;float: right; position:relative;overflow: hidden; height: 500px;background-color: #000;}
  24.                     .fe2 img{position:absolute; width: 1100px;opacity: 0.7; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  25.                     .fe2:hover img{width:1200px; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  26.                     .fe2 button{width: 150px; height: 80px; text-align: center; background-color: rgba(0,0,0,0.1);font-size: 26px;font-style: italic; color:cyan;position: absolute; bottom: -100px;left:0;right:0;margin:0 auto;transition: all 0.8s linear 0.9s}
  27.                     .fe2:hover button{bottom:100px; transition: all 0.8s linear 0.2s}
  28.                     .fe2 p{position: absolute; top: -100px;width:100%; text-align: center; font-size: 26px; color:cyan; transition: all 0.8s linear 0.2s}
  29.                     .fe2:hover p{top:150px; transition: all 0.8s linear 0.2s; -moz-transition: all 0.8s linear 0.2s; -webkit-transition: all 0.8s linear 0.2s}
  30.                     section:nth-of-type(3){text-align: center}
  31.                     section:nth-of-type(3) p{margin-top: 60px}
  32.                     .black{background-color: #000;}
  33.                     .center{text-align: center}
  34.                     footer div{color:#fff;padding-top: 50px; padding-bottom: 50px}
  35.                     footer{margin-top: 50px}
  36.                     section:nth-of-type(3) i{font-size:30px; margin-right:10px;}
  37.                     @media screen and (max-width:900px){
  38.                         .logo img{width:200px}
  39.                         header nav{top:10px; left:200px}
  40.                         .fe1, .fe2{margin: 0 auto;width: 70%;}
  41.                         .wraper{width:100%}
  42.                         .fe2{float:none;}
  43.                         .fe1{margin-top: 30px}
  44.                     }
  45.                 </style>
  46.                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  47.         </head>
  48.         <body>
  49.             <header class="wraper">
  50.                 <div class="logo">
  51.                     <img src="http://webacademy.bg/wp-content/themes/Artificial-Reason-WP/img/about_logo.png" alt="logo" />
  52.                 </div>
  53.                 <nav>
  54.                     <ul>
  55.                         <li><a href="#">Home</a></li>
  56.                         <li><a href="#anchor1">About</a></li>
  57.                         <li><a href="#anchor2">Courses</a></li>
  58.                         <li><a href="#anchor3">Contacts</a></li>
  59.                     </ul>
  60.                 </nav>
  61.             </header>
  62.             <section>
  63.                 <div class="wraper">
  64.                     <a name="anchor1"></a>
  65.                     <h1>About us</h1>
  66.                     <p><strong>袩褉芯械泻褌褗褌 鈥溞Ｐ敌� 袗泻邪写械屑懈褟鈥� 褋褌邪褉褌懈褉邪 褋 芯褌泻褉懈胁邪薪械褌芯 薪邪 鈥溞Ｐ敌� 袗泻邪写械屑懈褟 袩谢芯胁写懈胁鈥� 锌褉械蟹 芯泻褌芯屑胁褉懈 2015 谐., 泻邪褌芯 写芯 屑芯屑械薪褌邪 薪邪写 300 褋褌褍写械薪褌懈 褍褋锌械褕薪芯 褋邪 锌褉械屑懈薪邪谢懈 芯斜褍褔懈褌械谢薪懈 泻褍褉褋芯胁械 胁 芯薪谢邪泄薪 懈 锌褉懈褋褗褋褌胁械薪邪 褎芯褉屑邪 薪邪 芯斜褍褔械薪懈械.</strong></p>
  67.                     <p>袧邪 11 袦邪泄 2016 谐芯写懈薪邪 褋褌邪褉褌懈褉邪 鈥溞Ｐ敌� 袗泻邪写械屑懈褟 小褌邪褉邪 袟邪谐芯褉邪鈥�, 锌芯写 懈薪懈褑懈邪褌懈胁邪褌邪 鈥溞熝€芯谐褉邪屑懈褉邪泄 小褌邪褉邪 袟邪谐芯褉邪鈥�, 芯褋褗褖械褋褌胁械薪邪 褋 谢褞斜械蟹薪邪褌邪 锌芯写泻褉械锌邪 薪邪 袨斜褖懈薪邪 小褌邪褉邪 袟邪谐芯褉邪. 笑械谢褌邪 薪邪 懈薪褑懈邪褌懈胁邪褌邪 械 写邪 褋械 褋褗蟹写邪写械 袠孝 芯斜褖械褋褌胁芯 胁 谐褉邪写邪 懈 褌芯泄 写邪 褋械 锌褉械胁褗褉薪械 胁 邪褌褉邪泻褌懈胁薪邪 写械褋褌懈薪邪褑懈褟 蟹邪 斜褗谢谐邪褉褋泻懈 懈 屑械卸写褍薪邪褉芯写薪懈 袠孝 泻芯屑锌邪薪懈懈 懈 懈薪胁械褋褌懈褌芯褉懈.</p>
  68.                 </div>
  69.             </section>
  70.             <section class="wraper">
  71.                 <a name="anchor2"></a>
  72.                 <h2>Courses</h2>
  73.                 <div class="fe2">
  74.                     <img src="https://www.santandercb.co.uk/sites/default/files/corporate-hp.jpg" alt="pic1" />
  75.                     <p>Front-end Level 2</p>
  76.                     <button>Read more</button>
  77.                 </div>
  78.                 <div class="fe1">
  79.                     <img src="http://leighevents.com/wp-content/uploads/2015/03/meeting-boardroom-professionals.jpg" alt="pic2" />
  80.                     <p>Front-end Level 1</p>
  81.                     <button>Read more</button>
  82.                 </div>
  83.             </section>
  84.             <section>
  85.                 <a name="anchor3"></a>
  86.                 <h3>Contacts</h3>
  87.                <div id="googleMaps" style="width:100%;height:500px;"></div>
  88.                     <input type="hidden" name="map_cords" id="map_cords">
  89.                 <p class='wraper'><i class="fa fa-map-marker" aria-hidden="true"></i>
  90.                     斜褍谢. 笑邪褉 小懈屑械芯薪 袙械谢懈泻懈 168 袗, 械褌.3, 芯褎懈褋 36<br />
  91.                     6000 小褌邪褉邪 袟邪谐芯褉邪, 袘褗谢谐邪褉懈褟
  92.                 </p>
  93.             </section>
  94.             <footer class='black'>
  95.                 <div class='wraper center'>Copyright 漏 2017 WebAcademy. 袙褋懈褔泻懈 锌褉邪胁邪 蟹邪锌邪蟹械薪懈.</div>
  96.             </footer>
  97.             <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDlOzVRLTFmbffkoU73xQfId8o-mdU5EEg&libraries=places&callback=initAutocomplete" async defer></script>
  98.             <script>
  99.                     var i;
  100.                     var cords;
  101.                     var marker;
  102.                     var markers = [];
  103.                     function initAutocomplete() {
  104.                             var webStz = {lat: 42.4261278, lng: 25.640974};
  105.                         var map = new google.maps.Map(document.getElementById('googleMaps'), {
  106.                           center: webStz,
  107.                           zoom: 18,
  108.                           mapTypeId: 'roadmap'
  109.                         });
  110.                         //add marker for webacademy stz
  111.                          marker = new google.maps.Marker({
  112.                                 position: webStz,
  113.                                 map: map
  114.                             });
  115.                         //create marker ot map when click
  116.                         map.addListener('click', function(event) {
  117.                             marker = new google.maps.Marker({
  118.                                 position: event.latLng,
  119.                                 map: map
  120.                             });
  121.                            
  122.                         //del marker
  123.                         marker.addListener('click', function(event) {
  124.                             i = markers.indexOf(this);
  125.                             if(i != -1) {
  126.                                 markers.splice(i, 1);
  127.                             }
  128.                             cords ='';
  129.                             this.setMap(null);
  130.                             markers.forEach(function(entry) {
  131.                                 cords += entry.position;
  132.                             });
  133.                             $('#map_cords').val(cords)
  134.                         });
  135.                         markers.push(marker);
  136.                         cords ='';
  137.                         markers.forEach(function(entry) {
  138.                             cords += entry.position;
  139.                         });
  140.                         $('#map_cords').val(cords);
  141.                         });
  142.                        
  143.                         //load markers from map_cords and put on map   
  144.                                 //save coords on map_cords
  145.                         cords ='';
  146.                         markers.forEach(function(entry) {
  147.                         cords += entry.position;
  148.                         });
  149.                         $('#map_cords').val(cords);
  150.                        
  151.                 }
  152.                
  153.             </script>
  154.     </body>
  155. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!