Верстка сайта «Sweet World of Desserts». Часть 3

25.03.2024 #CSS, #H2, #H3, #html, #Версткасайта, #Макет для верстке

Третья часть сайта «Sweet World of Desserts». Посвящена не сложному блоку «О нас».

В данном блоке описанно два новых класса: about, about-iner.

HTML-код

<section class="about">
    <div class="wrapper">
      <h2 class="main-heading">About Us</h2>
      <div class="about-iner">
        <img src="./img/about.png" alt="#">
        <p>Welcome to Sweet World of Desserts, where every sweet tooth will find something to suit their taste! Our block is dedicated not only to magnificent desserts, but also to the universe in which they exist. Here you will find inspiration for creating the most incredible sweets, as well as secrets and tips for preparing your favorite desserts right at home.</p>
        <div class="btn"><a href="#">MORE DETAILS</a></div>
      </div>
    </div>
  </section>

Централизовать изображение <img src=»./img/about.png» alt=»#»>, используется свойста:

.about-iner img{
    display: block;
    margin: 0 auto;
}

CSS-код

.about{
    margin-top: 140px;
   
}
.about-iner{
    margin-top: 60px;
    text-align: center;
   
}
.about-iner img{
    display: block;
    margin: 0 auto;
}
.about-iner p{
   font-size: 36px;
   margin-top: 60px;
   margin-bottom: 60px;
   font-style: italic;
   
}
.btn a{
    text-align: center;
    background: rgb(215,0,116);
    background: linear-gradient(135deg, rgba(215,0,116,1) 0%, rgba(113,0,61,0.6362920168067228) 100%);
  padding: 20px 40px;
    border-radius: 50px;
    color:#F3F3F3;
}