پیشنمایش زنده
کد HTML
<div class="card">
<span class="card__title"
>Subscribe
<svg
fill="333"
width="40px"
viewBox="0 -960 960 960"
height="40px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M106.67-564q0-93.33 41.5-171.17 41.5-77.83 111.16-129.5L299-811.33q-57.33 42.66-91.5 106.66T173.33-564h-66.66Zm680 0q0-76.67-34.17-140.67-34.17-64-91.5-106.66l39.67-53.34q69.66 51.67 111.16 129.5 41.5 77.84 41.5 171.17h-66.66ZM160-200v-66.67h80v-296q0-83.66 49.67-149.5Q339.33-778 420-796v-24q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v24q80.67 18 130.33 83.83Q720-646.33 720-562.67v296h80V-200H160Zm320-301.33ZM480-80q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM306.67-266.67h346.66v-296q0-72-50.66-122.66Q552-736 480-736t-122.67 50.67q-50.66 50.66-50.66 122.66v296Z"
></path></svg
></span>
<p class="card__content">
Get fresh web design resources delivered straight to your inbox every week.
</p>
<div class="card__form">
<input type="text" placeholder="Your Email" />
<button title="SignUp" class="sign-up">
<svg
fill="#e8eaed"
width="24px"
viewBox="0 -960 960 960"
height="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"></path>
</svg>
</button>
</div>
</div>
کد CSS
.card {
width: 340px;
height: 254px;
padding: 0 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
background: #fff;
border-radius: 20px;
}
.card > * {
margin: 0;
}
.card__title {
font-size: 23px;
font-weight: 900;
color: #333;
}
.card__content {
font-size: 13px;
line-height: 18px;
color: #333;
margin: 10px;
}
.card__form {
display: flex;
flex-direction: row;
gap: 10px;
}
.card__form input {
outline: 0;
margin-left: 10px;
background: rgb(255, 255, 255);
box-shadow: transparent 0px 0px 0px 1px inset;
padding: 0.6em;
border-radius: 14px;
border: 1px solid #333;
color: black;
}
.card__form button {
border: 0;
background: #111;
color: #fff;
padding: 0.68em;
border-radius: 14px;
font-weight: bold;
cursor: pointer;
}
.sign-up:hover {
opacity: 0.9;
}