CSS Reusability and Bootstrap class names
The goal of this coding practice test is to quickly get you off the ground with the Bootstrap class names and Reusability concepts.
Use the below reference image.
Instructions
Read these instructions carefully.
- Apply the font family to the HTML main heading and paragraph elements with the same custom class name text.
Resources
CSS Font families used:
- Caveat
Code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="bg-primary text-center">
<h1 class="text text-white text-uppercase">happy Meals</h1>
<p class="text text-light text-capitalize">discover the best foods</p>
</div>
</body>
</html>CSS
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:[email protected];700&family=Lobster&family=Monoton&family=Open+Sans:ital,[email protected],400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,[email protected],400;0,700;1,700&family=Playfair+Display:ital,[email protected],400;0,700;1,700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,[email protected],400;0,700;1,700&family=Work+Sans:ital,[email protected],400;0,700;1,700&display=swap");
.main-heading {
font-family: Caveat;
}
.text {
font-family: Caveat;
}