im still learning so please dont be too harsh.
i cant align my image beside the text and i suspect my coding structure is at fault, however i don't know how to clean up the code, and I can no longer look for mistakes my brain has melted.
is there a way to use any developer tools on chrome that will give me the exact positioning on a webpage, like longitude/latitude on the page and with css can i just position it accurately on specifically in that place ?
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
id="png"
/>
<link rel="stylesheet" href="stylev2.css" />
<title>Frontend Mentor | Product preview card component</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<div class="element">
<div class="text">
</div>
<h3 class="perfume">perfume</h3>
<p class="gabrielle">
<bold>Gabrielle Essence Eau De Parfum </bold>
</p>
<p>
<ul>
<li class="description">
Floral, solar and voluptuous interpretation composed by Olivier Polge,
Perfumer-Creator for the House of CHANEL.
</li>
<li class="newprice">
$149.99
</li>
<li class="oldprice">
$169.99
</li>
<p class="cartButton">Add to Cart</p>
</div>
</ul>
<div class="picture">
<img src="./image-product-desktop.jpg" class="productDesktop" />
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Pamytheg</a>.
</div>
</body>
<link
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fraunces&display=swap");
body {
padding-left: 25%;
background-color: hsl(30, 38%, 92%);
}
.element {
margin-top: 25%;
margin-left: 50%;
}
.picture {
padding-right: 50%;
}
.perfume {
padding-top: 10px;
font-family: Montserrat;
color: hsl(228, 12%, 48%);
letter-spacing: 5px;
text-transform: uppercase;
}
.gabrielle {
padding-right: 45%;
padding-top: 10px;
color: hsl(212, 21%, 14%);
font-family: Fraunces;
font-size: 45px;
font-weight: bold 700px;
margin: 0%;
}
.description {
font-family: Montserrat;
font-size: 12px;
font-weight: 500;
color: hsl(228, 12%, 48%);
line-height: 25px;
}
ul {
margin: auto;
list-style: none;
padding-left: 0;
padding-right: 45%;
}
.newprice {
font-family: Fraunces;
font-size: 24px;
font-weight: 500;
color: hsl(228, 12%, 48%);
}
.oldprice {
text-decoration: line-through;
color: lightgray;
}
.productDesktop {
max-height: 450px;
padding-left: 0;
border-radius: 10px;
position: absolute;
}
.cartButton {
text-align: center;
background-color: hsl(158, 36%, 37%);
color: hsl(30, 38%, 92%);
height: 50px;
width: 300px;
border-radius: 10px;
}
exact positioning on a webpagethat's not how I understand hypertext markup.) \$\endgroup\$