-1
\$\begingroup\$

im still learning so please dont be too harsh.

  1. 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.

  2. 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;
}
\$\endgroup\$
2
  • \$\begingroup\$ Welcome to the Code Review Community. We only review code that is working as expected, there are other sites that will help you debug your code. Please read Where can I get help? and How do I ask a good question?. \$\endgroup\$
    – pacmaninbw
    Aug 4 at 17:35
  • \$\begingroup\$ (exact positioning on a webpage that's not how I understand hypertext markup.) \$\endgroup\$
    – greybeard
    Aug 5 at 5:55

0

Browse other questions tagged or ask your own question.