I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source Sans Pro:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Andika:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div >
<h1><a href="index.html">Indie Games</a></h1>
<div >
<nav>
<a href="to-play.html">To Play</a>
<a href="reviews">Reviews</a>
<a href="full-list.html">Indie-x</a>
<a href="favorites">Favorites</a>
</nav>
</div>
</div>
<h1 id="platformers">Platformers</h1>
<div >
<article>
<h2>Hollow Knight</h2>
<p >Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p >Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p >Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div >
<article>
<h2>Cuphead</h2>
<p >Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 id="horror">Horror</h1>
<div >
<article>
<h2>Omori</h2>
<p >Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p >Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p >Psychological Horror, Platformer, Puzzle</p> <hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div >
<article>
<h2>Sally Face</h2>
<p >Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p >Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p >Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div >
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p >Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p >Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p >Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div >
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p >Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p >Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p >Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div >
<article>
<h2>The Mortuary Assistant</h2>
<p >Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p >Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
CodePudding user response：
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p >Difficult, Souls-like</p></div>
To this
<div >
<h2>Hollow Knight</h2>
<p >Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}<article>
<div >
<h2>Hollow Knight</h2>
<p >Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>