Как создать адаптивный дизайн карты с описанием товара используя Html и CSS | How to Make Responsive Card Design Using Html and css
В этом видео мы создадим адаптивный дизайн карты с описанием товара используя HTML и CSS. Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».
Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<img src="image1.jpg" alt="">
<div>
<h2>Invest in Valby's sparking new construction</h2>
<h3>Type: Residential rental</h3>
<p>Soon you Invest in Raj Kapoor's new attractive property, set in the heart of Athens.</p>
<button>Show more property project</button>
</div>
</div>
</body>
</html>
CSS КОД:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background: #efecff;
background-size: 16px 16px;
}
.card {
display: flex;
align-items: center;
width: 75vw;
max-width: 650px;
padding: 50px 30px 50px 20px;
background: #ffffff;
border-radius: 24px;
}
.card img {
max-width: 280px;
width: 28vw;
height: 300px;
object-fit: cover;
margin-left: -60px;
margin-right: 30px;
border-radius: inherit;
box-shadow: 0 60px 40px rgb(0 0 0/8%);
}
.card h2 {
font-size: 22px;
margin-right: 30px;
}
.card h3 {
font-size: 16px;
font-weight: 400;
color: rgb(0 0 0/90%);
margin-bottom: 24px;
}
.card p {
font-size: 14px;
font-weight: 400;
color: rgb(0 0 0/70%);
margin-bottom: 24px;
}
.card button {
border: 0;
background: linear-gradient(90deg, #5448de, #5448de);
color: #f8f8f8;
padding: 16px 26px;
font-size: 16px;
border-radius: 40px;
}
@media (width <= 740px) {
.card {
margin: 0 40px;
padding-left: 50px;
padding-right: 50px;
width: 100%;
text-align: center;
flex-direction: column;
}
.card h2 {
margin-right: 0;
font-size: 26px;
}
.card img {
margin: -100px 0 30px 0;
width: 100%;
max-width: 1000px;
}
}
0 Комментарии