-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtask2.3.html
114 lines (105 loc) · 2.55 KB
/
task2.3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>
<head>
<style>
.menu a{
color: green;
}
.image{
float: left;
}
.item{
padding:5px;
border-style: solid;
border-radius: 10px;
border-color: red;
margin: 10px
}
.title a{
font-size:30px;
}
.description{
display: inline-flex;
margin-left: 8px;
padding-right:5px;
font-size:20px;
}
.text_for{
margin:5px;
font-weight: bold;
}
.price{
display: inline-flex;
width: 100px;
background-color: pink;
border: 0px solid pink;
font-size: 25px;
border-radius: 5px;
text-align: center;
justify-content: center;
color: green;
}
.attributes{
font-size: 15px;
}
.city{
font-weight:bold;
}
.urgent{
background-color: yellow;
}
</style>
</head>
<body>
<div class="menu">
<a href="cars.html">Cars</a> | <a href="moto.html">Moto</a> | <a href="trucks.html">Trucks</a>
</div>
<div class="item">
<img src="https://media.ed.edmunds-media.com/bmw/x5/2013/oem/2013_bmw_x5_4dr-suv_xdrive35d_fq_oem_1_1280.jpg" class="image" width="100px"/>
<div class="main_body">
<div class="title">
<a href="#">BMW X5 Series</a>
<span class="text_for">for</span>
<span class="price">30.000$</span>
</div>
<div class="description">
Good car in good conditions
</div>
<div class="attributes">
City: <span class="city">Aktobe</span>, Type: Sedan, 4xWD
</div>
</div>
</div>
<div class="item urgent">
<img src="https://files2.porsche.com/filestore/image/multimedia/none/jdp-2016-9pa-e2-2nd-v6-editorial-xl/normal/944b5c81-8fc8-11e6-9f1b-0019999cd470;sJ/porsche-normal.jpg" class="image"/>
<div class="main_body">
<div class="title">
<a href="#">Porsche Cayenne</a>
<span class="text_for">for</span>
<span class="price">30.000$</span>
</div>
<div class="description">
The best car of all cars
</div>
<div class="attributes">
City: <span class="city">Almaty</span>, Type: Hatchback, 2xWD
</div>
</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Audi_A8_2013_%2811209853445%29.jpg/300px-Audi_A8_2013_%2811209853445%29.jpg" class="image" width="100px"/>
<div class="main_body">
<div class="title">
<a href="#">Audi A8</a>
<span class="text_for">for</span>
<span class="price">18.000$</span>
</div>
<div class="description">
Good car in good conditions
</div>
<div class="attributes">
City: <span class="city">Astana</span>, Type: Sedan, 2xWD
</div>
</div>
</div>
</body>
</html>