ఎలా తయారు చేయాలి: కుపోన్

CSS ఉపయోగించి ‘కుపోన్’ తయారు చేయడం నేర్చుకోండి.

కంపెనీ లోగో
luckin coffee
20% మీ కొనుగోళ్ళు నుండి ఆఫ్

Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.

ప్రమో కోడ్ ఉపయోగించండి: BOH232

గడువు ముగిసింది: జనవరి 03, 2025

亲自试一试

కొనుగోళ్ళు కోసం కుపోన్ ఎలా తయారు చేయాలి

మొదటి దశ - HTML జోడించండి:

<div class="coupon">
  <div class="container">
    <h3>కంపెనీ లోగో</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% మీ కొనుగోళ్ళు నుండి ఆఫ్</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>ప్రమో కోడ్ ఉపయోగించండి: <span class="promo">BOH232</span></p>
    <p class="expire">గడువు ముగిసింది: జనవరి 03, 2021</p>
  </div>
</div>

రెండవ దశ - CSS జోడించండి:

.coupon {
  border: 5px dotted #bbb; /* డాట్లు బార్డర్ */
  width: 80%;
  border-radius: 15px; /* గుండ్రాకార బార్డర్ */
  margin: 0 auto; /* అద్దె రివైజ్ను మధ్యన ఉంచండి */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.expire {
  color: red;
}

亲自试一试