API tools faq
paste
Patrikrizek

lesson-4-park-helper

Patrikrizek
Nov 10th, 2022
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         /* Globals */
  11.         body,
  12.         html {
  13.             height: 100%;
  14.             margin: 0;
  15.         }
  16.  
  17.         p,
  18.         span {
  19.             font-size: 22px;
  20.         }
  21.  
  22.         /* Classes */
  23.         .header {
  24.             height: 100%;
  25.             background-position: center;
  26.             background-repeat: no-repeat;
  27.             background-size: cover;
  28.             background: linear-gradient(rgba(0, 0, 0, 0.3),
  29.                     rgba(0, 0, 0, 0.3)),
  30.                 url("link to your background picture");
  31.         }
  32.  
  33.         .header {
  34.             display: flex;
  35.             justify-content: center;
  36.             align-items: center;
  37.         }
  38.  
  39.         .myHeaderText {
  40.             font-size: 50px;
  41.             color: white;
  42.         }
  43.  
  44.         .nav {
  45.             display: flex;
  46.             justify-content: center;
  47.             align-items: center;
  48.         }
  49.  
  50.         .nav li {
  51.             display: inline;
  52.             margin-right: 50px;
  53.         }
  54.  
  55.         .myNavText a {
  56.             font-size: 30px;
  57.             text-decoration: none;
  58.             text-transform: uppercase;
  59.         }
  60.  
  61.         .myNavText a:hover {
  62.             font-size: 30px;
  63.             text-decoration: underline;
  64.             text-transform: uppercase;
  65.         }
  66.  
  67.         .filler {
  68.             background-color: lightgray;
  69.             padding: 50px;
  70.             column-count: 3;
  71.             column-gap: 20px;
  72.         }
  73.  
  74.         .fl-right,
  75.         .fl-left {
  76.             height: 300px;
  77.             padding: 50px;
  78.         }
  79.  
  80.         .fl-right img {
  81.             float: right;
  82.             margin-left: 30px;
  83.         }
  84.  
  85.         .fl-left img {
  86.             float: left;
  87.             margin-right: 30px;
  88.         }
  89.  
  90.         .bg-gray {
  91.             background-color: lightgrey;
  92.         }
  93.  
  94.         .button {
  95.             background-color: green;
  96.             color: white;
  97.             border: none;
  98.             padding: 10px;
  99.             border-radius: 10px;
  100.             font-size: 18px;
  101.             text-decoration: none;
  102.             text-transform: uppercase;
  103.  
  104.         }
  105.  
  106.         .wrapper {
  107.             background-color: burlywood;
  108.             padding: 20px;
  109.             display: flex;
  110.             justify-content: space-around;
  111.         }
  112.  
  113.         .wrapper .card {
  114.             background-color: cadetblue;
  115.             width: 300px;
  116.         }
  117.  
  118.         .wrapper .card .content {
  119.             padding: 10px 20px 40px 20px;
  120.             word-wrap: break-word;
  121.         }
  122.  
  123.         .info {
  124.             background-color: darkgreen;
  125.             padding: 20px 10%;
  126.             color: white;
  127.         }
  128.  
  129.         .half-screen {
  130.             width: 100%;
  131.             height: 500px;
  132.             background-color: cornflowerblue;
  133.         }
  134.  
  135.         .half-screen img {
  136.             width: 100%;
  137.             max-height: 500px;
  138.         }
  139.  
  140.         .half-screen p {
  141.             text-align: center;
  142.             padding: 50px;
  143.         }
  144.  
  145.         .left {
  146.             float: left;
  147.             width: 50%;
  148.         }
  149.  
  150.         .right {
  151.             float: right;
  152.             width: 50%;
  153.         }
  154.     </style>
  155. </head>
  156.  
  157. <body>
  158.     <div class="header myHeaderText">
  159.         <h1>This is a My Park</h1>
  160.     </div>
  161.  
  162.     <div class="nav myNavText">
  163.         <ul>
  164.             <li><a href="#green-park">Green Park</a></li>
  165.             <li><a href="#yellow-park">Yellow Park</a></li>
  166.             <li><a href="#blue-park">Blue Park</a></li>
  167.         </ul>
  168.     </div>
  169.  
  170.     <div class="filler">
  171.         <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsa aliquam fugit illo facere iusto, eos
  172.             deserunt cum quis sint minima quisquam eveniet voluptate illum suscipit quia corporis vel nesciunt
  173.             repellendus placeat, consequatur, obcaecati nulla officia! Amet dolores, id molestiae dolorum veritatis
  174.             dolorem velit pariatur incidunt quasi. Voluptatum minima possimus non quibusdam cum aliquid quasi,
  175.             repellendus consequatur assumenda odio, fugiat doloremque ab nesciunt, aut rerum soluta praesentium quaerat
  176.             incidunt velit alias omnis reprehenderit? Unde repellendus doloremque dolor odit velit voluptatibus
  177.             accusamus dolorem sit aperiam non veniam suscipit veritatis tempora autem numquam, reiciendis nemo nihil,
  178.             tenetur minima consequuntur, incidunt illo. Architecto?</span>
  179.     </div>
  180.  
  181.     <div id="green-park" class="fl-right">
  182.         <img src="..." alt="park" height="300px">
  183.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat
  184.             accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium,
  185.             explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus
  186.             qui, animi esse accusantium. Eius, quaerat totam.</p>
  187.         <a href="#" class="button">Click Me!</a>
  188.     </div>
  189.  
  190.     <div id="yellow-park" class="fl-left bg-gray">
  191.         <img src="..." alt="park" height="300px">
  192.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat
  193.             accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium,
  194.             explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus
  195.             qui, animi esse accusantium. Eius, quaerat totam.</p>
  196.         <a href="#" class="button">Click Me!</a>
  197.     </div>
  198.  
  199.     <div id="blue-park" class="fl-right">
  200.         <img src="..." alt="park" height="300px">
  201.         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi maxime mollitia deserunt blanditiis repellat
  202.             accusantium fugit iste molestiae cumque sint. Eaque natus unde nihil voluptate mollitia in laudantium,
  203.             explicabo maxime nesciunt corrupti earum iste at ab alias aspernatur incidunt delectus est magnam accusamus
  204.             qui, animi esse accusantium. Eius, quaerat totam.</p>
  205.         <a href="#" class="button">Click Me!</a>
  206.     </div>
  207.  
  208.     <div class="wrapper">
  209.         <div class="card">
  210.             <img src="..."
  211.                alt="park" width="300px">
  212.             <div class="content">
  213.                 <h3>Headline</h3>
  214.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis, necessitatibus.</p>
  215.                 <a href="#" class="button">Click Me!</a>
  216.             </div>
  217.         </div>
  218.  
  219.         <div class="card">
  220.             <img src="..."
  221.                alt="park" width="300px">
  222.             <div class="content">
  223.                 <h3>Headline</h3>
  224.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis, necessitatibus.</p>
  225.                 <a href="#" class="button">Click Me!</a>
  226.             </div>
  227.         </div>
  228.  
  229.         <div class="card">
  230.             <img src="..."
  231.                alt="park" width="300px">
  232.             <div class="content">
  233.                 <h3>Headline</h3>
  234.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis, necessitatibus.</p>
  235.                 <a href="#" class="button">Click Me!</a>
  236.             </div>
  237.         </div>
  238.     </div>
  239.  
  240.     <div class="info">
  241.         <h2>Find out more about this great park</h2>
  242.         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut nisi velit eligendi blanditiis beatae impedit, in error cumque incidunt sit?</p>
  243.     </div>
  244.    
  245.     <div class="half-screen">
  246.         <div class="half-screen left">
  247.             <img src="..." alt="">
  248.         </div>
  249.         <div class="half-screen right">
  250.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt assumenda hic, labore libero optio, commodi
  251.                 enim ad possimus sit explicabo eveniet officiis dolores consectetur excepturi deleniti iusto qui officia
  252.                 aliquid odio quia! Enim sunt ipsam et iste quasi illum, dolorem perferendis distinctio a maiores. Minima
  253.                 modi ex aspernatur totam quod?</p>
  254.         </div>
  255.     </div>
  256.  
  257.     <div class="footer bg-gray">
  258.         <small>2022&copy; My Park Website | All rights reserved.</small>
  259.     </div>
  260. </body>
  261.  
  262. </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!