html_css

1
* {
2
    box-sizing: border-box;
3
}
4

5
body {
6
    margin: 0;
7
    padding: 0;
8
    font-family: "Playfair Display", serif;
9
    color: #8d8d8d;
10
}
11

12
.container {
13
    background-color: #fbe9e7;
14
    min-height: 100vh;
15
    padding: 20px;
16
    display: flex;
17
    justify-content: center;
18
    align-items: center;
19
}
20

21
.tags {
22
    display: flex;
23
    flex-wrap: wrap;
24
    list-style: none;
25
    padding: 0;
26
    margin: 0;
27
    gap: 5px;
28
    font-family: "Raleway", sans-serif;
29
    font-size: 15px;
30
}
31

32
.tags__item {
33
    border: 1px solid #57b25f;
34
    color: #57b25f;
35
    padding: 0.125em 0.75em;
36
    border-radius: 2em;
37
}
38

39
.button {
40
    border: none;
41
    background-color: hsl(14.12deg 100% 70%);
42
    color: #fff;
43
    font-family: "Raleway", serif;
44
    text-transform: uppercase;
45
    border-radius: 2em;
46
    font-size: 13px;
47
    padding: 1.3em 3em;
48
    letter-spacing: 0.2em;
49
    font-weight: 500;
50
    transition: background-color 0.25s ease;
51
}
52
.button:hover{
53
    background-color: hsl(14.12deg 100% 65%);
54
}
55

56
.card {
57
    display: flex;
58
    max-width: 750px;
59
    background-color: white;
60
    border-radius: 7px;
61
    overflow: hidden;
62
    box-shadow: 0 14px 32px 0 rgba(0, 0, 0, 0.15);
63
}
64
.card__picture {
65
    display: block;
66
    flex-basis: 50%;
67
    min-height: 420px;
68
    overflow: hidden;
69
}
70

71
.card__img {
72
    display: block;
73
    max-width: 100%;
74
    height: 100%;
75
    object-fit: cover;
76
}
77

78
.card__content {
79
    padding: 52px 38px;
80
    display: flex;
81
    flex-direction: column;
82
    gap: 25px;
83
    flex: 1;
84

85
}
86

87
.card__title {
88
    font-family: "Bentham";
89
    color: #474747;
90
    font-size: 34px;
91
    margin: 0;
92
    gap: 5px;
93
}
94

95
.card__text {
96
    margin: 0 0 15px;
97

98
}
99
.card__tags {
100
    margin-top: auto;
101
}
102

103
.card__bottom {
104
    display: flex;
105
    align-items: center;
106
    gap: 30px;
107
}
108

109
.card__price {
110
    color: #474747;
111
    font-family: "Suranna", serif;
112
    font-size: 34px;
113
    font-weight: bold;
114
    line-height: 1.3;
115
}
116

117

118
.card__button {
119
    flex: 1 1 auto;
120
}
121

122
@media only screen and (max-width: 768px) {
123
    .card {
124
        flex-direction: column;
125
    }
126
    .card__picture {
127
        flex-basis: 300px;
128
        min-height: auto;
129
    }
130

131
    .card__content {
132
        padding: 45px 38px;
133
    }
134
}
135

136
@media only screen and (max-width: 430px){
137
    .card__content {
138
    padding: 40px 30px;
139
    }
140

141
    .card__bottom {
142
        flex-direction: column;
143
        gap: 15px;
144
        align-items: stretch;
145
        text-align: center;
146
    }
147
}
148