123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>HW3</title>
- <link rel="stylesheet" href="css/styles.css">
- </head>
- <body>
- <header>
- <div class="container clearfix">
- <div class="logo">
- <img src="images/logo.png" alt="Black and White">
- <p>Lorem ipsum dolor sit amet</p>
- </div>
- <form action="url">
- <input type="text" name="text-search">
- <input type="submit" name="button-search" value="Search">
- </form>
- </div>
- </header>
- <section class="banner">
- <div class="container">
- <img src="images/banner.jpg" alt="img">
- <div class="banner-text">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br>
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </div>
- </div>
- </section>
- <section class="nav-bar">
- <div class="container clearfix">
- <nav>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Work</a></li>
- <li><a href="#">Blog</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </nav>
- </div>
- </section>
- <main>
- <div class="container-main">
- <div class="container-main-inner">
- <div class="we-do">
- <h1>What we do</h1>
- <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span>commodo consequat</span>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
- ollit anim id est laborum.</p>
- <h2>Images</h2>
- <img src="images/image1.jpg" alt="img">
- <img src="images/image2.jpg" alt="img">
- <img src="images/image3.jpg" alt="img">
- <img src="images/image4.jpg" alt="img">
- </div>
- <div class="lists">
- <h2>Lists and Descriptions</h2>
- <ul>
- <li>Sed ut perspiciatis unde omnis iste natus</li>
- <li>Lorem ipsum dolor sit amet, consectetur</li>
- <li>At vero eos et accusamus et iusto odio</li>
- <li>Et harum quidem rerum facilis est</li>
- </ul>
- <ol>
- <li>Sed ut perspiciatis unde omnis iste natus</li>
- <li>Lorem ipsum dolor sit amet, consectetur</li>
- <li>At vero eos et accusamus et iusto odio</li>
- <li>Et harum quidem rerum facilis est</li>
- </ol>
- <dl>
- <dt>Sed ut perspiciatis unde omnis iste natus</dt>
- <dd>Lorem ipsum dolor sit amet, consectetur</dd>
- <dt>At vero eos et accusamus et iusto odio</dt>
- <dd>Et harum quidem rerum facilis est</dd>
- </dl>
- </div>
- <div class="table">
- <h2>Table</h2>
- <table>
- <thead>
- <tr>
- <th>Lorem</th>
- <th>Sed ut perspiciatis unde</th>
- <th>Sed ut perspiciatis unde</th>
- <th>Sed ut perspiciatis unde</th>
- </tr>
- </thead>
- <tr>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- </tr>
- <tr>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- </tr>
- <tr>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- </tr>
- <tr>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- <td>At vero eos et</td>
- </tr>
- </table>
- </div>
- <div class="forms">
- <form action="url">
- <h2>Forms</h2>
- <label for="text-input">Text:</label><br>
- <input type="text" id="text-input" placeholder="Input type text"><br>
- <label for="select">Select:</label><br>
- <select id="select">
- <option value="Option">Option</option>
- <option value="Option">Option</option>
- <option value="Option">Option</option>
- <option value="Option">Option</option>
- </select><br>
- <input type="checkbox" class="checkbox">
- <span>Sed ut perspiciatis unde omnis iste natus</span><br>
- <input type="radio" class="radio">
- <span>Lorem ipsum dolor sit amet, consectetur</span><br>
- <label for="textarea">Textarea:</label><br>
- <textarea id="textarea" cols="40" rows="8"></textarea><br>
- <input type="submit" class="submit" value="Button">
- </form>
- </div>
- </div>
- </div>
- </main>
- <footer>
- <div class="container">
- © Footer content <a href="#">Link footer</a>
- </div>
- </footer>
- </body>
- </html>
|