September 27, 2021

About us bootstrap snippets

<section class="about-section">
        

        <div class="container">
            <div class="row">
                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-section">
                        <div class="inner-title">
                            <span class="title">About Event</span>
                            <h2>What is business Startup conference?</h2>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit facere, maiores ut, cum dolorem voluptatem pariatur sint accusantium sapiente molestiae minima facilis molestias harum inventore tenetur beatae repudiandae asperiores quod!</div>
                        </div>
                        <div class="btn-box"><a href="#" class="theme-btn btn-style-two btn-primary"><span class="btn-title ">Register Now</span></a></div>
                    </div>
                </div>

                <!-- Image Column -->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="image-box">
                        <figure class="image-1"><img src="https://www.tolmatol.com/uploads-images/about-us-bootstrap-snippets/about-1.jpg" alt=""></figure>
                        <figure class="image-2"><img src="https://www.tolmatol.com/uploads-images/about-us-bootstrap-snippets/about-2.jpg" alt=""></figure>
                    </div>
                </div>
            </div>
        </div>
    </section>

 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
     
.about-section{
  position: relative; 
  background-color: #fbfbfd;
} 

.about-section .content-column{
  position: relative;
  margin-bottom: 50px;
}

.about-section .content-column .inner-section{
  position: relative;
  padding-top: 120px;
  padding-right: 100px;
}

.about-section .content-column .inner-title{
  position: relative;
  margin-bottom: 43px;
}

.about-section .content-column .inner-title h2{
  font-size: 50px;
  line-height: 60px;
  padding-bottom: 0;
  margin-bottom: 15px;
}

.about-section .content-column .inner-title h2:before{
  display: none;
}

.about-section .content-column .inner-title .title{
  margin-bottom: 15px;
}

.about-section .content-column .inner-title .text{
  font-size: 18px;
  line-height: 32px;
  color: #7f8897;
  font-weight: 400;
}

.about-section .content-column .btn-box{
  position: relative;
}

.about-section .content-column .btn-box a{
  padding: 15px 32px;
}

.about-section .content-column .btn-box a:hover{
  -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.20);
  -ms-box-shadow: 0 0 30px rgba(0,0,0,0.20);
  box-shadow: 0 0 30px rgba(0,0,0,0.20);
}

.about-section .image-column{
  position: relative;
  margin-bottom: 50px;
}

.about-section .image-column .image-box{
  position: relative;
  padding-bottom: 100px;
  padding-left: 100px;
}

.about-section .image-column .image-box img{
  position: relative;
  z-index: 1;
  border: 12px solid #ffffff;
  -webkit-box-shadow: 0 20px 30px rgba(14,16,48,.10);
  -ms-box-shadow: 0 20px 30px rgba(14,16,48,.10);
  box-shadow: 0 20px 30px rgba(14,16,48,.10);
}

.about-section .image-column .image-1{
  position: relative;
  margin-bottom: 0; margin-right: -25px;
}

.about-section .image-column .image-1:before{
  position: absolute;
  height: 500px;
  width: 270px;
  right: -30px;
  top: 80px;
  background: rgb(255,138,1);
  background: -moz-linear-gradient(45deg, #673AB7 0%,rgba(225,19,123,1) 100%);
  background: -webkit-linear-gradient(45deg, #673AB7 0%,rgba(225,19,123,1) 100%);
  background: linear-gradient(45deg, #673AB7 0%,rgba(225,19,123,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a01', endColorstr='#e1137b',GradientType=1 );
  content: "";
  z-index: 0;
}

.about-section .image-column .image-2{
  position: absolute;
  left: 0;
  bottom: 0;
  margin-bottom: 0;
}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *