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

Popular posts from this blog

Send Data Child to Parent Component - React Js

-
 App.js: import React from "react" ; import './App.css' import { Student } from "./Components/Student" ; function App () {   function alertFunc ( data )   {     alert ( data )   }   const name = "Krishan Dev"   return (     <div className = "App" >     < Student data = { name } alert1 = { alertFunc } />         </div>   ) } export default App ; ---------------------------- Student.js import React from 'react' export const Student = ( props ) => {   const data = "Bhavesh"   return (     <div>       <h6> { props . data } </h6>       <button onClick = { props . alert1 ( data ) } > Click Me </button>     </div>   ) }
Read more

Hide , Show and Toggle in ReactJs

-
 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ show , setShow ]= useState ( true ) return (   <div>     {       show ? <h1> Hello Bhavesh </h1> : null     }     { /* <button onClick={()=>setShow(false)}>Hide</button>     <button onClick={()=>setShow(true)}>Show</button> */ } <button onClick = { () => setShow (! show ) } > Toggle </button>   </div> ) } export default App ;
Read more

Importance Of Web Content In SEO.

-
Content is one of the most important Google ranking factors. One of the benefits of publishing good content is that it will increase the number of people who find your website through search engines.  Content provides information and this information can be used to educate search engines about your website. Content also provides a great opportunity for internal links.
Read more