Project - Theme Integration
You can create your own theme in Styles.css file of root directory of project
src/styles.css
Like below:
/* 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:#ef4545;}
.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;}
/* For 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;}
/* For 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;}
}
Images
Keep all images in src/assets/images folder
Header
Design the header component 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="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Banner
Design the banner component src/app/banner/banner.component.html
<section class="banner">
<div class="banner-box">
<div class="intro-text">
</div>
<img src="assets/images/banner.jpg" alt="banner" />
</div>
</section>
Footer
Design the footer component src/app/footer/footer.component.html
<footer>
<div class="container">
<div class="copyright">
<div>Powered by Sahosoft</div>
</div>
</div>
</footer>
Courses Featured:
Design the Courses featured component
src/app/courses/courses-featured/courses-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>Angular 7 Full Course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..
</p>
<a href="#" 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>Python Full Course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Python is one of the high-level general programming languages, interpreted, easy to use,complete and powerful. It is an object..</p>
<a href="#" 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="post1" />
<h3>Angular Material course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</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="post2" />
<h3>Entity Framework Course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</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="post3" />
<h3>CSS Course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</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="post4" />
<h3>TypeScript Course</h3>
<p>by <span>Sahosoft Tutorials</span></p>
<p>Angular 7 released in October 2018, just like it was scheduled. The new features of the framework are the updated form of Node 10..</p>
<a href="detail.html" class="btn btn-danger">Read more...</a>
</div>
</div>
</div>
</div>
</section>
