Submitted about 3 years ago

Responsive 3 column card HTML/CSS

stephlinya•25

@stephlinya

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Thoughts on how I organized the CSS? I tried to keep the more global styles at the top, but I don't know if it's confusing to understand because there's not much CSS. Would it be better to organize the styles by how it starts to appear in the HTML? For example, after container it would be the styles for .sedan, .accent-title, p, .button.

Also, what would be the best way to decide the width of each section? I chose 80% but it was kind of arbitrary like "oh that looks close".

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag.😊 Important(use img tag and give the path of image instead of coping whole svg code)

<body>
<main>
    <div class="container">
        <section class="sedans">
       <img src= "icon-sedans.svg" alt=""/>
            <h1 class="accent-title">SEDANS</h1>
            <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city 
              or on your next road trip.</p> <br>
            <a href="#" class="button sedans__btn">Learn More</a>
        </section>
      
        <section class="SUVs">
       <img src="icon-suvs.svg" alt=""/>
            <h1 class="accent-title">SUVs</h1>
            <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
              and off-road adventures.</p> <br>
            <a href="#" class="button SUVs__btn">Learn More</a>
        </section>
    
        <section class="luxury">
         <img src= "icon-luxury.svg"  alt=""/>
           <h1 class="accent-title">LUXURY</h1> 
            <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury 
              rental and arrive in style.</p> <br>
            <a href="#" class="button luxury__btn">Learn More</a>
        </section>
    </div>
    </main>

  <footer>
 <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>
</footer>
</body>```

stephlinya•25

@stephlinyaPosted about 3 years ago

@JuveriaD ah thanks for catching those! I realized I forgot the <main> and <footer> tag on my last challenge too. The reason why I used the svg code is because the icon doesn't pop up on github pages when I use the img src path. I'm not sure if you ran into this problem or if it's just me?

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

@stephlinya keep those images in folder and then give them path as usual and add period (.) Before "/" it will work

<img scr="./images/icon-hero.svg" alt=""/>```

stephlinya•25

@stephlinyaPosted about 3 years ago

@JuveriaD it worked!! I was missing the (.) before :)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord