Theme Integration and Create Home Page - Angular 6 / Angular 7

Posted at: December 15, 2018 4:36 PM

Integrate theme and create home page in this project.

src/styles.css

Edit src/styles.css with below code


/* You can add global styles to this file, and also import other style files */

h1 {font-size: 2.4rem;margin-bottom: 30px;}
.bg-blue {background-color:#007EDB;}
.navbar-brand img { height:30px; }
.navbar-dark .navbar-nav .nav-link {color:#fff;}
.navbar-dark .navbar-nav .active .nav-link {color:#fff;}
.banner img {width:100%;}
.blog-box {text-align: center; margin-bottom: 20px;}
.blog-box h3 { margin:20px 0; font-size:22px; color:#000;}
.blog-box p { color:#666; }
.blog-box span, .posted-on span { font-style: italic; color:#000; }
.blog-box img { width:100%; }
.mtb-40 { margin:40px 0; min-height:450px;}
.banner-box {position: relative;}
.intro-text { width:100%; position: absolute; top:30%; text-align: center; color:#fff;}
.intro-text-box { width: 62%;margin: auto;background-color: rgba(96, 96, 96, 0.6);padding: 20px;border: 10px solid #808080;}
.intro-text-box h1 {font-size:3em;}

.blog-right h3 {background-color:#000;color: #fff; padding:5px 15px;font-size:20px;}
.detail-img {margin:40px 0px;}
.rb-box-img { margin-right:15px; }
.rb-box-img img { width:100px;}
.rb-box {display: flex;}
.rb-box-desc h4 {font-size:20px;color:#000;font-weight: 600;}
.rb-box-desc p {color:#666;}
.rb-box {margin-bottom:10px;}
.recent-post a:hover {text-decoration: none;}
.recent-post a:hover h4 {color:#007EDB;}

.categories {margin-top:20px;}
.categories ul {padding:0;margin:0; list-style: none;}
.categories ul li { border-bottom:1px dotted #ccc; padding:5px 0px; }
.categories ul li a {color:#333; display: block;}
.categories ul li a:hover {color:#007EDB; text-decoration: none;}
.body-content { min-height:380px; }
.error-404 { text-align: center; }
.error-404 h1{ font-size:10em; }
.service-error {text-align:center; padding:50px 0;}
.service-error h1 { font-size: 3em;text-transform: uppercase;color:#007EDA;}

/*Admin*/

.login-box {box-shadow: 1px 1px 7px #666;padding:20px;margin-top:10%;}
.login-box h1 {font-size:24px;text-align: center;margin-bottom: 20px}
.dash-left ul {padding:0;margin:0;list-style:none;}
.dash-left ul li { background-color: #f1f1f1; margin-bottom:5px;}
.dash-left ul li a {color:#333; padding:5px 15px; display: block;}
.dash-left ul li:hover a {background-color:#007EDB; text-decoration: none; color:#fff;}
.dash-left ul li a.active {background-color:#007EDB; color:#fff;}
.dash-header {display:flex; justify-content: space-between;}
.table img { width:80px; }

footer {background-color: #000;color:#fff; padding:20px;}

/*validation*/

.ng-valid[required], .ng-valid.required {border: 1px solid #42A948;}
.error {color:#ff0000;}
.success { color:green; }
.contact-message { text-align: center; }

@media (max-width: 767px) {
.intro-text {display: none;}
}
Copy

Images

Upload all images in src/assets/images folder

header.component.html

Edit file src/app/header/header.component.html


<nav class="navbar navbar-expand-md navbar-dark bg-blue">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="assets/images/logo.png" alt="Angular Project" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Copy

banner.component.html

Edit file src/app/banner/banner.component.html


<section class="banner">
  <div class="banner-box">
    <div class="intro-text">
      <div class="intro-text-box">
        <h1>Lorem Ipsum is simply dummy text</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s</p>
      </div>
    </div>
    <img src="assets/images/banner.jpg" alt="banner" />
  </div>
</section>
Copy

footer.component.html

Edit file src/app/footer/footer.component.html


<footer>
  <div class="container">
    <div class="copyright">
      <div>Designed by RSGiTECH</div>
    </div>
  </div>
</footer>
Copy

blogpost-featured.component.html

Edit file src/app/blogpost/blogpost-featured/blogpost-featured.component.html


<section class="featured-blog mtb-40">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img1.jpg" alt="blog1" />
          <h3>Sample blog post 1</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img2.jpg" alt="blog1" />
          <h3>Sample blog post 2</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img3.jpg" alt="blog1" />
          <h3>Sample blog post 3</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img4.jpg" alt="blog1" />
          <h3>Sample blog post 4</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img5.jpg" alt="blog1" />
          <h3>Sample blog post 5</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="blog-box">
          <img src="assets/images/img6.jpg" alt="blog1" />
          <h3>Sample blog post 6</h3>
          <p>by <span>RSGiTECH</span> on <span>October 22, 2018</span></p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
          <a href="detail.html" class="btn btn-danger">Read more...</a>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
This lesson also available on YouTube
CSS HTML Bootstrap Theme Home Page

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

18 Comments