search

JamesWallison1 / nft-preview-card.github.io

0 stars 0 forks source link

Semantic HTML #1

Closed R3ygoski closed 4 months ago

R3ygoski commented 4 months ago

Above follows the most semantic HTML. If you have any questions, please ask, and I'll try to help. If my comment was helpful and assisted you, I kindly request that you mark it as helpful on Frontend Mentor, as it helps me a lot. Thank you in advance.

<body>
  <main class="container">
    <figure class="image">
      <img src="images/image-equilibrium.jpg" alt="Equilibrium" id="product-image">
      <a href="https://www.frontendmentor.io/profile/JamesWallison1" target="_blank">
        <div class="to-hover">
          <img src="images/icon-view.svg" alt="Viewing eye">
        </div>
      </a>
    </figure>
    <h1 id="name">Equilibrium #3429</h1>
    <p id="introduction">Our Equilibrium collection promotes balance and calm.</p>
    <section class="details">
      <div class="price">
        <img src="images/icon-ethereum.svg" alt="Ethereum">
        <p>0.041 ETH</p>
      </div>
      <div class="time">
        <img src="images/icon-clock.svg" alt="Clock" style="margin-right: 5px;">
        <p>3 days left</p>
      </div>
    </section>
    <footer class="creator">
      <a href="https://www.frontendmentor.io/profile/JamesWallison1" target="_blank"><img src="images/image-avatar.png" alt="Avatar"></a>
      <p>Creation of <span>Juls Wyvern</span></p>
    </footer>
  </main>
</body>
JamesWallison1 commented 4 months ago

I am also working on another project, when I changed the div to main, the layout has been corrupted, you know how to fix it?

R3ygoski commented 4 months ago

What? The project corrupted? Can you explain me more precisely what happened?

JamesWallison1 commented 4 months ago

Oh sorry I shouldn't have used the word corrupted. To be more specific, the layout was like being changed (not in the correct order any more

R3ygoski commented 4 months ago

Oh sorry I shouldn't have used the word corrupted. To be more specific, the layout was like being changed (not in the correct order any more

Can you send your HTML Structure here? Just copy everything, and use this structure to send it (don't be sacred about those red lines, it's because my browser is not in english 😅):

image

JamesWallison1 commented 4 months ago

Ohh okay.

<!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="icon/x-icon" href="assets/images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Newsletter sign up | Lê Hoàng Long</title>
</head>

<body>
  <div class="container">
    <div class="left-container">
      <h1>Stay updated!</h1>
      <p id="description">Join 60,000+ product managers receiving monthly updates on:</p>
      <div class="update-information">
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          Product discovery and building what matters
        </label><br>
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          Measuring to ensure updates are a success
        </label><br>
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          And much more!
        </label><br>
      </div>
      <div class="information-input">
        <p id="email-address">Email address</p>
        <p id="email-result">Valid email required</p>
      </div>
      <input type="email" id="email-input" placeholder="email@company.com"><br>
      <button id="submit-button">Subscribe to monthly newsletter</button>
    </div>

    <div class="right-container">
      <img src="assets/images/illustration-sign-up-desktop.svg" alt="Sign up image">
    </div>
  </div>

  <div class="success">
    <img src="assets/images/icon-success.svg" alt="Success icon">
    <h1>Thanks for subscribing!</h1>
    <p>A confirmation email has been sent to <span class="email-thank"></span>. Please open it and click the button inside to confirm your subscription.</p>
    <button id="dismiss-message">Dismiss message</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

It's very nice of you to help me so? I'm currently having no ideas what am I doing

R3ygoski commented 4 months ago

No problem man, I really like to help others devs. Here try to copy this snippet and see if it's worked.


<body>
  <main class="container">
    <section class="left-container">
      <h1>Stay updated!</h1>
      <p id="description">Join 60,000+ product managers receiving monthly updates on:</p>
      <section class="update-information">
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          Product discovery and building what matters
        </label><br>
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          Measuring to ensure updates are a success
        </label><br>
        <label class="checkbox">
          <input type="checkbox" checked disabled>
          <span class="checkmark"></span>
          And much more!
        </label><br>
      </section>
      <form class="information-input">
        <p id="email-address">Email address</p>
        <p id="email-result">Valid email required</p>
      </form>
      <input type="email" id="email-input" placeholder="email@company.com"><br>
      <button id="submit-button">Subscribe to monthly newsletter</button>
    </section>
    <figure class="right-container">
      <img src="assets/images/illustration-sign-up-desktop.svg" alt="Sign up image">
    </figure>
  </main>

  <div class="success">
    <img src="assets/images/icon-success.svg" alt="Success icon">
    <h1>Thanks for subscribing!</h1>
    <p>A confirmation email has been sent to <span class="email-thank"></span>. Please open it and click the button inside to confirm your subscription.</p>
    <button id="dismiss-message">Dismiss message</button>
  </div>
  <script src="index.js"></script>
</body>
JamesWallison1 commented 4 months ago

Maybe we also need to deal with css too?

R3ygoski commented 4 months ago

It's keep having problem? And yes, you can send CSS too, is the same as above, but instead of html, type css.

JamesWallison1 commented 4 months ago 
:root {
    --Tomato: hsl(4, 100%, 67%);
    --Dark-Slate-Grey: hsl(234, 29%, 20%);
    --Charcoal-Grey: hsl(235, 18%, 26%);
    --Grey: hsl(231, 7%, 60%);
    --White: hsl(0, 0%, 100%);
}

body {
    margin: 0px;
    font-family: "Roboto";
    background-color: var(--Charcoal-Grey);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.container {
    width: 920px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
    padding-left: 60px;
    display: flex;
    align-items: center;
    border: 1px white solid;
    border-radius: 30px;
    background-color: var(--White);
    visibility: visible;
}

h1 {
    font-size: 3.5rem;
    margin-top: -5px;
}

label {
    padding-left: 35px;
    align-items: center;
}

.update-information {
    line-height: 1.2;
}

.update-information input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 20px;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

.update-information input:checked~.checkmark {
    background-color: var(--Tomato);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.update-information input:checked~.checkmark:after {
    display: block;
}

.update-information .checkmark:after {
    left: 7.5px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#email-address {
    font-size: 0.75rem;
    font-weight: 700;
}

#email-result {
    color: red;
    font-size: 0.8rem;
    font-weight: 600;
    display: none;
}

#email-input {
    padding: 13px;
    padding-left: 20px;
    width: 92%;
    border-radius: 8px;
    border: 1px rgb(122, 122, 122) solid;
    font-family: "Roboto";
    font-size: 0.9rem;
}

#submit-button {
    margin-top: 20px;
    padding: 18px;
    width: 100%;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: var(--Tomato);
    color: var(--White);
    font-weight: 600;
    font-size: 13.5px;
}

#submit-button:hover {
    background-color: var(--Dark-Slate-Grey);
}

#submit-button:active {
    transform: translateY(1px);
}

#description {
    width: 90%;
    line-height: 1.5;
    margin-bottom: 30px;
    margin-top: -15px;
}

.information-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-container {
    margin-left: 4.5rem;
    width: 300px;
    max-width: 100%;
}

.success {
    position: fixed;
    width: 400px;
    max-width: 100%;
    border: 1px white solid;
    border-radius: 30px;
    padding: 50px;
    background-color: var(--White);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.success p {
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: 40px;
    line-height: 1.7;
}

.success img {
    margin-top: -5px;
    margin-bottom: 25px;
}

.success button {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px black solid;
    border-radius: 5px;
    border: none;
    background-color: var(--Dark-Slate-Grey);
    color: var(--White);
    cursor: pointer;
    font-family: "Roboto";
    font-weight: 500;
    transition: all 0.15s ease-out;
}

.success button:hover {
    background-color: var(--Tomato);
    color: var(--White);
    box-shadow: 0px 10px 5px 2px rgba(255, 98, 87, 0.17);
    -webkit-box-shadow: 0px 10px 5px 2px rgba(255, 98, 87, 0.17);
    -moz-box-shadow: 0px 10px 5px 2px rgba(255, 98, 87, 0.17);
}

.success button:active {
    transform: translateY(1px);
}

.success span {
    font-weight: bold;
}

Here it is!

R3ygoski commented 4 months ago

Strange, seems fine for me, look (Obvius, I don't have the image 😅): image

JamesWallison1 commented 4 months ago

oh lemme send it for you README.md README-template.md style-guide.md

JamesWallison1 commented 4 months ago

favicon-32x32 icon-list icon-success illustration-sign-up-desktop illustration-sign-up-mobile you can create a folder name assets and a folder inside it images and put all of those in based on the code i think

R3ygoski commented 4 months ago

Seems good to me, look:

image

Ah and a tip, if you have discord, you can send me a message there, it's more easy for me to answer there than here, but if you don't use discord don't worry, we can keep here

JamesWallison1 commented 4 months ago

Oh I do have discord. Here it is: illumino_