Angular Website Template
HTML -
<div id="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Company Name</h2>
</div>
<div class="col-sm-8">
<ul id="menu" class="float-md-right">
<a href=""><li>Home</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Services</li></a>
<a href=""><li>Contact</li></a>
<a href=""><li>Blog</li></a>
</ul>
</div>
</div>
</div>
</div>
<!-- Banner -->
<div id="banner" class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-md-8 col-lg-6">
<div class="banner-title">
<h1>Some Heading Goes Here</h1>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos architecto inventore sit ut laborum animi odit dolorem mollitia laudantium et.</p>
</div>
</div>
</div>
</div>
<!-- Service Boxes -->
</div>
<div class="container section">
<div class="row">
<div class="col-md-12">
<h2 class="section-head">Some Heading Goes Here</h2>
</div>
<div class="col-md-4 service-box">
<i class="fa-solid fa-cubes"></i>
<h2>Some Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid recusandae fuga cum hic, explicabo amet.</p>
</div>
<div class="col-md-4 service-box">
<i class="fa-solid fa-keyboard"></i>
<h2>Some Heading</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia alias eligendi consequuntur eius vel sit.</p>
</div>
<div class="col-md-4 service-box">
<i class="fa-solid fa-laptop-code"></i>
<h2>Some Heading</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad laboriosam, eaque facere dicta sequi molestiae.</p>
</div>
</div>
</div>
<!-- Testimonial -->
<div id="testimonial" class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="section-head">Testimonials</h2>
</div>
<div class="col-md-6">
<div class="testimonial">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, consequuntur maiores? Suscipit voluptas ipsam natus nesciunt animi atque sint quas?</p>
<img src="assets\images\bill-gate.png" alt="Bill Gates">
<div class="author">Bill Gates</div>
<div class="authorCompany">Microsoft</div>
</div>
</div>
<div class="col-md-6">
<div class="testimonial">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, consequuntur maiores? Suscipit voluptas ipsam natus nesciunt animi atque sint quas?</p>
<img src="assets\images\stevejob.png" alt="Steve Jobs">
<div class="author">Steve Jobs</div>
<div class="authorCompany">Apple</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent News -->
<div id="news" class="container section">
<div class="row">
<div class="col-md-12">
<h2 class="section-head">Some Heading Goes Here</h2>
</div>
<div class="col-md-3">
<div class="news-post">
<img src="assets\images\blog-1.png" alt="blog1">
<h3><a href="#">News Heading Here</a></h3>
<div class="post-date">Oct 30, 2022</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam similique sunt necessitatibus. Odit, earum delectus voluptatum dicta a nobis autem.</p>
<a href="#" class="readmore">Read More</a><i class="fa-solid fa-angles-right"></i>
</div>
</div>
<div class="col-md-3">
<div class="news-post">
<img src="assets\images\blog-3.png" alt="blog1">
<h3><a href="#">News Heading Here</a></h3>
<div class="post-date">Oct 30, 2022</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam similique sunt necessitatibus. Odit, earum delectus voluptatum dicta a nobis autem.</p>
<a href="#" class="readmore">Read More</a><i class="fa-solid fa-angles-right"></i>
</div>
</div>
<div class="col-md-3">
<div class="news-post">
<img src="assets\images\blog-2.png" alt="blog1">
<h3><a href="#">News Heading Here</a></h3>
<div class="post-date">Oct 30, 2022</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam similique sunt necessitatibus. Odit, earum delectus voluptatum dicta a nobis autem.</p>
<a href="#" class="readmore">Read More</a><i class="fa-solid fa-angles-right"></i>
</div>
</div>
<div class="col-md-3">
<div class="news-post">
<img src="assets\images\blog-3.png" alt="blog1">
<h3><a href="#">News Heading Here</a></h3>
<div class="post-date">Oct 30, 2022</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam similique sunt necessitatibus. Odit, earum delectus voluptatum dicta a nobis autem.</p>
<a href="#" class="readmore">Read More</a> <i class="fa-solid fa-angles-right"></i>
</div>
</div>
</div>
</div>
<!-- footer-section -->
<div class="footer-sidebar">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="footer-widget">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum obcaecati ullam explicabo quas maxime minus quam ipsam unde voluptatem cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, quisquam!</p>
</div>
</div>
<div class="col-md-4">
<div class="footer-widget">
<h4 class="latest-news">Latest News</h4>
<ul>
<li><a href=""><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis.</p></a></li>
<li><a href=""><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis.</p></a></li>
<li><a href=""><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, perspiciatis.</p></a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="footer-widget">
<h4>Address</h4>
<address>
G-16, Sector 3, Noida, UP, 201301<br>
Ph. 7053051182
</address>
</div>
</div>
</div>
</div>
</div>
<!-- copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6"><p>Copyright 2022 Company Name</p></div>
<div class="col-md-6">
<div class="social-icons">
<i class="fa-brands fa-facebook"></i><i class="fa-brands fa-square-twitter"></i><i class="fa-brands fa-instagram"></i><i class="fa-brands fa-linkedin"></i>
</div>
</div>
</div>
</div>
</div>
-------------------------------------------------
CSS:
.section{
margin-top: 70px;
margin-bottom: 70px;
}
.section-head:after{
background: #e74c3c;
content: "";
display: block;
width: 100px;
height: 3px;
margin: 20px auto;
}
#header{
background-color:#e74c3c ;
color: white;
}
#menu{
float: right;
text-decoration: none;
}
#menu a{
text-decoration: none;
padding: 10px 20px;
}
#menu a li{
display: inline-block;
color: white;
}
#menu a:hover{
background-color: #c0392b;
}
#banner{
width: 100%;
height: 500px;
background: url('../../assets/images/bg-img.webp') no-repeat 0 ;
background-size: cover;
}
.banner-title{
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
padding: 10px;
}
.lead{
color: aliceblue;
background-color: rgba(231, 76, 60, 0.7);
padding: 10px;
}
.col-lg-6{
offset: 5;
}
.fa-solid fa-code{
height: 200px;
width: 200px;
}
.service-box{
text-align: center;
}
.service-box i.fa-solid{
color: #e74c3c;
font-size: 60px;
margin-bottom: 15px;
}
.col-md-12 h2{
text-align: center;
}
/* Testimonial CSS */
#testimonial{
color: white;
background: url('../../assets/images/testimonial-bg.webp') no-repeat 0 ;
background-size: cover;
padding: 50px 0;
position: relative;
}
#testimonial::before{
background: rgba(52, 73, 94, 0.7);
/* content: ""; */
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.testimonial img{
border-radius: 50%;
}
/* News post CSS */
.news-post h3 a{
color: #e74c3c;;
}
.readmore{
color: #e74c3c;
text-decoration: none;
font-size: 14px;
}
.news-post i{
color: #e74c3c;
}
.news-post img{
width: 100%;
margin-bottom: 10px;
}
.news-post h3{
font-size: 1.35rem;
}
.post-date{
font-size: 13px;
margin-bottom: 2px;
}
.post-date:before{
content: "\f073";
font-family: FontAwesome;
padding-right: 5px;
color: #e74c3c;
}
/* footer CSS */
.footer-sidebar{
background-color: #34495e;
color: white;
padding: 20px 0;
}
.footer-widget li a{
text-decoration: none;
color: white;
}
.footer-widget li{
list-style: none;
}
.footer-widget li a p:before{
content: "\f101";
font-family: FontAwesome;
padding-right: 5px;
color: #e74c3c;
}
.footer-widget h4:after{
content: "";
background: #e74c3c;;
display: block;
width: 50px;
height: 2px;
margin: 5px 0;
}
.latest-news{
margin-left: 30px;
}
/* Copyright CSS */
.copyright{
background: #2c3e50;
width: 100%;
height: 50px;
color: white;
}
.copyright p{
margin-top: 10px;
}
.fa-brands{
padding: 10px;
}
.social-icons{
float: right;
margin-top: 10px;
}
Output:
Comments
Post a Comment