Skip to content

Instantly share code, notes, and snippets.

@buildbro
Last active January 23, 2023 10:49
Show Gist options
  • Save buildbro/6a262bb43c4a2feb789c4f18e8d45423 to your computer and use it in GitHub Desktop.
Save buildbro/6a262bb43c4a2feb789c4f18e8d45423 to your computer and use it in GitHub Desktop.
BB-Web Dev class CSS Page Layout design D1 - Navbar
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="upper-row">
<div class="container">
<img src="img/logo.png">
<div class="ads-box"></div>
</div>
</div>
<nav>
<div class="container">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
<div class="hero">
<div class="container">
<div class="hero-text">
<h1>Latest Nigerian News...</h1>
<p>TVC New is your number 1 destination for everything Nigeria...</p>
<button>Subscribe</button>
</div>
</div>
</div>
<div class="main-content-section">
<div class="container">
<div class="main-grid-container">
<div>
<h1>Latest updates</h1>
<div class="news-item">
<img src="img/Buhari-m.jpg">
<p>Buhari assures Nigerians of credible elections...</p>
</div>
<div class="news-item">
<img src="img/Buhari-m.jpg">
<p>Buhari assures Nigerians of credible elections...</p>
</div>
<div class="news-item">
<img src="img/Buhari-m.jpg">
<p>Buhari assures Nigerians of credible elections...</p>
</div>
</div>
<div>
<h1>Categories</h1>
<ul>
<li>Sports</li>
<li>Politics</li>
<li>Money</li>
<li>Entertainment</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #222244;
height: 55px;
}
nav a {
color: #FFFFFF;
text-decoration: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
margin-right: 16px;
border-left: 1px solid #FFFFFF;
padding-left: 16px;
padding-top: 18px;
padding-bottom: 18px;
}
.upper-row {
overflow: hidden;
margin-top: 42px;
margin-bottom: 42px;
}
.ads-box {
border: 1px solid #888888;
width: 500px;
height: 100px;
float: right;
}
.hero {
height: 480px;
background-image: url("../img/Buhari-m.jpg");
background-size: cover;
}
.hero-text {
padding-top: 70px;
max-width: 550px;
margin: 0 auto;
text-align: center;
}
.hero .hero-text h1 {
margin-top: 0;
color: #FFFFFF;
}
.main-content-section {
}
.main-grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.news-item img {
max-width: 200px;
}
.news-item {
width: 100%;
border: 1px solid #EEEEEE;
padding: 8px;
margin-bottom: 16px;
border-radius: 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment