<nav>
<span class="dot"></span>
<ul role="list">
<li><a href="#soap1">Soap</a></li>
<li><a href="#soap2">Soap</a></li>
<li><a href="#soap3">Soap</a></li>
</ul>
</nav>
<a href="#">Account?</a>
<main>
<header>
<p>Soap Bubble Detail</p>
<h1>Soap Bubble</h1>
<p>After experiments, researchers found that a solution containing water, glycerol, washing-up liquid, and guar gum gave the longest lasting results as it minimised the Marangoni Effect.</p>
</header>
<dl>
<div>
<dt>water</dt>
<dd>85.9 %</dd>
</div>
<div>
<dt>glycerol</dt>
<dd>10%</dd>
</div>
<div>
<dt>guar gum</dt>
<dd>0.1%</dd>
</div>
<div>
<dt>washing-up liquid</dt>
<dd>4%</dd>
</div>
<div>
<dt>entertaining us for</dt>
<dd>400 years</dd>
</div>
</dl>
<footer>
<div>All Details From Wikipedia</div>
<div>
<button>
<svg viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0794 5.20085C11.4311 5.20085 10.8545 4.91524 10.4522 4.46878L4.58467 7.63155C4.59121 7.70075 4.60584 7.76768 4.60584 7.83858C4.60584 7.9048 4.59206 7.96661 4.58595 8.03098L10.4613 11.1973C10.863 10.7571 11.4361 10.4762 12.0794 10.4762C13.293 10.4762 14.2775 11.4606 14.2775 12.6743C14.2775 13.8883 13.293 14.8723 12.0794 14.8723C10.8653 14.8723 9.8813 13.8883 9.8813 12.6743C9.8813 12.6446 9.8884 12.617 9.88997 12.5876L3.96257 9.39269C3.56428 9.79056 3.01479 10.0365 2.40804 10.0365C1.19398 10.0365 0.209961 9.05251 0.209961 7.83844C0.209961 6.6248 1.19398 5.64036 2.40804 5.64036C3.00939 5.64036 3.55405 5.88334 3.95092 6.27524L9.8884 3.07496C9.88755 3.05037 9.8813 3.02764 9.8813 3.00277C9.8813 1.78913 10.8653 0.804688 12.0794 0.804688C13.293 0.804688 14.2775 1.78913 14.2775 3.00277C14.2773 4.21698 13.293 5.20085 12.0794 5.20085Z" />
</svg>
<span>Share</span>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12">
<path d="M2.07054 6.79095L7.18165 11.6092C7.26952 11.697 7.38668 11.741 7.50384 11.741C7.621 11.741 7.73816 11.697 7.82603 11.6092L12.9371 6.79095C13.684 6.04406 14.0502 5.06284 14.0502 4.08163C14.0502 3.10041 13.684 2.11919 12.9371 1.3723C12.2635 0.698628 11.4141 0.405727 10.5354 0.405727C9.46627 0.405727 8.35325 0.859723 7.53313 1.6652C7.51848 1.6652 7.51848 1.67984 7.50384 1.67984C7.48919 1.67984 7.48919 1.67984 7.47455 1.6652C6.72765 0.962238 5.76108 0.259277 4.77987 0.259277C3.79865 0.259277 2.81743 0.625403 2.07054 1.3723C0.576747 2.85144 0.576747 5.29716 2.07054 6.79095Z" />
</svg>
<span>Like</span>
</button>
<button>
<svg viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
<path d="M3.32912 9.63188H7.42311V12.4684C7.42311 13.3457 8.5051 13.7844 9.1192 13.141L14.4121 7.67261C14.7923 7.29245 14.7923 6.67836 14.4121 6.2982L9.1192 0.859035C8.5051 0.215693 7.42311 0.654335 7.42311 1.53162V4.36817H3.32912C1.86698 4.36817 0.697266 5.53789 0.697266 7.00003C0.697266 8.46217 1.86698 9.63188 3.32912 9.63188Z" />
</svg>
<span>Next</span>
</button>
</div>
</footer>
</main>
<figure>
<figcaption>Soap Bubble Caption</figcaption>
<!-- somewhat cropped image -->
<img src="https://assets.codepen.io/150150/pexels-pixabay-35016_1.jpg" alt="bubble" />
</figure>
html {
color-scheme: dark;
font-size: 2em;
}
dl {
display: flex;
flex-flow: wrap;
justify-content: center;
text-align: center;
gap: min(0.5lh, 2vw);
}
dl div {
flex: 0 1 30%;
background: teal;
max-inline-size: 10ch;
}
dd {
margin: unset;
}
nav {
border-block-end: thin solid;
display: flex;
padding-inline: 10px;
place-content: space-between;
& span {
background: yellow;
inline-size: 10px;
block-size: 10px;
place-self: center;
}
& ul {
display: flex;
list-style: none;
gap: 30px;
}
}
/*
uncropped image for use as background-image
background-image: url("https://assets.codepen.io/150150/pexels-pixabay-35016.jpg");
*/
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.