69
Replies
Try this:
<!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">
<title>Untitled Document</title>
<link href="css/bootstrap-4.3.1.css" rel="stylesheet">
<!--custom styles-->
<style>
header {
background: #000 url(https://placeimg.com/1200/200/nature) no-repeat center center;
background-size: cover;
min-height: 200px;
color: white;
}
nav { background-color: antiquewhite; }
main { background-color: beige; }
footer { background-color: tan; }
</style>
</head>
<body class="container">
<header class="row">
<div class="col">
<h1>My Awesome Website Header</h1>
<h2>Some Pithy Slogan....</h2></div>
</header>
<div class="row">
<nav class="col-sm-3">
Navigation goes here...
</nav>
<main class="col-sm-9">
<article>
<h3>Heading 3</h3>
<p>Main article content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem modi, reiciendis nulla excepturi nihil! Libero vitae rem illo deleniti quas amet quibusdam, voluptatem ipsum distinctio asperiores adipisci non alias sint.</p>
</article>
</main>
</div>
<footer class="row">
<div class="col">Footer goes here</div>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>
Open document in Split view. I like code on the left and design/live on the right.
Click on the <header> in code side. Press Ctrl+E to bring up the Quick Edit Panel. You should now see all the relevant styles for the <header> selector.
sheryltoo wrote
When I used ID, they all had different names. I never really did much with the class selector.
That's ok then but I dont think its used in much main-stream development these days as its better practice to use:
<nav>
<a class="link">Link 1</a>
<a class="link">Link 2</a>
<a class="link">Link 3</a>
<a class="link">Link 4</a>
</nav>
Instead of giving your anchor tags each an individual id:
<nav>
<a id="link_1">Link 1</a>
<a id="link_2">Link 2</a>
<a id="link_3">Link 3</a>
<a id="link_4">Link 4</a>
</nav>
infact both examples above are terrible practice, one of which is used by Bootstrap, but you get my point.
Bootstrap use this kind of rubbish code
:
<div class="navbar-nav">
<a class="nav-item nav-link">Link 1</a>
</div>
This is more streamlined:
<nav>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
</nav>
nav a {
style your anchor tags
}
AdChoices