Код для платформы продаж автомобилей, разработанный с помощью flexbox в HTML5

Question 1

Это задумано как простой макет для сайта автосалона:

Отказ от ответственности Детали изменены с оригинала в целях конфиденциальности

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>

Я ищу конструктивную критику того, как улучшить этот код, который полностью написан вручную и не копируется из других источников. Он вдохновлен реальными сайтами продаж автомобилей, но в настоящее время поддерживает только HTML, хотя может быть адаптирован для контроллеров модели и представления PHP MVC.

Влияние было взято из этот дизайн на autotrader.co.uk (но с моей собственной кодировкой).

Я хочу попробовать сделать вариант своего кода flexbox, который отображает фотографии (с помощью javascript для их увеличения) внизу и остается внизу, даже если div class = flex-right-1 расширяется из-за большого количества текста в коробке

Пока я просто концентрируюсь на HTML.

Жду конструктивной критики по этому поводу.

Question 2

Я думаю, вы можете использовать тег ul после <h3>20 minutes from Dublin town centre</h3> а затем используйте тег li вместо тега article, потому что у вас есть список автомобилей на этой странице, а для списка мы должны использовать теги ul и li, которые предоставляет нам html. вы можете посетить эту ссылку для просмотра списка в html

Затем после этого кода
<section class="dublinvehicles"> <h3>20 minutes from Dublin town centre</h3>, вы должны добавить тег ul и заменить все статьи тега тегом li и добавить к тегу ul

Код для платформы продаж автомобилей, разработанный с помощью flexbox в HTML5

1 ответ
1

Добавить комментарий Отменить ответ

1 ответ 1

Похожие записи:

Добавить комментарий Отменить ответ

1 ответ
1