tarjeta de cumpleaños HTML CSS - Ivan Chio

Vista previa del material en texto

INSTRUCCIONES: Realiza una tarjeta de felicitación para tu mejor amigo utilizando HTML 
y CSS. La tarjeta debe contener un pastel y debe felicitar a la persona utilizando texto. 
HTML: 
<div class="cake"> 
 <div class="plate"></div> 
 <div class="layer layer-bottom"></div> 
 <div class="layer layer-middle"></div> 
 <div class="layer layer-top"></div> 
 <div class="candle"></div> 
 <div class="text">Feliz Cumpleaños Maria</div> 
</div> 
CSS 
.cake { 
 position: relative; 
 margin: auto; 
 width: 200px; 
 height: 300px; 
} 
 
.plate { 
 position: absolute; 
 bottom: 0; 
 width: 200px; 
 height: 20px; 
 border-radius: 10px 10px 0 0; 
 background-color: #e8c79b; 
} 
 
.layer { 
 position: absolute; 
 bottom: 20px; 
 width: 180px; 
 height: 80px; 
 border-radius: 50%; 
} 
 
.layer-bottom { 
 background-color: #c94d3f; 
} 
 
.layer-middle { 
 background-color: #f2c0ab; 
 transform: translateX(10px); 
} 
 
.layer-top { 
 background-color: #c94d3f; 
 transform: translateX(-10px); 
} 
 
.candle { 
 position: absolute; 
 top: 20px; 
 left: 80px; 
 width: 10px; 
 height: 50px; 
 background-color: #ffed00; 
 border-radius: 5px; 
 box-shadow: 0px 0px 10px #ffed00; 
} 
 
.text { 
 position: absolute; 
 top: 240px; 
 width: 200px; 
 text-align: center; 
 font-size: 24px; 
 font-weight: bold; 
 color: #c94d3f; 
}