API tools faq
paste
Advertisement
Guest User

homework

a guest
Feb 20th, 2018
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Coffee Shop </title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <style>  
  8. .content1 {
  9.     position: absolute;
  10.     bottom: 0;
  11.     background: rgba(0, 0, 0, 0.5); /* Black background with transparency */
  12.     color: #f1f1f1;
  13.     width: 100%;
  14.     padding: 20px;
  15. }
  16. body {font-family: "Times New Roman", Georgia, Serif;}
  17. h1,h2,h3,h4,h5,h6 {
  18.     font-family: "Playfair Display";
  19.     letter-spacing: 5px;
  20. }
  21. ul {
  22.     padding:0;
  23. }
  24. ul.gallery li {
  25.   display: inline-block;
  26.   opacity:1;
  27.   -webkit-transition: opacity .5s ease-in-out;
  28.   -moz-transition: opacity .5s ease-in-out;
  29.   -o-transition: opacity .5s ease-in-out;
  30.   transition: opacity .5s ease-in-out;
  31.  
  32. }
  33. label {
  34.   cursor: pointer;
  35.   color: #fff;
  36.   background: #5D6B74;
  37.   padding: 5px 19px;
  38. }
  39. input {
  40.   display: none;
  41. }
  42. img {
  43.   padding: 5px;
  44.   border: 1px solid #ccc;
  45.  
  46. }
  47. /*Select Categorie*/  
  48. input#select-animals:checked ~ .gallery li:not(.animals-item), input#select-lightning:checked ~ .gallery li:not(.lightning-item), input#select-desert:checked ~ .gallery li:not(.desert-item) {
  49.   opacity: 0.1;
  50. }
  51.  
  52.  
  53. #myImg {
  54.     border-radius: 5px;
  55.     cursor: pointer;
  56.     transition: 0.3s;
  57. }
  58.  
  59. #myImg:hover {opacity: 0.7;}
  60.  
  61. /* The Modal (background) */
  62. .modal {
  63.     display: none; /* Hidden by default */
  64.     position: fixed; /* Stay in place */
  65.     z-index: 1; /* Sit on top */
  66.     padding-top: 100px; /* Location of the box */
  67.     left: 0;
  68.     top: 0;
  69.     width: 100%; /* Full width */
  70.     height: 100%; /* Full height */
  71.     overflow: auto; /* Enable scroll if needed */
  72.     background-color: rgb(0,0,0); /* Fallback color */
  73.     background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  74. }
  75.  
  76. /* Modal Content (image) */
  77. .modal-content {
  78.     margin: auto;
  79.     display: block;
  80.     width: 80%;
  81.     max-width: 700px;
  82. }
  83.  
  84. /* Caption of Modal Image */
  85. #caption {
  86.     margin: auto;
  87.     display: block;
  88.     width: 80%;
  89.     max-width: 700px;
  90.     text-align: center;
  91.     color: #ccc;
  92.     padding: 10px 0;
  93.     height: 150px;
  94. }
  95.  
  96. /* Add Animation */
  97. .modal-content, #caption {    
  98.     -webkit-animation-name: zoom;
  99.     -webkit-animation-duration: 0.6s;
  100.     animation-name: zoom;
  101.     animation-duration: 0.6s;
  102. }
  103.  
  104. @-webkit-keyframes zoom {
  105.     from {-webkit-transform: scale(0)}
  106.     to {-webkit-transform: scale(1)}
  107. }
  108.  
  109. @keyframes zoom {
  110.     from {transform: scale(0.1)}
  111.     to {transform: scale(1)}
  112. }
  113.  
  114. /* The Close Button */
  115. .close {
  116.     position: absolute;
  117.     top: 15px;
  118.     right: 35px;
  119.     color: #f1f1f1;
  120.     font-size: 40px;
  121.     font-weight: bold;
  122.     transition: 0.3s;
  123. }
  124.  
  125. .close:hover,
  126. .close:focus {
  127.     color: #bbb;
  128.     text-decoration: none;
  129.     cursor: pointer;
  130. }
  131.  
  132. /* 100% Image Width on Smaller Screens */
  133. @media only screen and (max-width: 700px){
  134.     .modal-content {
  135.         width: 100%;
  136.     }
  137. }
  138. </style>
  139. <body>
  140.  
  141. <!-- Navbar (sit on top) -->
  142. <div class="w3-top">
  143.   <div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">
  144.     <a href="#home" class="w3-bar-item w3-button">Home</a>
  145.     <!-- Right-sided navbar links. Hide them on small screens -->
  146.     <div class="w3-right w3-hide-small">
  147.       <a href="#about" class="w3-bar-item w3-button">About</a>
  148.       <a href="#gallery" class="w3-bar-item w3-button">Gallery</a>
  149.       <a href="#contact" class="w3-bar-item w3-button">Contact</a>
  150.     </div>
  151.   </div>
  152. </div>
  153.  
  154. <!-- Header -->
  155. <header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
  156. <div class="w3-display-container w3-content w3-wide">
  157.   <img src="https://i.imgur.com/FVDgyXx.jpg" alt="Notebook" style="width:100%;">
  158.   <div class="content1">
  159.     <h1>Welcome From Our Coffee Shop</h1>
  160.     <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p>
  161.   </div>
  162. </div>
  163. </header>
  164. <!-- Page content -->
  165. <div class="w3-content" style="max-width:1100px">
  166.  
  167.   <!-- About Section -->
  168.   <div class="w3-row w3-padding-64" id="about">
  169.     <div class="w3-col m6 w3-padding-large w3-hide-small">
  170.      <img src="https://i.imgur.com/zm8MeAr.jpg" class="w3-round w3-image w3-opacity-min" alt="Table Setting" width="600" height="750">
  171.     </div>
  172.  
  173.     <div class="w3-col m6 w3-padding-large">
  174.       <h1 class="w3-center">About</h1><br>
  175.       <h5 class="w3-center">This article is about the beverage. For the seed from which it is made.</h5>
  176.       <p class="w3-large">Coffea canephora — C. canephora var. Robusta Variety: Robusta</p>
  177.       Most of the world's Robusta is grown in Central and Western Africa, parts of Southeast Asia, including Indonesia and Vietnam, and in Brazil. Production of Robusta is increasing, though it accounts for only about 30% of the world market.
  178.  
  179.       Robusta is primarily used in blends and for instant coffees. The Robusta bean itself tends to be slightly rounder and smaller than an Arabica bean.  
  180.  
  181.       The Robusta tree is heartier and more resistant to disease and parasites, which makes it easier and cheaper to cultivate. It also has the advantage of being able to withstand warmer climates, preferring constant temperatures between 75 and 85 degrees Fahrenheit, which enables it to grow at far lower altitudes than Arabica.  
  182.  
  183.       It requires about 60 inches of rainfall a year, and cannot withstand frost. Compared with Arabica, Robusta beans produce a coffee which has a distinctive taste and about 50-60% more caffeine.  </p>
  184.     </div>
  185.   </div>
  186.  
  187.   <hr>
  188.  
  189.   <div class="w3-container w3-padding-64" id="gallery">
  190.     <div class="w3-col m6 w3-padding-large w3-hide-small">
  191.      <img src="https://i.imgur.com/zm8MeAr.jpg" class="w3-round w3-image w3-opacity-min" alt="Table Setting" width="600" height="750">
  192.     </div>
  193.     <h1>Our Gallery</h1>
  194.     <p>Robusta is primarily used in blends and for instant coffees. The Robusta bean itself tends to be slightly rounder and smaller than an Arabica bean.</p>
  195.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  196.     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  197.     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  198.     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  199.     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  200.     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  201.     <br>
  202.     <br>
  203.     <img id="myImg" src="https://i.imgur.com/2VqjkvQ.jpg" alt="Northern Lights, Norway" width="300" height="200">
  204.     <img id="myImg" src="https://i.imgur.com/TuzhGxx.jpg" alt="Northern Lights, Norway" width="300" height="200">
  205.     <img id="myImg" src="https://i.imgur.com/FuqYJxq.jpg" alt="Northern Lights, Norway" width="300" height="200">
  206.     <img id="myImg" src="https://i.imgur.com/68Drxsv.jpg" alt="Northern Lights, Norway" width="300" height="200">
  207.     <img id="myImg" src="https://i.imgur.com/CYfZ1qB.jpg" alt="Northern Lights, Norway" width="300" height="200">
  208.     <img id="myImg" src="https://i.imgur.com/GcuMeCn.jpg" alt="Northern Lights, Norway" width="300" height="200">
  209.     <!-- The Modal -->
  210.     <div id="myModal" class="modal">
  211.       <span class="close">×</span>
  212.       <img class="modal-content" id="img01">
  213.       <div id="caption"></div>
  214.     </div>
  215.  
  216.     <script>
  217.     // Get the modal
  218.     var modal = document.getElementById('myModal');
  219.  
  220.     // Get the image and insert it inside the modal - use its "alt" text as a caption
  221.     var img = document.getElementById('myImg');
  222.     var modalImg = document.getElementById("img01");
  223.     var captionText = document.getElementById("caption");
  224.     img.onclick = function(){
  225.         modal.style.display = "block";
  226.         modalImg.src = this.src;
  227.         captionText.innerHTML = this.alt;
  228.     }
  229.  
  230.     // Get the <span> element that closes the modal
  231.     var span = document.getElementsByClassName("close")[0];
  232.  
  233.     // When the user clicks on <span> (x), close the modal
  234.     span.onclick = function() {
  235.         modal.style.display = "none";
  236.     }
  237.     </script>
  238.   </div>
  239.  
  240.   <hr>
  241.  
  242.   <!-- Contact Section -->
  243.   <div class="w3-container w3-padding-64" id="contact">
  244.     <h1>Contact</h1><br>
  245.     <p>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.</p>
  246.     <p class="w3-text-blue-grey w3-large"><b>Delievery Service, 19 St, Yangon, Myanmar</b></p>
  247.     <p>You can also contact us by phone 09797473847 or email info@coffee.com, or you can send us a message here:</p>
  248.     <form action="/action_page.php" target="_blank">
  249.       <p><input class="w3-input w3-padding-16" type="text" placeholder="Name" required name="Name"></p>
  250.       <p><input class="w3-input w3-padding-16" type="number" placeholder="How many people" required name="People"></p>
  251.       <p><input class="w3-input w3-padding-16" type="datetime-local" placeholder="Date and time" required name="date" value="2018-02-16T20:00"></p>
  252.       <p><input class="w3-input w3-padding-16" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
  253.       <p><button class="w3-button w3-light-grey w3-section" type="submit">SEND MESSAGE</button></p>
  254.     </form>
  255.   </div>
  256.  
  257. <!-- End page content -->
  258. </div>
  259.  
  260. <!-- Footer -->
  261. <footer class="w3-center w3-light-grey w3-padding-32">
  262.   <p>Powered by <a href="#" title="W3.CSS" target="_blank" class="w3-hover-text-green">HtetMyet</a></p>
  263. </footer>
  264.  
  265. </body>
  266. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!