2
\$\begingroup\$

This is intended as a simple layout for an auto showroom site:

Disclaimer Details changed from original for privacy

body {
font-family: Helvetica, sans-serif;
background-color: #B2BEB5;
}

b {
font-family: Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, sans-serif;
}

header.brandname {
background-color: #333;
color: #FFF;
padding: 20px;
}

.dublin-ac1 {
background-color: #FFF;
font-family: Verdana, sans-serif;
color: red;
}


.flex-container {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
}

.flex-container h2, h3, h4 {
font-family: Arial, sans-serif;
}

.flex-container {
    color: #333;
    display: flex;
    flex-direction: row;
    width: 880px;
    padding: 20px;

}
.flex-left {
width: 195%;   
padding: 10px;
margin-top: -30px;
}

.flex-right {
width: 95%;
text-align: right;
padding: 10px;
margin-top: -30px;
}

.flex-left1 {
width: 50%;
margin-top: -50px;
}

.flex-left1 img {
max-width:100%;
max-height:100%;
}

.flex-right1 {
width: 90%;
margin-left: 10px;
margin-top: -70px;
margin-bottom: auto;
}

.az2 {
background-color: #FFFFFF;
margin: 30px;
margin-bottom: 20px;
margin-right: 130px;
width: 920px;
border: 2px solid;
height: auto;
}

.price {
font-weight: 700;
}


section.dublinvehicles {
background-color: #FFF;
margin-left: 20px;
height: auto;
padding: 15px;
}

/* 
div.image-card-thumbnails {
display: flex;
position: relative;
flex-direction: column;
flex-grow: 1;
max-width: 60%;
}
 */

div.image-card-thumbnails {
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 34%;
}

.image-card-thumbnails img {
max-width: 90%;
max-height: 33%;
}

div.image-card-thumbnails-1 {
display: flex;
flex-direction: row;
max-width: 34%;
object-fit: contain;
}
.image-card-thumbnails-1 img {
max-width: 90%;
max-height: 33%;
}
.aw1 {
width: 230px;
object-fit: cover;
position: absolute;
bottom: -10px;
margin-left: -320px;
margin-bottom: 80px;
}
<header class="brandname">
<h1>NEW DUBLIN CAR SALES</h1>
</header>

<article class="dublin-ac1">
<h3>26 North Belfast Road, Dublin 11</h3>
<h3>Tel: 086 000 0000</h3>
</article>

<section class="dublinvehicles">
<h3>20 minutes from Dublin town centre</h3>

<article class="az2">
<div class="flex-container">
    <div class="flex-left">
       <h3>2021 TOYOTA RAV4 2.5 HYBRID PREMIUM 5dr</h3>
    </div>
    <div class="flex-right price">
       <h3>€38,000 / £30,400</h3>
    </div>
</div>
<div class="flex-container">
    <div class="flex-left1">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/2019_Toyota_RAV4_Excel_HEV_CVT_2.5_Front.jpg/1280px-2019_Toyota_RAV4_Excel_HEV_CVT_2.5_Front.jpg">
        <div class="image-card-thumbnails">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/2019_Toyota_RAV4_Hybrid_01.jpg/1024px-2019_Toyota_RAV4_Hybrid_01.jpg">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/2019_Toyota_RAV4_hybrid_in_Taiwan_taxi_service.jpg/1024px-2019_Toyota_RAV4_hybrid_in_Taiwan_taxi_service.jpg">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/2020_Toyota_Rav4_XLE%2C_Front_Left%2C_09-30-2020.jpg/1280px-2020_Toyota_Rav4_XLE%2C_Front_Left%2C_09-30-2020.jpg">
       </div>
    </div>
    <div class="flex-right1">
    <p>5 door, choice of colours, well-equipped, ONLY 20 LEFT</p>
</div>
</article>

<article class="az2">
<div class="flex-container">
    <div class="flex-left">
       <h3>2012 PEUGEOT 207 1.4 VTi COMFORT 4dr</h3>
    </div>
    <div class="flex-right price">
       <h3>€1,744/£1,395</h3>
    </div>
</div>
<div class="flex-container">
    <div class="flex-left1">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Peugeot_207_CN_sedan_2_China_2012-05-13.jpg/1024px-Peugeot_207_CN_sedan_2_China_2012-05-13.jpg">
    </div>
    <div class="flex-right1">
    <p>4 door, maroon, 120,000 km, NCT, good condition</p>
    </div>
</div>
</article>

<article class="az2">
<div class="flex-container">
    <div class="flex-left">
       <h3>1991/1992/1993 TOYOTA HIACE 3.0 DIESEL VAN</h3>
    </div>
    <div class="flex-right price">
       <h3>€1,800 / £1,440</h3>
    </div>
</div>
<div class="flex-container">
    <div class="flex-left1">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/1998-2004_Toyota_HiAce_%28RZH103R%29_van_%282011-11-04%29.jpg/180px-1998-2004_Toyota_HiAce_%28RZH103R%29_van_%282011-11-04%29.jpg">
    </div>

    <div class="flex-right1">
    
    <p>white, choice of models</p>
<div class="aw1">
        <div class="image-card-thumbnails-1">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/GE-RZH125B-Kanachu-a13-Yumebus.jpg/800px-GE-RZH125B-Kanachu-a13-Yumebus.jpg">       
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/KingTaxi_saga_44.jpg/1280px-KingTaxi_saga_44.jpg">  
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/1999_Toyota_HiAce_%28RZH103R%29_van_%2824567060179%29.jpg/1024px-1999_Toyota_HiAce_%28RZH103R%29_van_%2824567060179%29.jpg">  
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Toyota_Hiace_%2825153414567%29.jpg/800px-Toyota_Hiace_%2825153414567%29.jpg">  
       </div>
        <div class="image-card-thumbnails-1">
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Toyota_Hiace_100_long_van_001.JPG/1024px-Toyota_Hiace_100_long_van_001.JPG">       
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Toyota_Hiace_100_long_van_001.JPG/1024px-Toyota_Hiace_100_long_van_001.JPG">  
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Toyota_Hiace_in_Ayutthaya.jpg/1024px-Toyota_Hiace_in_Ayutthaya.jpg">  
       <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/%2790-%2791_Toyota_HiAce.JPG/1024px-%2790-%2791_Toyota_HiAce.JPG">  
       </div>
    </div>
</div>
</article>

</section>

What I am looking for is constructive criticism on how to improve this code which is entirely written by hand, and is not copied from elsewhere. It's taken inspiration from real-life car sales sites but is currently HTML-only, although it may be adapted for PHP MVCs model-view controllers.

Influence was taken from this design on autotrader.co.uk (but with my own coding).

I want to try and make a variant of my flexbox code that displays the photos (with a javascript to enlarge them) along the bottom and remains at the bottom even if div class=flex-right-1 extends due to a large amount of text in the box

So far, I'm just concentrating on the HTML side of things.

I am looking for any constructive criticism on this.

\$\endgroup\$

2 Answers 2

Reset to default
2
\$\begingroup\$

I think u can use ul tag after <h3>20 minutes from Dublin town centre</h3> and then use li tag instead of article tag, becuase you have the list of cars in this page, and for list we should use ul and li tag which html is provide for us. you can visit this link for list in html

Then, after this code <section class="dublinvehicles"> <h3>20 minutes from Dublin town centre</h3>, you should add ul tag and replace all of article of tag by li tag and append to ul tag

\$\endgroup\$
1
\$\begingroup\$

I think you can improve semantics by using the <main> element:

<header>
...
</header>

<main>
    <section>, <article>, <div>, etc...
</main>

And instead of a <h3> to write an address, you can simply use the <address> element as follows:

a[href^="tel"]::before {
  content: "📞 ";
}
<article class="dublin-ac1">
  <address>
    26 North Belfast Road, Dublin 11<br>
    <a href="tel:+10860000000">Tel: 086 000 0000</a>
  </address>
</article>

Of course, you also can use both <address> and <h3> elements.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.