API tools faq
paste
Patrikrizek

lesson-3-index.html

Patrikrizek
Apr 26th, 2022
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6.     <title>Web Page with Divs</title>
  7.  
  8.     <!-- CSS -->
  9.     <style>
  10.         /* Globals */
  11.         body {
  12.             background-color: lightgray;
  13.         }
  14.  
  15.         h1 {
  16.             font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  17.             font-size: 48px;
  18.         }
  19.  
  20.         h2 {
  21.             font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  22.             font-size: 36px;
  23.         }
  24.  
  25.         h3 {
  26.             font-family: 'Courier New', Courier, monospace;
  27.             font-size: 30px;
  28.         }
  29.        
  30.        
  31.         p {
  32.             font-family:Arial, Helvetica, sans-serif;
  33.             font-weight: normal;
  34.             font-size: 16px;
  35.         }
  36.        
  37.         /* Clasess */
  38.         .textInRed {
  39.             color: red;
  40.             font-weight: bold;
  41.         }
  42.  
  43.         .itemsInLine li {
  44.             display: inline;
  45.             margin-right: 15px;
  46.         }
  47.  
  48.         .boldItalic {
  49.             font-weight: bold;
  50.             font-style: italic;
  51.         }
  52.            
  53.         /* IDs */
  54.         #header {
  55.             background-color: red;
  56.         }
  57.  
  58.         #navigation {
  59.             background-color: green;
  60.         }
  61.  
  62.         #main {
  63.             background-color: blue;
  64.         }
  65.  
  66.         #footer {
  67.             background-color: yellow;
  68.         }
  69.     </style>
  70. </head>
  71.  
  72. <body>
  73.  
  74.     <div id="header">
  75.         <h1>This is a headline</h1>
  76.         <h2 class="pureClass">This is a tagline.</h2>
  77.     </div>
  78.  
  79.     <div id="navigation">
  80.         <ul class="itemsInLine">
  81.             <li><a href="#">About</a></li>
  82.             <li><a href="#">Products</a></li>
  83.             <li><a href="#">Contact</a></li>
  84.         </ul>
  85.     </div>
  86.  
  87.     <div id="main">
  88.         <p>Lorem, ipsum dolor sit amet <em>consectetur adipisicing</em> elit. Illum suscipit voluptas quas amet similique vel <b>praesentium accusamus</b> ea ducimus? Voluptate minus porro assumenda nisi quis fugit alias ut molestias! Reiciendis perspiciatis voluptate quos a, <i>cum nisi illo expedita</i> aliquid delectus sunt et eos, asperiores sequi dolorem porro facilis harum consequuntur laboriosam magni nihil! Repellendus, reiciendis animi inventore <del>deleniti dolore tempore</del> <ins>ut accusantium pariatur</ins> sit minus totam repudiandae impedit, suscipit harum quibusdam exercitationem. Et eaque sit cumque asperiores? Delectus libero beatae iste eos maiores debitis veniam explicabo asperiores blanditiis voluptatem consectetur et aspernatur aliquam consequatur, tempore facilis repellat dicta similique aliquid?</p>
  89.  
  90.         <p class="textInRed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste aspernatur quisquam saepe consectetur, porro officia sit quis reiciendis omnis laborum facilis necessitatibus ducimus recusandae asperiores culpa numquam sunt ab id, voluptas doloribus quam. Quibusdam perferendis ipsum eaque sed dolor ratione officia autem aliquam explicabo vero recusandae et magni eos sunt, assumenda voluptatem corrupti excepturi quidem. Ratione deleniti laborum magnam, a sapiente alias, ipsa voluptatum natus qui animi quis quisquam dicta molestiae enim voluptate amet veritatis aspernatur modi est molestias cumque eius exercitationem soluta ut. Alias maiores enim tenetur dolorum facere cupiditate quis veritatis temporibus iure! Quae incidunt reiciendis non facere.</p>
  91.        
  92.         <p class="boldItalic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit eos sint eveniet neque, nesciunt minus tempora alias quam ullam quisquam magnam atque temporibus, facere ad necessitatibus sapiente voluptatibus incidunt accusantium consectetur earum ipsum. Iusto aliquid facilis in adipisci. Itaque rerum quam, dolorum commodi <span class="textInRed">tempora maiores eos iure</span>, corporis quis animi in mollitia eaque nam modi adipisci possimus totam laborum cupiditate, soluta sit exercitationem vel sint voluptate. Quo in ipsam necessitatibus hic nihil unde ut animi amet voluptas commodi! Praesentium totam, saepe sapiente quo eum eaque, dignissimos nostrum laboriosam optio ullam eveniet autem laudantium officia vero quam cumque ducimus at.</p>
  93.  
  94.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus odit ipsum corporis distinctio! Debitis, <a href="#">architecto minus voluptatum</a> expedita corporis pariatur?</p>
  95.  
  96.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nihil repellat porro laudantium velit eum voluptates explicabo eos tenetur necessitatibus aliquam dolores deserunt doloremque, sint officia! Natus soluta doloremque rem nesciunt delectus vel omnis porro fugiat, iusto harum aut similique dolore qui quod consectetur corrupti ullam officia! Perspiciatis facere officiis possimus repellendus voluptate incidunt non, illo fugiat quidem provident perferendis eum excepturi a optio ipsam assumenda. Possimus nostrum magni suscipit! Perferendis qui ratione cupiditate! Obcaecati maiores vitae porro dicta dolorum.</p>
  97.  
  98.         <ul>
  99.             <li>Item One</li>
  100.             <li>Item Two</li>
  101.             <li>Item Three</li>
  102.         </ul>
  103.  
  104.         <a href="#" target="_blank">
  105.             <img src="#" alt="this is a image with a link">
  106.         </a>
  107.  
  108.     </div>
  109.  
  110.     <div id="footer">
  111.         <p class="rights">&copy; 2022 All rights reserver. Developed by XYZ.</p>
  112.     </div>
  113.  
  114. </body>
  115.  
  116. </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!