cgorrillaha

Untitled

Feb 1st, 2022
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.80 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>index - unit 6 Multi-Column Layout</title>
  5.         <style>
  6.             h1, h2{
  7.                 color:#361e2f;
  8.             }
  9.             body{
  10.                 background-color:#4a3740;
  11.             }
  12.             .main-content{
  13.                 width: 52%;
  14.                 float:left;
  15.                 padding: 2%;
  16.             }
  17.             .left-content, .side-content{
  18.                 width: 18%;
  19.                 float: left;
  20.                 padding: 2%;
  21.             }
  22.            
  23.             .clear-floats{
  24.                 clear: both;
  25.             }
  26.        
  27.             img{
  28.                 max-width: 100%;/*makes sure that the image will not break out of its container*/
  29.             }
  30.            
  31.             figure{
  32.                 width: 25%;
  33.                 padding: 1% 1% 2% 1%;
  34.                 background-color: #91a3af;
  35.             }
  36.            
  37.             .float-right{
  38.                 float:right;
  39.             }
  40.            
  41.             .wrapper{
  42.                 background-color: #d9c577;
  43.                 width: 65%;
  44.                 margin: 0 auto;
  45.                 padding: 2%;
  46.             }
  47.            
  48.         </style>           
  49.     </head>
  50.     <body>
  51.         <div class="wrapper">
  52.             <header>
  53.                 <h1>Main Headline</h1>
  54.             </header>
  55.             <nav>
  56.                 <ul>
  57.                     <li><a href="page2.html">Link here</a></li>
  58.                     <li><a href="page3.html">Link here</a></li>
  59.                     <li><a href="page4.html">Link here</a></li>
  60.                     <li><a href="page5.html">Link here</a></li>
  61.                 </ul>
  62.             </nav>
  63.            
  64.             <div class="left-content">
  65.                 <article>
  66.                     <h2>Subhead</h2>
  67.                     <p>
  68.                     Lorem ipsum dolor sit amet, sumo officiis ei vix, iriure labores ut pro, ea per errem laboramus reprimique. Diam democritum adversarium ut vel, error blandit et sed, et qui animal sapientem definiebas. Tota alterum his an, paulo dolorem usu ut, in nihil nemore nam. Discere vivendo efficiendi at eam, et iisque euripidis has. Ne autem semper nec, ne sed vidisse atomorum convenire. Ei dicant repudiare his, an his tantas iracundia inciderint.
  69.                     </p>
  70.                     <p>
  71.                     Altera qualisque consulatu eu duo. An dicant fierent commune sed. Ex vim laudem vituperatoribus. Quaeque senserit no eum, te vivendo petentium qui. Vidisse evertitur vulputate cu sed, ipsum aperiri vivendo id pro, ea ceteros legendos urbanitas mea. Vix te diam iriure intellegat. Quo adversarium definitionem eu.
  72.                     </p>
  73.                     <p>
  74.                     An qui atqui exerci vulputate, pri cu viderer feugait theophrastus. Honestatis disputationi an cum, graeci scripserit ullamcorper pri cu. Numquam accusamus consetetur duo et, maluisset suscipiantur vis cu, pro alii probatus moderatius in. Ea sea summo utamur interesset, an unum zril latine qui. Vel recteque qualisque no. Eu aliquid impedit mel.
  75.                     </p>
  76.                     <p>
  77.                     Mei ea natum iisque, pro ei quis iracundia. Pri sumo vocibus repudiare ex, liber offendit ea eos. Ut appetere sensibus torquatos sea, ne pro veri ipsum eligendi. Dolore tritani deterruisset cu cum. Cum te postulant voluptaria.
  78.                     </p>
  79.                 </article>
  80.             </div><!--end left-content-->
  81.            
  82.             <div class="main-content">
  83.                 <article>
  84.                     <h2>Subhead</h2>
  85.                    
  86.                     <figure class="float-right">
  87.                         <img src="" alt="Marauders #1- 2019" />
  88.                         <figcaption>
  89.                             Marauders #1 Cover - 2019
  90.                         </figcaption>
  91.                     </figure>
  92.                    
  93.                     <p>
  94.                     Lorem ipsum dolor sit amet, sumo officiis ei vix, iriure labores ut pro, ea per errem laboramus reprimique. Diam democritum adversarium ut vel, error blandit et sed, et qui animal sapientem definiebas. Tota alterum his an, paulo dolorem usu ut, in nihil nemore nam. Discere vivendo efficiendi at eam, et iisque euripidis has. Ne autem semper nec, ne sed vidisse atomorum convenire. Ei dicant repudiare his, an his tantas iracundia inciderint.
  95.                     </p>
  96.                     <p>
  97.                     Altera qualisque consulatu eu duo. An dicant fierent commune sed. Ex vim laudem vituperatoribus. Quaeque senserit no eum, te vivendo petentium qui. Vidisse evertitur vulputate cu sed, ipsum aperiri vivendo id pro, ea ceteros legendos urbanitas mea. Vix te diam iriure intellegat. Quo adversarium definitionem eu.
  98.                     </p>
  99.                     <p>
  100.                     An qui atqui exerci vulputate, pri cu viderer feugait theophrastus. Honestatis disputationi an cum, graeci scripserit ullamcorper pri cu. Numquam accusamus consetetur duo et, maluisset suscipiantur vis cu, pro alii probatus moderatius in. Ea sea summo utamur interesset, an unum zril latine qui. Vel recteque qualisque no. Eu aliquid impedit mel.
  101.                     </p>
  102.                     <p>
  103.                     Mei ea natum iisque, pro ei quis iracundia. Pri sumo vocibus repudiare ex, liber offendit ea eos. Ut appetere sensibus torquatos sea, ne pro veri ipsum eligendi. Dolore tritani deterruisset cu cum. Cum te postulant voluptaria.
  104.                     </p>
  105.                     <p>
  106.                     Lorem ipsum dolor sit amet, sumo officiis ei vix, iriure labores ut pro, ea per errem laboramus reprimique. Diam democritum adversarium ut vel, error blandit et sed, et qui animal sapientem definiebas. Tota alterum his an, paulo dolorem usu ut, in nihil nemore nam. Discere vivendo efficiendi at eam, et iisque euripidis has. Ne autem semper nec, ne sed vidisse atomorum convenire. Ei dicant repudiare his, an his tantas iracundia inciderint.
  107.                     </p>
  108.                     <p>
  109.                     Altera qualisque consulatu eu duo. An dicant fierent commune sed. Ex vim laudem vituperatoribus. Quaeque senserit no eum, te vivendo petentium qui. Vidisse evertitur vulputate cu sed, ipsum aperiri vivendo id pro, ea ceteros legendos urbanitas mea. Vix te diam iriure intellegat. Quo adversarium definitionem eu.
  110.                     </p>
  111.                     <p>
  112.                     An qui atqui exerci vulputate, pri cu viderer feugait theophrastus. Honestatis disputationi an cum, graeci scripserit ullamcorper pri cu. Numquam accusamus consetetur duo et, maluisset suscipiantur vis cu, pro alii probatus moderatius in. Ea sea summo utamur interesset, an unum zril latine qui. Vel recteque qualisque no. Eu aliquid impedit mel.
  113.                     </p>
  114.                     <p>
  115.                     Mei ea natum iisque, pro ei quis iracundia. Pri sumo vocibus repudiare ex, liber offendit ea eos. Ut appetere sensibus torquatos sea, ne pro veri ipsum eligendi. Dolore tritani deterruisset cu cum. Cum te postulant voluptaria.
  116.                     </p>
  117.                     <p>
  118.                     Lorem ipsum dolor sit amet, sumo officiis ei vix, iriure labores ut pro, ea per errem laboramus reprimique. Diam democritum adversarium ut vel, error blandit et sed, et qui animal sapientem definiebas. Tota alterum his an, paulo dolorem usu ut, in nihil nemore nam. Discere vivendo efficiendi at eam, et iisque euripidis has. Ne autem semper nec, ne sed vidisse atomorum convenire. Ei dicant repudiare his, an his tantas iracundia inciderint.
  119.                     </p>
  120.                     <p>
  121.                     Altera qualisque consulatu eu duo. An dicant fierent commune sed. Ex vim laudem vituperatoribus. Quaeque senserit no eum, te vivendo petentium qui. Vidisse evertitur vulputate cu sed, ipsum aperiri vivendo id pro, ea ceteros legendos urbanitas mea. Vix te diam iriure intellegat. Quo adversarium definitionem eu.
  122.                     </p>
  123.                     <p>
  124.                     An qui atqui exerci vulputate, pri cu viderer feugait theophrastus. Honestatis disputationi an cum, graeci scripserit ullamcorper pri cu. Numquam accusamus consetetur duo et, maluisset suscipiantur vis cu, pro alii probatus moderatius in. Ea sea summo utamur interesset, an unum zril latine qui. Vel recteque qualisque no. Eu aliquid impedit mel.
  125.                     </p>
  126.                     <p>
  127.                     Mei ea natum iisque, pro ei quis iracundia. Pri sumo vocibus repudiare ex, liber offendit ea eos. Ut appetere sensibus torquatos sea, ne pro veri ipsum eligendi. Dolore tritani deterruisset cu cum. Cum te postulant voluptaria.
  128.                     </p>
  129.                 </article>
  130.             </div><!--end main content-->
  131.            
  132.             <div class="side-content">
  133.                 <article>
  134.                     <h2>Subhead</h2>
  135.                     <p>
  136.                     Lorem ipsum dolor sit amet, sumo officiis ei vix, iriure labores ut pro, ea per errem laboramus reprimique. Diam democritum adversarium ut vel, error blandit et sed, et qui animal sapientem definiebas. Tota alterum his an, paulo dolorem usu ut, in nihil nemore nam. Discere vivendo efficiendi at eam, et iisque euripidis has. Ne autem semper nec, ne sed vidisse atomorum convenire. Ei dicant repudiare his, an his tantas iracundia inciderint.
  137.                     </p>
  138.                     <p>
  139.                     Altera qualisque consulatu eu duo. An dicant fierent commune sed. Ex vim laudem vituperatoribus. Quaeque senserit no eum, te vivendo petentium qui. Vidisse evertitur vulputate cu sed, ipsum aperiri vivendo id pro, ea ceteros legendos urbanitas mea. Vix te diam iriure intellegat. Quo adversarium definitionem eu.
  140.                     </p>
  141.                     <p>
  142.                     An qui atqui exerci vulputate, pri cu viderer feugait theophrastus. Honestatis disputationi an cum, graeci scripserit ullamcorper pri cu. Numquam accusamus consetetur duo et, maluisset suscipiantur vis cu, pro alii probatus moderatius in. Ea sea summo utamur interesset, an unum zril latine qui. Vel recteque qualisque no. Eu aliquid impedit mel.
  143.                     </p>
  144.                     <p>
  145.                     Mei ea natum iisque, pro ei quis iracundia. Pri sumo vocibus repudiare ex, liber offendit ea eos. Ut appetere sensibus torquatos sea, ne pro veri ipsum eligendi. Dolore tritani deterruisset cu cum. Cum te postulant voluptaria.
  146.                     </p>
  147.                 </article>
  148.             </div><!--end sidebar-->
  149.             <footer class="clear-floats"><p>Gorrill - Copyright 2022</p></footer>
  150.         </div><!--close wrapper-->
  151.     </body>
  152. </html>
Add Comment
Please, Sign In to add comment