پیشنمایش زنده
کد HTML
<div class="card">
<div>
<p class="Name-9999">Abo</p>
<p class="Price-9999">10$</p>
<svg viewBox="0 0 20 20" class="svg-icon">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
</svg>
<p class="YouGet-9999">lorem-impus</p>
<svg viewBox="0 0 20 20" class="svg-icon2">
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
</svg>
<p class="Description-9999">lorem-ipsum</p>
</div>
</div>
کد CSS
.card {
width: 12em;
height: 15em;
background: lightblue;
border-radius: 1em;
border-color: black;
border-style: solid;
border-width: 0.4em;
box-shadow: 0.3em 0.3em black;
}
.svg-icon {
margin-top: 0.3em;
margin-left: 0.5em;
width: 2em;
height: 2.5em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: rgb(0, 110, 255);
}
.svg-icon circle {
stroke: #000;
stroke-width: 1;
}
.Name-9999 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 900;
font-size: 2em;
margin-left: 0.5em;
}
.Price-9999 {
margin-bottom: 0.3em;
margin-top: -0.3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 900;
font-size: 3em;
margin-left: 0.3em;
}
.Description-9999 {
font-size: 1.1em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 900;
position: relative;
margin-left: 4em;
margin-top: -2.4em;
}
.YouGet-9999 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 900;
position: relative;
margin-left: 4em;
margin-top: -2.4em;
font-size: 1.1em;
}
.svg-icon2 {
margin-top: 1em;
margin-left: 0.5em;
width: 2em;
height: 2em;
}
.svg-icon2 path,
.svg-icon2 polygon,
.svg-icon2 rect {
fill: rgb(0, 110, 255);
}
.svg-icon2 circle {
stroke: #000;
stroke-width: 1;
}