API tools faq
paste
Patrikrizek

lesson-2-homework-help

Patrikrizek
Jun 12th, 2022
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* Globals */
  10.         body, html {
  11.             height: 100%;
  12.             margin: 0;
  13.         }
  14.  
  15.         p, span {
  16.             font-size: 22px;
  17.         }
  18.  
  19.         /* Classes */
  20.         .header {
  21.             height: 100%;
  22.             background-position: center;
  23.             background-repeat: no-repeat;
  24.             background-size: cover;
  25.             background: linear-gradient(
  26.                 rgba(0, 0, 0, 0.3),
  27.                 rgba(0, 0, 0, 0.3)),
  28.                 url("link to your background picture");
  29.         }
  30.        
  31.         .header {
  32.             display: flex;
  33.             justify-content: center;
  34.             align-items: center;
  35.         }
  36.        
  37.         .myHeaderText {
  38.             font-size: 50px;
  39.             color: white;
  40.         }
  41.        
  42.         .nav {
  43.             display: flex;
  44.             justify-content: center;
  45.             align-items: center;
  46.         }
  47.  
  48.         .nav li {
  49.             display: inline;
  50.             margin-right: 50px;
  51.         }
  52.  
  53.         .myNavText a {
  54.             font-size: 30px;
  55.             text-decoration: none;
  56.             text-transform: uppercase;
  57.         }
  58.        
  59.         .myNavText a:hover {
  60.             font-size: 30px;
  61.             text-decoration: underline;
  62.             text-transform: uppercase;
  63.         }
  64.  
  65.         .filler {
  66.             background-color: lightgray;
  67.             padding: 50px;
  68.             column-count: 3;
  69.             column-gap: 20px;
  70.         }
  71.        
  72.         .fl-right, .fl-left {
  73.             height: 300px;
  74.             padding: 50px;
  75.         }
  76.  
  77.         .fl-right img {
  78.             float: right;
  79.             margin-left: 30px;
  80.         }
  81.        
  82.         .fl-left img {
  83.             float: left;
  84.             margin-right: 30px;
  85.         }
  86.        
  87.         .bg-gray {
  88.             background-color: lightgrey;
  89.         }
  90.  
  91.         .button {
  92.             background-color: green;
  93.             color: white;
  94.             border: none;
  95.             padding: 10px;
  96.             border-radius: 10px;
  97.             font-size: 18px;
  98.             text-decoration: none;
  99.             text-transform: uppercase;
  100.  
  101.         }
  102.  
  103.         .footer {
  104.             display: flex;
  105.             justify-content: center;
  106.             align-items: center;
  107.             padding: 10px;
  108.         }
  109.     </style>
  110. </head>
  111. <body>
  112.     <div class="header myHeaderText">
  113.         <h1>This is a My Park</h1>
  114.     </div>
  115.  
  116.     <div class="nav myNavText">
  117.         <ul>
  118.             <li><a href="#green-park">Green Park</a></li>
  119.             <li><a href="#yellow-park">Yellow Park</a></li>
  120.             <li><a href="#blue-park">Blue Park</a></li>
  121.         </ul>
  122.     </div>
  123.  
  124.     <div class="filler">
  125.         <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsa aliquam fugit illo facere iusto, eos deserunt cum quis sint minima quisquam eveniet voluptate illum suscipit quia corporis vel nesciunt repellendus placeat, consequatur, obcaecati nulla officia! Amet dolores, id molestiae dolorum veritatis dolorem velit pariatur incidunt quasi. Voluptatum minima possimus non quibusdam cum aliquid quasi, repellendus consequatur assumenda odio, fugiat doloremque ab nesciunt, aut rerum soluta praesentium quaerat incidunt velit alias omnis reprehenderit? Unde repellendus doloremque dolor odit velit voluptatibus accusamus dolorem sit aperiam non veniam suscipit veritatis tempora autem numquam, reiciendis nemo nihil, tenetur minima consequuntur, incidunt illo. Architecto?</span>
  126.     </div>
  127.  
  128.     <div id="green-park" class="fl-right">
  129.         <img src="..." alt="park" height="300px">
  130.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium, explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus qui, animi esse accusantium. Eius, quaerat totam.</p>
  131.         <a href="#" class="button">Click Me!</a>
  132.     </div>
  133.  
  134.     <div id="yellow-park" class="fl-left bg-gray">
  135.         <img src="..." alt="park" height="300px">
  136.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium, explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus qui, animi esse accusantium. Eius, quaerat totam.</p>
  137.         <a href="#" class="button">Click Me!</a>
  138.     </div>
  139.  
  140.     <div id="blue-park" class="fl-right">
  141.         <img src="..." alt="park" height="300px">
  142.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium, explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus qui, animi esse accusantium. Eius, quaerat totam.</p>
  143.         <a href="#" class="button">Click Me!</a>
  144.     </div>
  145.  
  146.     <div class="footer bg-gray">
  147.         <small>2022&copy; My Park Website | All rights reserved.</small>
  148.     </div>
  149. </body>
  150. </html>
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!