welcome to tutorialfamily

sources aboutus section

Html about us section

html blog is use for display blog post of website.

html about us


         		
  <!-- ======================== Start About Us ============================ -->
        <section class="section about" id="about">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
					<div class="about-image">
						<img src="https://tutorialfamily.com/wp-content/uploads/2019/12/seo-feature.jpg" alt="about us " class="d-block rounded">
						<a href="#" class="about-icon text-center" title="Play video Now"><i class="fa fa-play" aria-hidden="true"></i></a>
					</div>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
						<div class="about-title">
                            <h2>About <span class="comman-color">Us</span></h2>
						</div>
						<h4 class="mt-4">Hey Whatsup!</h4>
						<p class="mt-4 text-muted">Our vision is to develop in a constant manner and grow as a major IT service provider to become a leading performer, in providing quality Web and Software Development solutions. </p>
						<p class="text-muted">Our professional, flexible and integrated process reflects in what we do. We always guide our customers to success. We have the ability to accelerate and quickly share the great work or products of your organization or business. Creative Design and Development to deliver high-quality solutions.</p>
					   <div class="mt-4">
							<a href="#" class="btn home-btn common-transition">Get More Info <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
					   </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ======================== End About Us ============================ -->						


css


         
/* blog */
body a {
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
a:hover {
    text-decoration: none;
}
/*==========================  START ABOUT ============================*/

.about .about-image{
	position:relative;
}
.about .about-image::before {
    background-color: rgba(10, 17, 40, 0.8);
    position: absolute;
    top: 0;
    right: 0;
	left:0;
	bottom:0;
    width: 100%;
    height: 100%;
	content:'';
	border-radius: 0.25rem;
}
.about .about-image img{
	width:100%;
}
.about .about-image a.about-icon{
    position: absolute;
	width: 100%;
    top: 50%;
	transform: translateY(-50%);
    color: #fff;
    z-index: 2;
}
.about .about-image a.about-icon i{
	font-size: 70px;	
}

.about .about-title h2::before {
    border: 1px solid #000;
    content: "";
    height: 3px;
    left: 0px;
    position: absolute;
    top: 55px;
    width: 40px;
	margin:auto;
}
.about .about-title h2{
	position:relative;
	margin-bottom:40px;
}

/*==========================  END ABOUT ============================*/										


output

Our Content