API tools faq
paste
Advertisement
myname0

task3

myname0
Apr 12th, 2017
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.32 KB | None | 0 0
raw download clone embed print report
  1. <!Doctype html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" type="text/css" href="css/task3styles.css">
  5.     <meta charset = "utf-8">
  6. </head>
  7.    
  8. <body class="body-wrapper">
  9.     <header class="header-wrapper">
  10.         <div class="back-color">
  11.             <img src="images/brand-white.png" alt = "logo-image">
  12.  
  13.             <div class ="site-name" ><h1>Header</h1></div>
  14.             <form class = "button-in-header">
  15.                 <input type ="button" text = "Button">
  16.             </form>
  17.         </div>
  18.         <nav class = "topnav">
  19.             <ul class="top-menu" >
  20.                 <li><a href="/link 1/">Link 1</a></li>
  21.                 <li><a href="/link 2/">Link 2</a></li>
  22.                 <li><a href="/link 3/">Link 3</a></li>
  23.                 <li><a href="/link 4/">Link 4</a></li>
  24.             </ul>
  25.         </nav>
  26.        
  27.         <form class = "search-form">
  28.             <input type ="text" placeholder = "Search">
  29.             <input type="submit" value="Search">
  30.         </form>
  31.      
  32.         <div class="user-inf">
  33.             <img src="images/lirikN.jpg" alt="user image">
  34.             <p>User Name</p>
  35.         </div>
  36.     </header>
  37.    
  38.     <aside class = "left-aside-wrapper">
  39.         <nav>
  40.             <h3>Aside Header</h3>
  41.             <ul class="aside-menu" type = "none">
  42.                 <li><a href="/link 1/" >Link 1</a></li>
  43.                 <li><a href="/link 2/">Link 2</a></li>
  44.                 <li><a href="/link 3/">Link 3</a></li>
  45.                 <li><a href="/link 4/">Link 4</a></li>
  46.                 <li><a href="/link 5/">Link 5</a></li>
  47.             </ul>
  48.         </nav>
  49.     </aside>
  50.    
  51.     <aside class = "right-aside-wrapper">
  52.         <form class="registration-form">
  53.             <h2>Sign in</h2>
  54.             <input type="text" placeholder="Login">
  55.             <input type="text" placeholder="Password">
  56.             <input type="checkbox" id="remember-me-box">
  57.             <label for="remember-me-box">Remember me</label>
  58.             <input type="submit" value="Sign in">
  59.         </form>
  60.     </aside>
  61.    
  62.     <section class="gallery">
  63.         <h2>Gallery</h2>
  64.         <img src="images/1.jpg" alt="picture with cat">
  65.         <img src="images/2.jpg" alt="picture with cat">
  66.         <img src="images/3.jpg" alt="picture with cat">
  67.     </section>
  68.    
  69.     <section class ="articles">
  70.         <div class="first-article">
  71.             <img src="images/my-ginger-cat.jpg" alt="picture with cat">
  72.            
  73.             <h2>Header for article</h2>
  74.            
  75.             <p>Normal text</p>
  76.            
  77.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.</p>
  78.         </div>
  79.        
  80.         <div class="second-article">
  81.             <img src="images/o-cat.jpg" alt="picture with cat">
  82.            
  83.             <h2>Header for article</h2>
  84.            
  85.             <p>Normal text</p>
  86.            
  87.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.</p>
  88.         </div>
  89.     </section>
  90.    
  91.     <footer>
  92.         <nav class = "footernav">
  93.             <ul class="sitemap">
  94.                 <li><a href="/link 1/"><img src="images/node-sass.png" alt ="link-logo"></a></li>
  95.                 <li><a href="/link 2/"><img src="images/node-sass.png" alt ="link-logo"></a></li>
  96.                 <li><a href="/link 3/"><img src="images/node-sass.png" alt ="link-logo"></a></li>
  97.                 <li><a href="/link 4/"><img src="images/node-sass.png" alt ="link-logo"></a></li>
  98.                 <li><a href="/link 5/"><img src="images/node-sass.png" alt ="link-logo"></a></li>
  99.             </ul>
  100.         </nav>
  101.     </footer>
  102. </body>
  103. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!