This might be a silly question, but I’m trying to put a semi-transparent box around the main text, but I don’t want the text & image to be transparent either. I tried using the :not pseudo-element, but that doesn’t seem to be doing anything. What am I doing wrong? How can I fix this code?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Akira Nishikiyama Fanpage</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main id="main">
<h1>Akira Nishikiyama</h1>
<div class="box">
<figure id="img-div">
<img id="image" src="https://64.media.tumblr.com/3ed348e325b1c7f075ab41b2c16bb4aa/1d805dd2cf83f487-e2/s540x810/ab048421c47a8fa834fd6f2118aa96d148b34f45.gif" width="100%" alt="A gif of Akira Nishikiyama from the Yakuza series smoking a cigarette.">
<figcaption id="img-caption"><i>Simply the best Yakuza character.</i></figcaption>
</figure>
<p id="tribute-info">Akira "Nishiki" Nishikiyama is the deuteragonist of Yakuza 0 and the antagonist of Yakuza 1. He is Kiryu, the main protagonist's, brother and is known for his silly and caring personality. </p>
<p>He has a high sense for fashion and his main goal is to advance in the Yakuza. Nishiki also wants to prove himself as he has a dwindling sense of self-worth and has a massive inferiority complex.</p>
<p>Click <a id="tribute-link" href="https://yakuza.fandom.com/wiki/Akira_Nishikiyama" target="_blank">here</a> to learn more about his character.</p>
</div>
<h2>Here are some facts about Nishiki</h2>
<div
</main>
</body>
</html>
/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background-image: linear-gradient(180deg, rgba(0,0,0,1) 45%, rgba(123,123,132,1) 100%);
color: #FAF9F6;
margin: 0;
padding: 50px;
font-family: Tahoma;
text-align: center;
height: 100%;
display: flex;
vertical-align: middle;
background-attachment:fixed;
}
.box:not(p, image, img) {
background: #36454F;
padding: 30px;
border-radius: 25px;
opacity: .5;
}
img {
display: block;
}
#image {
width: 450px;
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
color: #DE3163;
text-decoration: underline;
font-family: Sans-serif;
padding: 0.5em;
}
a {
color: #DE3163;
text-decoration: none;
}
#img-caption {
color: #E2DFD2;
}
h2 {
color: #DE3170;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
