Skip to content

C
Codeinfotech
Commit 6dd62f73 by abraham
Options

4:30pm

parent 7bc8d8ff
Showing with 235 additions and 17 deletions
src/app/body/aboutus/aboutus.component.html
...@@ -67,19 +67,19 @@ ...@@ -67,19 +67,19 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<h3>300+</h3> <h3><span class="count">300</span>+</h3>
<h5>Active Clients</h5> <h5>Active Clients</h5>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<h3>5000+</h3> <h3><span class="count">5000</span>+</h3>
<h5>Sales</h5> <h5>Sales</h5>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<h3>35+</h3> <h3><span class="count">35</span>+</h3>
<h5>Products</h5> <h5>Products</h5>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<h3>80%+</h3> <h3><span class="count">80</span>%</h3>
<h5>Satisfied Clients</h5> <h5>Satisfied Clients</h5>
</div> </div>
</div> </div>
......
src/app/body/aboutus/aboutus.component.scss
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
h5{ h5{
text-align: center !important; text-align: center !important;
object-fit: contain; object-fit: contain;
font-family: Myriad Pro; font-family: Roboto;
font-size: 27.5px; font-size: 27.5px;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
......
src/app/body/aboutus/aboutus.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({ @Component({
selector: 'app-aboutus', selector: 'app-aboutus',
templateUrl: './aboutus.component.html', templateUrl: './aboutus.component.html',
...@@ -7,9 +7,22 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +7,22 @@ import { Component, OnInit } from '@angular/core';
}) })
export class AboutusComponent implements OnInit { export class AboutusComponent implements OnInit {
constructor() { } constructor() {
}
ngOnInit() { ngOnInit() {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 12000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
} }
} }
src/app/body/landingpage/landingpage.component.html
...@@ -4,7 +4,28 @@ ...@@ -4,7 +4,28 @@
<ngx-slick-carousel class="carousel" <ngx-slick-carousel class="carousel"
#slickModal="slick-carousel" #slickModal="slick-carousel"
[config]="firstConfig"> [config]="firstConfig">
<div ngxSlickItem class="row"> <div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5">
<div class="left_side">
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
is simply dummy text
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
<div class="get_info" href="#">
Get info
<img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
</div>
</div>
</div>
<div class="col-md-7">
<div class="right_side">
<img src="../../../assets/img/asset_banner_img.png">
</div>
</div>
</div>
</div>
<div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="left_side"> <div class="left_side">
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span> <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
...@@ -21,8 +42,10 @@ ...@@ -21,8 +42,10 @@
<img src="../../../assets/img/asset_banner_img.png"> <img src="../../../assets/img/asset_banner_img.png">
</div> </div>
</div> </div>
</div>
</div> </div>
<div ngxSlickItem class="row"> <div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="left_side"> <div class="left_side">
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span> <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
...@@ -39,8 +62,10 @@ ...@@ -39,8 +62,10 @@
<img src="../../../assets/img/asset_banner_img.png"> <img src="../../../assets/img/asset_banner_img.png">
</div> </div>
</div> </div>
</div>
</div> </div>
<div ngxSlickItem class="row"> <div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="left_side"> <div class="left_side">
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span> <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
...@@ -57,6 +82,7 @@ ...@@ -57,6 +82,7 @@
<img src="../../../assets/img/asset_banner_img.png"> <img src="../../../assets/img/asset_banner_img.png">
</div> </div>
</div> </div>
</div>
</div> </div>
</ngx-slick-carousel> </ngx-slick-carousel>
</div> </div>
...@@ -205,6 +231,10 @@ ...@@ -205,6 +231,10 @@
<hr> <hr>
</div> </div>
<div class="rating_review_box"> <div class="rating_review_box">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="ratingConfig">
<div ngxSlickItem class="rating_slide">
<div class="rating_review_box_one"> <div class="rating_review_box_one">
<div class="row"> <div class="row">
<div class="rating_head"> <div class="rating_head">
...@@ -266,4 +296,130 @@ ...@@ -266,4 +296,130 @@
</div> </div>
</div> </div>
</div> </div>
<div ngxSlickItem class="rating_slide">
<div class="rating_review_box_one">
<div class="row">
<div class="rating_head">
<div class="rating_star">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
<div class="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
</div>
<div class="kochi_taxi">by kochitaxi</div>
</div>
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div>
</div>
</div>
<div class="rating_review_box_one">
<div class="row">
<div class="rating_head">
<div class="rating_star">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
<div class="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
</div>
<div class="kochi_taxi">by kochitaxi</div>
</div>
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div>
</div>
</div>
</div>
<div ngxSlickItem class="rating_slide">
<div class="rating_review_box_one">
<div class="row">
<div class="rating_head">
<div class="rating_star">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
<div class="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
</div>
<div class="kochi_taxi">by kochitaxi</div>
</div>
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div>
</div>
</div>
<div class="rating_review_box_one">
<div class="row">
<div class="rating_head">
<div class="rating_star">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
</div>
<div class="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
</div>
<div class="kochi_taxi">by kochitaxi</div>
</div>
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div>
</div>
</div>
</div>
</ngx-slick-carousel>
</div>
</div> </div>
\ No newline at end of file
src/app/body/landingpage/landingpage.component.scss
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
.map_contents{ .map_contents{
padding-top: 300px; padding-top: 300px;
padding-bottom: 250px; padding-bottom: 250px;
.slick_main{
.row{ .row{
.col-md-5{ .col-md-5{
display: flex; display: flex;
...@@ -102,6 +103,7 @@ ...@@ -102,6 +103,7 @@
color: #ffffff; color: #ffffff;
img{ img{
padding-left: 3px; padding-left: 3px;
display: inline;
} }
} }
} }
...@@ -119,6 +121,7 @@ ...@@ -119,6 +121,7 @@
} }
} }
} }
}
} }
.our_products{ .our_products{
background-color: #ffffff; background-color: #ffffff;
...@@ -326,6 +329,8 @@ hr{ ...@@ -326,6 +329,8 @@ hr{
margin: 0 auto; margin: 0 auto;
margin-bottom: 75px; margin-bottom: 75px;
padding-top: 36px; padding-top: 36px;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{ .rating_review_box_one{
margin: 23px 16px 24px 16px; margin: 23px 16px 24px 16px;
.row{ .row{
...@@ -398,4 +403,6 @@ hr{ ...@@ -398,4 +403,6 @@ hr{
} }
} }
} }
}
}
} }
\ No newline at end of file
src/app/body/landingpage/landingpage.component.ts
...@@ -11,5 +11,6 @@ export class LandingpageComponent implements OnInit { ...@@ -11,5 +11,6 @@ export class LandingpageComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
slideConfig = {"slidesToShow": 1, "slidesToScroll": 1,"dots":true,"arrow":false, responsive:[{breakpoint:480,settings:{slidesToShow:1}}]}; firstConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": false,"dots":true,"autoplay":true,"autoplaySpeed":2000};
ratingConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": true,"autoplay":true,"autoplaySpeed":2000,responsive:[{breakpoint:480,settings:{arrows:false}}]};
} }
src/app/header/header.component.scss
.nav_color{ .nav_color{
background-color: red; background-color: #ffff;
} }
nav{ nav{
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
.logo{ .logo{
max-width: 380px;
max-height: 78px;
img{ img{
width: 100%; width: 80%;
height: 100%; height: 100%;
} }
} }
......
src/assets/responsive.scss
...@@ -40,16 +40,22 @@ ...@@ -40,16 +40,22 @@
nav{ nav{
.logo{ .logo{
max-width: 250px !important; max-width: 250px !important;
img{
width: 100% !important;
}
} }
.navbar-collapse{ .navbar-collapse{
margin-left: 0px !important;
ul{ ul{
flex-direction: row !important;
li{ li{
width: 75px !important;
a{ a{
text-align: left !important; text-align: center !important;
} }
} }
.icon_box{ .icon_box{
margin-bottom: 10px !important; display: none !important;
} }
} }
} }
...@@ -140,6 +146,9 @@ h2{ ...@@ -140,6 +146,9 @@ h2{
width: 110px !important; width: 110px !important;
height: 100px !important; height: 100px !important;
} }
h4{
font-size: 18px !important;
}
} }
} }
} }
...@@ -150,6 +159,8 @@ h2{ ...@@ -150,6 +159,8 @@ h2{
} }
.rating_review_box{ .rating_review_box{
padding-top: 20px !important; padding-top: 20px !important;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{ .rating_review_box_one{
.row{ .row{
.rating_head{ .rating_head{
...@@ -175,6 +186,9 @@ h2{ ...@@ -175,6 +186,9 @@ h2{
.rating_content{ .rating_content{
font-size: 18px !important; font-size: 18px !important;
margin: 25px 15px 25px 15px !important; margin: 25px 15px 25px 15px !important;
line-height: 1.5 !important;
}
}
} }
} }
} }
......
src/styles.scss
...@@ -4,3 +4,29 @@ ...@@ -4,3 +4,29 @@
.clear{ .clear{
clear: both; clear: both;
} }
.rating_review_box{
ngx-slick-carousel{
.slick-prev{
left: -40px;
height: auto;
width: auto;
&:before{
background-color: #000;
border: 1px solid #000;
border-radius: 50%;
font-size: 30px;
}
}
.slick-next{
right: -40px;
height: auto;
width: auto;
&:before{
background-color: #000;
border: 1px solid #000;
border-radius: 50%;
font-size: 30px;
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment