Projeto atualizado

index.html

<div class="cabeca">
        <div class="title">
            <h4><span>Coin des saveurs </span>cardapio do dia</h4>
        </div>
        <div class="menu">
            <div class="principal-menu">
                <img src="https://i.pinimg.com/originals/73/72/75/7372755375207955155e10e76092c879.jpg" alt="#">
                <div class="menu-content">
                    <h4>bannan bouyi ak poul <span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
            <div class="principal-menu">
                <img src="https://i.pinimg.com/originals/0f/d7/69/0fd7692e609e36131a22844dbef47f29.jpg" alt="">
                <div class="menu-content">
                    <h4>diri ak legim ayisyen <span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
            <div class="principal-menu">
                <img src="https://foreignfork.com/wp-content/uploads/2021/12/Haitian-Griot-Recipe-Featured-Image-1024x1024.jpg" alt="">
                <div class="menu-content">
                    <h4>Fritay Ayisyen <span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
            <div class="principal-menu">
                <img src="https://i.pinimg.com/originals/a3/b8/e6/a3b8e6fc818f5ceb2262ecae5d8fbaff.jpg" alt="">
                <div class="menu-content">
                    <h4>spageti ak ze zaboka<span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
            <div class="principal-menu">
                <img src="https://i.pinimg.com/originals/d2/ae/8f/d2ae8f2123cbd41245e3e9ddba25dbdd.jpg" alt="">
                <div class="menu-content">
                    <h4>Diri ak lalo ayisyen<span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
            <div class="principal-menu">
                <img src="https://i.pinimg.com/originals/04/20/ad/0420ad0f8ce4f5989ae58606b665f82e.jpg" alt="">
                <div class="menu-content">
                    <h4>tonmtonm haitien <span>R$45</span></h4>
                    <p class="paragrafo">com coin des saveurs, você pode experimentar todas as deliciosas receitas haitianas sem nunca precisar viajar nem um dia para o Haiti.</p>
                </div>
            </div>
        </div>
    </div>

<footer class="rodape">
  <h4> @todos direitos reservado para o ministerio de cultura haitiana</h4>
    
</footer>

projeto-atualizado.markdown

Projeto atualizado

A Pen by Stephen O Orelus on CodePen.

License.

style.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box

}
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
    font-family: 'Poppins', sans-serif;
    background-color: #ff7720;
}
.cabeca{
  width:1200px;
  margin:100px auto;
}
.title{
  text-align:center;
  margin-bottom:60px;
}
.title h4{
  text-transform:capitalize;
  font-size:36px;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.title h4 span{
  display:block;
  font-size:18px;
  font-style:italic;
  margin-bottom:10px;
}
.title h4:before{
  position:absolute;
  content:"";
  width:100px;
  height:2px;
  background-color:#ff7720;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}
.menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.principal-menu{
  flex-basis:580px;
  margin-bottom:40px;
  padding-bottom:40px;
  border-bottom:1px solid #ddd;
}
.principal-menu:nth-child(5), .principal-menu:nth-child(6){
  border-bottom:0;
}
.principal-menu{
  display:flex;
  flex-direction:row;
  align-items:center;
}
.principal-menu:hover img{
  border-radius:0;
}
.principal-menu img{
  max-width:180px;
  margin-right:30px;
  border-radius:50%;
  border:1px solid #ddd;
  padding:3px;
  transition:.5s;
}
.principal-menu h4{
  text-transform:capitalize;
  font-size:22px;
  border-bottom:1px dashed rgb(250, 250, 250);
  margin-bottom:5px;
  padding-bottom:5px;
}
.principal-menu h4 span{
  float:right;
  color:rgb(250, 250, 250);
  font-style:italic;
}
.rodape{
  text-align: center
 
}