I'm struggling to position the large green circle and the dice image on top of each other as well as below each other. How can I achieve the desired layout shown in this image? Here's what I have managed to do so far https://i.sstatic.net/ryIPl.png
I attempted to use the position property, but setting left: 0px only centered the green circle.
Below is my code:
'use strict';
const dice = document.getElementById('dice');
const adviceContainer = document.querySelector('#box');
const renderAdvice = function (data) {
const html = `
<h1 class="heading">ADVICE <span class='hash' id="hash">#${data.slip.id}</span></h1>
<p class="advice" id="advice">'${data.slip.advice}' </p>
<img src="/images/pattern-divider-mobile.svg" alt="divider" class="divider">
`;
adviceContainer.innerHTML = html;
};
async function adviceGenerator() {
const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
renderAdvice(data);
}
dice.addEventListener('click', adviceGenerator);
adviceGenerator();@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;800&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Monrope, 'Arial', 'sans-serif';
background-color: hsl(220, 22%, 16%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* More CSS code continues... */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Advice generator app</title>
</head>
<body>
<section id="container">
<section class="box" id="box">
<!-- <h1 class="heading">ADVICE <span class='hash' id="hash">#</span></h1>
<p class="advice" id="advice">'Lorem ipsum dolor sit amet consectetur adipisicing elit.!' </p> -->
</section>
<span class="green"></span>
<img src="/images/icon-dice.svg" alt="dice" class="dice" id="dice">
</section>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
</div>
<script src="script.js"></script>
</body>
</html>