Menu
I'm a newbie in html & css. I'm trying to code the output in this image https://i.sstatic.net/Qy7Sd.png
The only problem here is that when I add the brick background it also appears on the white portion of the output which I don't want. Here is the code I've written so far:
<!DOCTYPE html>
<html>
<head>
<title>Terps Calculators Inc</title>
<style>
body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;}
header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
nav{font-family: sans-serif; font-size: 19px; text-align: center;}
a:link{color: red;}
main{padding: 30px 200px; color: black; font-weight: bold;}
.intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
p{font-size: 18px;}
.head{font-weight: bold; font-size: 22px; font-family: arial;}
.text{font-style: italic;}
.color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
</style>
</head>
<body>
<header>
<img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. <img src="University of Maryland.png" width="100px" height="100px">
</header>
<br>
<nav>
<a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
</nav>
<br>
<main>
<div class="intro">Introduction</div>
<p><span class="head">Terps Calculators Inc.</span><span class="text"> implements and provides these calculators for your use. We keep expanding our collection every day, so make sure you stop by often.</span></p>
<div class="intro">Calculators</div>
<br><br>
<img src="Calculator.png" height="60px" width="50px"> <span class="color"> Grades Calculator</span>
<br>
<img src="Calculator.png" height="60px" width="50px"><span class="color"> Interest Calculator</span>
</main>
<br>
<footer>Terps Calculators Inc.®</footer>
</body>
</html>
910
asked Nov 16 '25 19:11
I think it would be better if you wrapped everything in a div like this:
<div class="wrapper">
<!-- A lot of content here -->
</div>
Put all the content inside of it, set the margin of the div to about 5-10% so there will be a gap for the bricks to show up, and then set the body's "background" to your brick image.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With