<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Holy Grail Mockup</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header"> <div class="logo">Header Logo</div> <div class="menu"> <ul> <li>header link one</li> <li>header link two</li> <li>header link three</li> <li>header link four</li> </ul> </div> </div> <div class="sidebar"> <div class="photo"> <p>placeholder for image</p> </div> <div class="side-content">Box 1 </div> <div class="side-content">Box 2 </div> <div class="side-content">Box 3 </div> </div> <div class="nav"> <ul> <li>Latest Articles</li> <li>Most Views</li> <li>Featured</li> </ul> </div> <div class="article"> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> <div class="card"> <p class="title">Article Title</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p> </div> </div> <div class="footer"> <p>Copyright © The Odin Project 2021 </div> </div> </body> </html>