Skip to content

C
Codeinfotech
Commit c5485bb4 by abraham
Options

updated

parent 46bdce61
Showing with 1198 additions and 858 deletions
src/app/body/aboutus/aboutus.component.scss
...@@ -223,6 +223,7 @@ ...@@ -223,6 +223,7 @@
} }
.container{ .container{
margin-top: 50px; margin-top: 50px;
margin-bottom: 30px;
.row{ .row{
justify-content: space-around; justify-content: space-around;
.col-md-5{ .col-md-5{
......
src/app/body/landingpage/landingpage.component.html
<div class="backgnd_grey"> <div class="landing_page">
<div class="map_overlay"> <div class="backgnd_grey">
<div class="container map_contents"> <div class="map_overlay">
<ngx-slick-carousel class="carousel" <div class="container map_contents">
#slickModal="slick-carousel" <ngx-slick-carousel class="carousel"
[config]="firstConfig"> #slickModal="slick-carousel"
<div ngxSlickItem class="slick_main"> [config]="firstConfig">
<div class="row"> <div ngxSlickItem class="slick_main">
<div class="col-md-5"> <div class="row">
<div class="left_side"> <div class="col-md-5">
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span> <div class="left_side">
is simply dummy text <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span><br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p> is simply dummy text
<div class="get_info" href="#"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
Get info <div class="get_info" href="#">
<img src="../../../assets/img/asset_white_arrow.png" alt="arrow"> Get info
<img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
</div>
</div>
</div> </div>
</div> <div class="col-md-7">
</div> <div class="right_side">
<div class="col-md-7"> <img src="../../../assets/img/asset_banner_img.png">
<div class="right_side"> </div>
<img src="../../../assets/img/asset_banner_img.png"> </div>
</div> </div>
</div>
</div> </div>
</div> <div ngxSlickItem class="slick_main">
<div ngxSlickItem class="slick_main"> <div class="row">
<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> is simply dummy text
is simply dummy text <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p> <div class="get_info" href="#">
<div class="get_info" href="#"> Get info
Get info <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
<img src="../../../assets/img/asset_white_arrow.png" alt="arrow"> </div>
</div>
</div> </div>
</div> <div class="col-md-7">
</div> <div class="right_side">
<div class="col-md-7"> <img src="../../../assets/img/asset_banner_img.png">
<div class="right_side"> </div>
<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="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>
</div> </div>
<div class="col-md-7"> <div ngxSlickItem class="slick_main">
<div class="right_side"> <div class="row">
<img src="../../../assets/img/asset_banner_img.png"> <div class="col-md-5">
</div> <div class="left_side">
</div> <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
</div> is simply dummy text
</div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
<div ngxSlickItem class="slick_main"> <div class="get_info" href="#">
<div class="row"> Get info
<div class="col-md-5"> <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
<div class="left_side"> </div>
<span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span> </div>
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> <div class="right_side">
<div class="col-md-7"> <img src="../../../assets/img/asset_banner_img.png">
<div class="right_side"> </div>
<img src="../../../assets/img/asset_banner_img.png"> </div>
</div> </div>
</div> </div>
</div> <div ngxSlickItem class="slick_main">
</div>
</ngx-slick-carousel>
</div>
</div>
</div>
<div class="our_products">
<div class="prod_overlay">
<h2><div class="prod_color">OUR</div> PRODUCTS</h2>
</div>
<hr>
<div class="container pill_margin">
<!-- Nav pills -->
<ul class="nav justify-content-center nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">All</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Web</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">App</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<div class="row"> <div class="row">
<div class="col"> <div class="col-md-5">
<div class="prod_img"> <div class="left_side">
<div class="prod_hover"> <span class="lorem">Lorem</span><span class="ipsum"> Ipsum </span>
<div class="prod_hover_overlay"> is simply dummy text
<img src="../../../assets/img/call_cab.png"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the</p>
<h6>Branding • UI/UX • Web</h6> <div class="get_info" href="#">
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> Get info
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> <img src="../../../assets/img/asset_white_arrow.png" alt="arrow">
</div> </div>
</div>
</div>
<div class="col-md-7">
<div class="right_side">
<img src="../../../assets/img/asset_banner_img.png">
</div>
</div>
</div>
</div>
</ngx-slick-carousel>
</div>
</div>
</div>
<div class="our_products">
<div class="prod_overlay">
<h2><div class="prod_color">OUR</div> PRODUCTS</h2>
</div>
<hr>
<div class="container pill_margin">
<!-- Nav pills -->
<ul class="nav justify-content-center nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">All</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Web</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">App</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<div class="row">
<div class="col">
<div class="prod_img">
<div class="prod_hover">
<div class="prod_hover_overlay">
<img src="../../../assets/img/call_cab.png">
<h6>Branding • UI/UX • Web</h6>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
</div>
</div>
<img src="../../../assets/img/asset_poster_one.png">
</div> </div>
<img src="../../../assets/img/asset_poster_one.png">
</div> </div>
<div class="col">
</div> <div class="prod_img">
<div class="col"> <div class="prod_hover">
<div class="prod_img"> <div class="prod_hover_overlay">
<div class="prod_hover"> <img src="../../../assets/img/call_cab.png">
<div class="prod_hover_overlay"> <h6>Branding • UI/UX • Web</h6>
<img src="../../../assets/img/call_cab.png"> <p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<h6>Branding • UI/UX • Web</h6> <p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> </div>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> </div>
<img src="../../../assets/img/asset_poster_two.png">
</div> </div>
</div> </div>
<img src="../../../assets/img/asset_poster_two.png"> <div class="col">
</div> <div class="prod_img">
</div> <div class="prod_hover">
<div class="col"> <div class="prod_hover_overlay">
<div class="prod_img"> <img src="../../../assets/img/call_cab.png">
<div class="prod_hover"> <h6>Branding • UI/UX • Web</h6>
<div class="prod_hover_overlay"> <p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<img src="../../../assets/img/call_cab.png"> <p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
<h6>Branding • UI/UX • Web</h6> </div>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> </div>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> <img src="../../../assets/img/asset_poster_six.png">
</div> </div>
</div> </div>
<img src="../../../assets/img/asset_poster_six.png"> </div>
</div> <div class="row">
</div> <div class="col">
</div> <div class="prod_img">
<div class="row"> <div class="prod_hover">
<div class="col"> <div class="prod_hover_overlay">
<div class="prod_img"> <img src="../../../assets/img/call_cab.png">
<div class="prod_hover"> <h6>Branding • UI/UX • Web</h6>
<div class="prod_hover_overlay"> <p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<img src="../../../assets/img/call_cab.png"> <p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
<h6>Branding • UI/UX • Web</h6> </div>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> </div>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> <img src="../../../assets/img/asset_poster_three.png">
</div> </div>
</div> </div>
<img src="../../../assets/img/asset_poster_three.png"> <div class="col">
</div> <div class="prod_img">
</div> <div class="prod_hover">
<div class="col"> <div class="prod_hover_overlay">
<div class="prod_img"> <img src="../../../assets/img/call_cab.png">
<div class="prod_hover"> <h6>Branding • UI/UX • Web</h6>
<div class="prod_hover_overlay"> <p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<img src="../../../assets/img/call_cab.png"> <p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
<h6>Branding • UI/UX • Web</h6> </div>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> </div>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> <img src="../../../assets/img/asset_poster_four.png">
</div> </div>
</div> </div>
<img src="../../../assets/img/asset_poster_four.png"> <div class="col">
</div> <div class="prod_img">
</div> <div class="prod_hover">
<div class="col"> <div class="prod_hover_overlay">
<div class="prod_img"> <img src="../../../assets/img/call_cab.png">
<div class="prod_hover"> <h6>Branding • UI/UX • Web</h6>
<div class="prod_hover_overlay"> <p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p>
<img src="../../../assets/img/call_cab.png"> <p>View More <img src="../../../assets/img/asset_white_arrow.png"></p>
<h6>Branding • UI/UX • Web</h6> </div>
<p>Call My Cab is a web application for online cab booking system. Its customer friendly website built for fast, efficient, effective, responsive way to access all the cab facilities on your finger tips.</p> </div>
<p>View More <img src="../../../assets/img/asset_white_arrow.png"></p> <img src="../../../assets/img/asset_poster_five.png">
</div> </div>
</div> </div>
<img src="../../../assets/img/asset_poster_five.png"> </div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
<div class="why_codein_overlay">
<div class="code_overlay">
<h2 class="white_head"><div class="prod_color">WHY</div> CODEINFOTEC ?</h2>
<hr>
</div>
<div class="container icon_container">
<div class="row border_bottom margin_top">
<div class="col padd_bottom">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_1.png">
</div>
<h4>Elite Author</h4>
</div>
<div class="col padd_bottom">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_2.png">
</div>
<h4>Author Level 8</h4>
</div> </div>
<div class="col padd_bottom"> <div class="why_codein_overlay">
<div class="image_icon"> <div class="code_overlay">
<img src="../../../assets/img/asset_badge_3.png"> <h2 class="white_head"><div class="prod_color">WHY</div> CODEINFOTEC ?</h2>
<hr>
</div> </div>
<h4>Exclusive Author</h4> <div class="container icon_container">
</div> <div class="row border_bottom margin_top">
<div class="col padd_bottom border_none"> <div class="col padd_bottom">
<div class="image_icon"> <div class="image_icon">
<img src="../../../assets/img/asset_badge_4.png"> <img src="../../../assets/img/asset_badge_1.png">
</div> </div>
<h4>Copyright Ninja</h4> <h4>Elite Author</h4>
</div>
</div>
<div class="row">
<div class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_5.png">
</div>
<h4>4 year of Membership</h4>
</div>
<div class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_6.png">
</div>
<h4>Collector Level 2</h4>
</div>
<div class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_7.png">
</div>
<h4>Trendsetter</h4>
</div>
<div class="col padd_top border_none">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_8.png">
</div>
<h4>& Many More</h4>
</div>
</div>
</div>
</div>
<div class="rating_review">
<div class="rating_overlay">
<h2>RATINGS AND REVIEWS</h2>
<hr>
</div>
<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="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>
<div class="clear"></div> <div class="col padd_bottom">
<div class="row rating_body"> <div class="image_icon">
<div class="rating_content"> <img src="../../../assets/img/asset_badge_2.png">
I love this application.its very easy to manage.
</div> </div>
<h4>Author Level 8</h4>
</div> </div>
</div> <div class="col padd_bottom">
<div class="rating_review_box_one"> <div class="image_icon">
<div class="row"> <img src="../../../assets/img/asset_badge_3.png">
<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>
<div class="clear"></div> <h4>Exclusive Author</h4>
<div class="row rating_body"> </div>
<div class="rating_content"> <div class="col padd_bottom border_none">
I love this application.its very easy to manage. <div class="image_icon">
<img src="../../../assets/img/asset_badge_4.png">
</div> </div>
<h4>Copyright Ninja</h4>
</div> </div>
</div> </div>
</div> <div class="row">
<div ngxSlickItem class="rating_slide"> <div class="col padd_top">
<div class="rating_review_box_one"> <div class="image_icon">
<div class="row"> <img src="../../../assets/img/asset_badge_5.png">
<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> <h4>4 year of Membership</h4>
</div> </div>
<div class="rating_review_box_one"> <div class="col padd_top">
<div class="row"> <div class="image_icon">
<div class="rating_head"> <img src="../../../assets/img/asset_badge_6.png">
<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>
<div class="clear"></div> <h4>Collector Level 2</h4>
<div class="row rating_body"> </div>
<div class="rating_content"> <div class="col padd_top">
I love this application.its very easy to manage. <div class="image_icon">
<img src="../../../assets/img/asset_badge_7.png">
</div> </div>
</div> <h4>Trendsetter</h4>
</div>
<div class="col padd_top border_none">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_8.png">
</div>
<h4>& Many More</h4>
</div> </div>
</div>
</div>
</div>
<div class="rating_review">
<div class="rating_overlay">
<h2>RATINGS AND REVIEWS</h2>
<hr>
</div> </div>
<div ngxSlickItem class="rating_slide"> <div class="rating_review_box">
<div class="rating_review_box_one"> <ngx-slick-carousel class="carousel"
<div class="row"> #slickModal="slick-carousel"
<div class="rating_head"> [config]="ratingConfig">
<div class="rating_star"> <div ngxSlickItem class="rating_slide">
<fieldset class="rating"> <div class="rating_review_box_one">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> <div class="row">
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <div class="rating_head">
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> <div class="rating_star">
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> <fieldset class="rating">
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 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="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.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="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 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="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.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="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 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>
</fieldset> <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>
<div class="for-design-quality"> <div class="clear"></div>
<div class="for_textstyle">for</div> Design Quality <div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div> </div>
<div class="kochi_taxi">by kochitaxi</div>
</div> </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 ngxSlickItem class="rating_slide">
</div> <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"> <div class="rating_star">
<div class="rating_star"> <fieldset class="rating">
<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="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="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="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="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="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="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="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="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="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>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> </fieldset>
</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>
<div class="for-design-quality"> <div class="clear"></div>
<div class="for_textstyle">for</div> Design Quality <div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div> </div>
<div class="kochi_taxi">by kochitaxi</div>
</div> </div>
</div>
</div> </div>
<div class="clear"></div> <div ngxSlickItem class="rating_slide">
<div class="row rating_body"> <div class="rating_review_box_one">
<div class="rating_content"> <div class="row">
I love this application.its very easy to manage. <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>
</div> </ngx-slick-carousel>
</div>
</div> </div>
</ngx-slick-carousel> </div>
</div> </div>
</div>
\ No newline at end of file
src/app/body/landingpage/landingpage.component.scss
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/****** Style Star Rating Widget *****/ /****** Style Star Rating Widget *****/
.landing_page{
.rating { .rating {
border: none; border: none;
float: left; float: left;
...@@ -36,196 +36,199 @@ ...@@ -36,196 +36,199 @@
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */ .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; } .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
//css for landingpage //css for landingpage
.backgnd_grey{
background-color: rgb(239,240,241); .backgnd_grey{
max-height: 1080px; background-color: rgb(239,240,241);
max-width: 1920px; max-height: 1080px;
.map_overlay{ max-width: 1920px;
background-image: url('../../../assets/img/[email protected]'); .map_overlay{
width: 100%; background-image: url('../../../assets/img/[email protected]');
background-size: 100%; width: 100%;
background-repeat: no-repeat; background-size: 100%;
.map_contents{ background-repeat: no-repeat;
padding-top: 300px; .map_contents{
padding-bottom: 250px; padding-top: 300px;
.slick_main{ padding-bottom: 250px;
.row{ .slick_main{
.col-md-5{ outline: none;
display: flex; .row{
justify-content: space-evenly; .col-md-5{
flex-direction:column; display: flex;
.left_side{ justify-content: space-evenly;
object-fit: contain; flex-direction:column;
font-family: Roboto; .left_side{
font-size: 44.5px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.16;
letter-spacing: normal;
text-align: left;
color: #404041;
.lorem{
font-size: 67.5px;
font-weight: 900;
color: #8cc342;
}
.ipsum{
font-size: 67.5px;
font-weight: 900;
}
p{
margin-top: 20px;
object-fit: contain; object-fit: contain;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 44.5px;
font-weight: 300; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
line-height: 1.81; line-height: 1.16;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: #404041; color: #404041;
} .lorem{
.get_info{ font-size: 67.5px;
width: fit-content; font-weight: 900;
background-color: rgb(92,141,24); color: #8cc342;
padding: 11px 14px 12px 18px;
object-fit: contain;
font-family: Roboto;
font-size: 24px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 0.77;
letter-spacing: normal;
text-align: left;
color: #ffffff;
img{
padding-left: 3px;
display: inline;
} }
} .ipsum{
} font-size: 67.5px;
} font-weight: 900;
.col-md-7{
.right_side{
max-width: 600px;
img{
height: 100%;
width: 100%;
}
}
}
}
}
}
}
}
.our_products{
background-color: #ffffff;
max-width: 1920px;
height: auto;
text-align: center;
margin-bottom: 100px;
.prod_overlay{
padding-top: 98px;
margin: 0 auto;
}
.pill_margin{
margin-top: 70px;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 40px 5px 40px;
color: #6e6e6e;
object-fit: contain;
font-family: Roboto;
font-size: 22px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
text-align: left;
}
.active{
background-color: #7db532;
border-radius: 0px;
color: #ffffff;
}
}
}
.tab-content{
margin-top: 50px;
.tab-pane{
.row{
.col{
padding: 5px;
.prod_img{
width: 100%;
height: 306px;
position: relative;
img{
width: 100%;
height: 100%;
}
}
.prod_hover{
position: absolute;
text-align: left;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0,0 , .8);
opacity: 0;
transition-timing-function: ease-out;
transition: 1s;
&:hover{
opacity: 1;
transition-timing-function: ease-out;
transition: 1s;
}
.prod_hover_overlay{
margin-top: 30px;
margin-left: 35px;
margin-right: 30px;
margin-bottom: 30px;
img{
width: auto;
height: 50px;
} }
h6{ p{
margin-top: 20px; margin-top: 20px;
object-fit: contain; object-fit: contain;
font-family: Roboto; font-family: Roboto;
font-size: 18px; font-size: 16px;
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
line-height: 1.28; line-height: 1.81;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: #6b6b6b; color: #404041;
} }
p{ .get_info{
margin-top: 10px; width: fit-content;
background-color: rgb(92,141,24);
padding: 11px 14px 12px 18px;
object-fit: contain; object-fit: contain;
font-family: Roboto; font-family: Roboto;
font-size: 15px; font-size: 24px;
font-weight: 300; font-weight: 900;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
line-height: 1.53; line-height: 0.77;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: #ffffff; color: #ffffff;
img{ img{
height: auto !important; padding-left: 3px;
width: 23px; display: inline;
}
}
}
}
.col-md-7{
.right_side{
max-width: 600px;
img{
height: 100%;
width: 100%;
}
}
}
}
}
}
}
}
.our_products{
background-color: #ffffff;
max-width: 1920px;
height: auto;
text-align: center;
margin-bottom: 100px;
.prod_overlay{
padding-top: 98px;
margin: 0 auto;
}
.pill_margin{
margin-top: 70px;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 40px 5px 40px;
color: #6e6e6e;
object-fit: contain;
font-family: Roboto;
font-size: 22px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
text-align: left;
}
.active{
background-color: #7db532;
border-radius: 0px;
color: #ffffff;
}
}
}
.tab-content{
margin-top: 50px;
.tab-pane{
.row{
.col{
padding: 5px;
.prod_img{
width: 100%;
height: 306px;
position: relative;
img{
width: 100%;
height: 100%;
}
}
.prod_hover{
position: absolute;
text-align: left;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0,0 , .8);
opacity: 0;
transition-timing-function: ease-out;
transition: 1s;
&:hover{
opacity: 1;
transition-timing-function: ease-out;
transition: 1s;
}
.prod_hover_overlay{
margin-top: 30px;
margin-left: 35px;
margin-right: 30px;
margin-bottom: 30px;
img{
width: auto;
height: 50px;
}
h6{
margin-top: 20px;
object-fit: contain;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: normal;
text-align: left;
color: #6b6b6b;
}
p{
margin-top: 10px;
object-fit: contain;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.53;
letter-spacing: normal;
text-align: left;
color: #ffffff;
img{
height: auto !important;
width: 23px;
}
} }
} }
} }
...@@ -235,174 +238,174 @@ ...@@ -235,174 +238,174 @@
} }
} }
} }
} h2{
h2{
display: inline;
object-fit: contain;
font-family: Roboto;
font-size: 44.5px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 1.09;
letter-spacing: normal;
text-align: left;
color: #404041;
.prod_color{
color: #67912c;
display: inline; display: inline;
object-fit: contain;
font-family: Roboto;
font-size: 44.5px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 1.09;
letter-spacing: normal;
text-align: left;
color: #404041;
.prod_color{
color: #67912c;
display: inline;
}
} }
} hr{
hr{ border: 5px solid rgb(125,181,50);
border: 5px solid rgb(125,181,50); width: 57px;
width: 57px; background-color: rgb(125,181,50);
background-color: rgb(125,181,50);
}
.white_head{
color: #ffffff;
}
.why_codein_overlay{
padding-bottom: 70px;
background-color: rgb(0, 0, 0);
overflow: auto;
text-align: center;
.code_overlay{
padding-top: 99px;
margin: 0 auto;
} }
.icon_container{ .white_head{
.border_bottom{ color: #ffffff;
border-bottom: 1px solid; }
} .why_codein_overlay{
.margin_top{ padding-bottom: 70px;
margin-top: 53px; background-color: rgb(0, 0, 0);
overflow: auto;
text-align: center;
.code_overlay{
padding-top: 99px;
margin: 0 auto;
} }
.row{ .icon_container{
.padd_top{ .border_bottom{
padding-top: 50px; border-bottom: 1px solid;
}
.padd_bottom{
padding-bottom: 50px;
} }
.border_none{ .margin_top{
border-right: none !important; margin-top: 53px;
} }
.col{ .row{
border-right: 1px solid; .padd_top{
.image_icon{ padding-top: 50px;
width: 74px; }
height: 84px; .padd_bottom{
margin: 0 auto; padding-bottom: 50px;
img{
width: 100%;
height: 100%;
}
} }
h4{ .border_none{
object-fit: contain; border-right: none !important;
font-family: 'Roboto'; }
font-size: 27px; .col{
font-weight: normal; border-right: 1px solid;
margin-top: 27px; .image_icon{
font-style: normal; width: 74px;
font-stretch: normal; height: 77px;
line-height: 1.45; margin: 0 auto;
letter-spacing: normal; img{
text-align: center; width: 100%;
color: #ffffff; height: 100%;
}
}
h4{
object-fit: contain;
font-family: 'Roboto';
font-size: 27px;
font-weight: normal;
margin-top: 27px;
font-style: normal;
font-stretch: normal;
line-height: 1.45;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
} }
} }
} }
} }
} .rating_review{
.rating_review{ background-color: #ffffff;
background-color: #ffffff; text-align: center;
text-align: center; .rating_overlay{
.rating_overlay{ padding-top: 73px;
padding-top: 73px; h2{
h2{ color: #3c3c3b !important;
color: #3c3c3b !important; }
} }
} .rating_review_box{
.rating_review_box{ max-width: 980px;
max-width: 980px; margin: 0 auto;
margin: 0 auto; margin-bottom: 75px;
margin-bottom: 75px; padding-top: 36px;
padding-top: 36px; ngx-slick-carousel{
ngx-slick-carousel{ .rating_slide{
.rating_slide{ .rating_review_box_one{
.rating_review_box_one{ margin: 23px 16px 24px 16px;
margin: 23px 16px 24px 16px; .row{
.row{
width: 100%;
margin-left: 0px;
margin-right: 0px;
.rating_head{
background-color: rgb(225, 225, 225);
width: 100%; width: 100%;
text-align: left; margin-left: 0px;
.rating_star{ margin-right: 0px;
margin: 0px 23px 0px 20px; .rating_head{
display: inline-block; background-color: rgb(225, 225, 225);
label{ width: 100%;
margin-bottom: 0px; text-align: left;
.rating_star{
margin: 0px 23px 0px 20px;
display: inline-block;
label{
margin-bottom: 0px;
}
img{
width: 100%;
}
} }
img{ .for-design-quality{
width: 100%; display: inline-block;
padding: 5px 0px 0px 0px;
vertical-align: top;
object-fit: contain;
font-family: Roboto;
font-size: 21px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
text-align: left;
color: #696969;
.for_textstyle{
font-weight: normal;
display: inline;
}
} }
} .kochi_taxi{
.for-design-quality{ padding: 5px 33px 0px 0px;
display: inline-block; vertical-align: top;
padding: 5px 0px 0px 0px; float: right;
vertical-align: top; object-fit: contain;
object-fit: contain; font-family: Roboto;
font-family: Roboto; font-size: 21px;
font-size: 21px; font-weight: 500;
font-weight: bold; font-style: normal;
font-style: normal; font-stretch: normal;
font-stretch: normal; letter-spacing: normal;
letter-spacing: normal; text-align: left;
text-align: left; color: #656565;
color: #696969;
.for_textstyle{
font-weight: normal;
display: inline;
} }
} }
.kochi_taxi{ }
padding: 5px 33px 0px 0px; .rating_body{
vertical-align: top; border: 2px solid rgb(225, 225, 225);
float: right; .rating_content{
object-fit: contain; object-fit: contain;
font-family: Roboto; font-family: Roboto;
font-size: 21px; font-size: 21px;
font-weight: 500; font-weight: normal;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
line-height: 0.83;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: #656565; color: #656565;
margin: 48px 0px 40px 30px;
} }
} }
} }
.rating_body{
border: 2px solid rgb(225, 225, 225);
.rating_content{
object-fit: contain;
font-family: Roboto;
font-size: 21px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 0.83;
letter-spacing: normal;
text-align: left;
color: #656565;
margin: 48px 0px 40px 30px;
}
}
} }
} }
} }
} }
} }
\ No newline at end of file
src/app/body/landingpage/landingpage.component.ts
...@@ -11,6 +11,6 @@ export class LandingpageComponent implements OnInit { ...@@ -11,6 +11,6 @@ export class LandingpageComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
firstConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": false,"dots":true,"autoplay":true,"autoplaySpeed":2000}; firstConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": false,"dots":true,"autoplay":false,"autoplaySpeed":2000};
ratingConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": true,"autoplay":true,"autoplaySpeed":2000,responsive:[{breakpoint:480,settings:{arrows:false}}]}; ratingConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": true,"autoplay":false,"autoplaySpeed":2000,responsive:[{breakpoint:480,settings:{arrows:false}}]};
} }
src/assets/responsive.scss
...@@ -61,68 +61,76 @@ nav{ ...@@ -61,68 +61,76 @@ nav{
} }
} }
// landing page scss // landing page scss
.backgnd_grey{ .landing_page{
.map_overlay{ .backgnd_grey{
.map_contents{ .map_overlay{
padding-top: 100px !important; .map_contents{
padding-bottom: 50px !important; padding-top: 100px !important;
.row{ padding-bottom: 50px !important;
.col-md-5{ .row{
.left_side{ .col-md-5{
font-size: 28px !important; padding-bottom: 20px !important;
.lorem{ .left_side{
font-size: 50px !important; font-size: 28px !important;
} .lorem{
.ipsum{ font-size: 50px !important;
font-size: 50px !important; }
.ipsum{
font-size: 50px !important;
}
.get_info{
margin-left: 1px !important;
}
} }
} }
} .col-md-7{
.col-md-7{ .right_side{
.right_side{ max-width: 400px !important;
max-width: 400px !important; margin-left: 1px !important;
margin-right: 1px !important;
}
} }
} }
} }
} }
} }
} .our_products{
.our_products{ margin-bottom: 50px !important;
margin-bottom: 50px !important; .prod_overlay{
.prod_overlay{ padding-top: 40px !important;
padding-top: 40px !important; }
} .pill_margin{
.pill_margin{ margin-top: 40px !important;
margin-top: 40px !important; }
} .container{
.container{ .nav-pills{
.nav-pills{ .nav-item{
.nav-item{ .nav-link{
.nav-link{ padding: 5px 25px 5px 25px !important;
padding: 5px 25px 5px 25px !important; }
} }
} }
} .tab-content{
.tab-content{ .tab-pane{
.tab-pane{ .row{
.row{ .col{
.col{ display: contents !important;
display: contents !important; .prod_img{
.prod_img{ height: 300px !important;
height: 300px !important; padding-top: 10px !important;
padding-top: 10px !important; }
} .prod_hover{
.prod_hover{ .prod_hover_overlay{
.prod_hover_overlay{ margin: 20px 20px 20px 20px !important;
margin: 20px 20px 20px 20px !important; img{
img{ height: 50px !important;
height: 50px !important; }
} h6{
h6{ margin-top: 0px !important;
margin-top: 0px !important; }
} p{
p{ margin-top: 0px !important;
margin-top: 0px !important; }
} }
} }
} }
...@@ -131,62 +139,62 @@ nav{ ...@@ -131,62 +139,62 @@ nav{
} }
} }
} }
} h2{
h2{ font-size: 35px !important;
font-size: 35px !important;
}
.why_codein_overlay{
.code_overlay{
padding-top: 40px !important;
} }
.icon_container{ .why_codein_overlay{
.row{ .code_overlay{
.col{ padding-top: 40px !important;
.image_icon{ }
width: 110px !important; .icon_container{
height: 100px !important; .row{
} .col{
h4{ .image_icon{
font-size: 18px !important; width: 110px !important;
height: 100px !important;
}
h4{
font-size: 18px !important;
}
} }
} }
} }
} }
} .rating_review{
.rating_review{ .rating_overlay{
.rating_overlay{ padding-top: 40px !important;
padding-top: 40px !important; }
} .rating_review_box{
.rating_review_box{ padding-top: 20px !important;
padding-top: 20px !important; ngx-slick-carousel{
ngx-slick-carousel{ .rating_slide{
.rating_slide{ .rating_review_box_one{
.rating_review_box_one{ .row{
.row{ .rating_head{
.rating_head{ .rating_star{
.rating_star{ margin: 0px 0px 0px 4px !important;
margin: 0px 0px 0px 4px !important; line-height: 1.5 !important;
line-height: 1.5 !important; }
.for-design-quality{
padding: 5px 16px 0px 0px !important;
float: right !important;
font-size: 19px !important;
line-height: 1.5 !important;
}
.kochi_taxi{
padding: 0px 0px 0px 0px !important;
font-size: 19px !important;
text-align: center !important;
float: none !important;
}
} }
.for-design-quality{ }
padding: 5px 16px 0px 0px !important; .rating_body{
float: right !important; .rating_content{
font-size: 19px !important; font-size: 18px !important;
margin: 25px 15px 25px 15px !important;
line-height: 1.5 !important; line-height: 1.5 !important;
} }
.kochi_taxi{
padding: 0px 0px 0px 0px !important;
font-size: 19px !important;
text-align: center !important;
float: none !important;
}
}
}
.rating_body{
.rating_content{
font-size: 18px !important;
margin: 25px 15px 25px 15px !important;
line-height: 1.5 !important;
} }
} }
} }
...@@ -194,9 +202,11 @@ h2{ ...@@ -194,9 +202,11 @@ h2{
} }
} }
} }
//scss for aboutus //scss for aboutus
.about{ .about{
padding-top: 50px !important; padding-top: 50px !important;
margin-bottom: 0px !important;
.map_overlay{ .map_overlay{
padding-left: 10px !important; padding-left: 10px !important;
padding-right: 10px !important; padding-right: 10px !important;
...@@ -209,6 +219,24 @@ h2{ ...@@ -209,6 +219,24 @@ h2{
} }
} }
} }
.our_process{
.our_process_bg{
.container{
.row{
.col{
.our_process_img{
margin-right: 20px !important;
}
.our_process_contents{
.process_line{
left: -61px !important;
}
}
}
}
}
}
}
.anim_background{ .anim_background{
.anim_background_overlay{ .anim_background_overlay{
.container{ .container{
...@@ -358,36 +386,66 @@ h2{ ...@@ -358,36 +386,66 @@ h2{
margin-left: 0px !important; margin-left: 0px !important;
} }
} }
//scss for landing //scss for aboutus
.backgnd_grey{ .anim_background{
.map_overlay{ .anim_background_overlay{
.map_contents{ .container{
padding-top: 180px !important; .row{
padding-bottom: 150px !important; padding-top: 70px !important;
padding-bottom: 70px !important;
.col-md-3{
h3{
font-size: 55px !important;
}
h5{
font-size: 20px !important;
}
}
}
} }
} }
} }
.our_products{ //scss for landing
.container{ .landing_page{
.tab-content{ .backgnd_grey{
.tab-pane{ .map_overlay{
.row{ .map_contents{
.col{ padding-top: 180px !important;
padding: 8px !important; padding-bottom: 150px !important;
.prod_img{ .slick_main{
width: 680px !important; .row{
height: 100% !important; .col-md-5{
.get_info{
margin-left: 1px !important;
}
} }
.prod_hover{ }
.prod_hover_overlay{ }
img{ }
height: 60px !important; }
} }
h6{ .our_products{
font-size: 32px !important; .container{
} .tab-content{
p{ .tab-pane{
font-size: 18px !important; .row{
.col{
padding: 8px !important;
.prod_img{
width: 680px !important;
height: 100% !important;
}
.prod_hover{
.prod_hover_overlay{
img{
height: 60px !important;
}
h6{
font-size: 32px !important;
}
p{
font-size: 18px !important;
}
} }
} }
} }
...@@ -395,8 +453,9 @@ h2{ ...@@ -395,8 +453,9 @@ h2{
} }
} }
} }
} }
} }
.foot-codeinfo{ .foot-codeinfo{
.col-md-4{ .col-md-4{
...@@ -477,10 +536,260 @@ h2{ ...@@ -477,10 +536,260 @@ h2{
} }
@media only screen and (min-width: 1250px) and (max-device-width: 1359px) { @media only screen and (min-width: 1250px) and (max-device-width: 1359px) {
//scss for navbar
nav{
.navbar-collapse{
ul{
.icon_box{
height: 35px !important;
width: 35px !important;
.icon_facebook{
margin: 5px !important;
}
.icon_twitter{
margin: 4px !important;
}
.icon_google{
margin: 5px !important;
}
}
}
}
}
//scss for aboutus.html
.anim_background{
.anim_background_overlay{
.container{
.row{
padding-top: 70px !important;
padding-bottom: 70px !important;
.col-md-3{
h3{
font-size: 55px !important;
}
}
}
}
}
}
//scss for landingpage.html
.landing_page{
h2{
font-size: 38px !important;
}
hr{
border: 3px solid rgb(125,181,50) !important;
width: 40px !important;
}
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 180px !important;
padding-bottom: 125px !important;
.slick_main{
.row{
.col-md-7{
.right_side{
max-width: 480px !important;
margin: 0 auto !important;
}
}
.col-md-5{
.left_side{
font-size: 35px !important;
p{
margin-top: 10px !important;
}
.lorem{
font-size: 50px !important;
}
.ipsum{
font-size: 50px !important;
}
.get_info{
font-size: 20px !important;
font-weight: 700 !important;
}
}
}
}
}
ngx-slick-carousel{
.slick-dots{
li{
margin: 0px 0px !important;
button{
&::before{
font-size: 8px !important;
}
}
}
}
}
}
}
}
.our_products{
margin-bottom: 40px !important;
.prod_overlay{
padding-top: 50px !important;
}
.pill_margin{
margin-top: 40px !important;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 20px 5px 20px !important;
font-size: 16px !important;
}
}
}
}
}
.why_codein_overlay{
.icon_container{
.row{
.col{
h4{
font-size: 24px !important;
}
}
}
}
}
}
} }
@media only screen and (min-width: 1360px) and (max-device-width: 1399px) { @media only screen and (min-width: 1360px) and (max-device-width: 1399px) {
//scss for landingpage.html
.landing_page{
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 180px !important;
padding-bottom: 130px !important;
.slick_main{
.row{
.col-md-7{
.right_side{
max-width: 480px !important;
margin: 0 auto !important;
}
}
.col-md-5{
.left_side{
font-size: 35px !important;
p{
margin-top: 10px !important;
}
.lorem{
font-size: 50px !important;
}
.ipsum{
font-size: 50px !important;
}
.get_info{
font-size: 20px !important;
font-weight: 700 !important;
}
}
}
}
}
ngx-slick-carousel{
.slick-dots{
li{
margin: 0px 0px !important;
button{
&::before{
font-size: 8px !important;
}
}
}
}
}
}
}
}
h2{
font-size: 38px !important;
}
hr{
border: 3px solid rgb(125,181,50) !important;
}
.our_products{
margin-bottom: 40px !important;
.prod_overlay{
padding-top: 50px !important;
}
.pill_margin{
margin-top: 40px !important;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 20px 5px 20px !important;
font-size: 16px !important;
}
}
}
}
}
.why_codein_overlay{
.icon_container{
.row{
.col{
h4{
font-size: 24px !important;
}
}
}
}
}
.rating_review{
.rating_review_box{
max-width: 700px !important;
}
}
}
//scss for aboutus.html
.anim_background{
.anim_background_overlay{
.container{
.row{
.col-md-3{
h3{
font-size: 48px !important;
}
}
}
}
}
}
//scss for navbar
nav{
.navbar-collapse{
ul{
.icon_box{
height: 35px !important;
width: 35px !important;
.icon_facebook{
margin: 5px !important;
}
.icon_twitter{
margin: 4px !important;
}
.icon_google{
margin: 5px !important;
}
}
}
}
}
} }
@media only screen and (min-width: 1400px) and (max-device-width: 1600px) { @media only screen and (min-width: 1400px) and (max-device-width: 1600px) {
......
src/styles.scss
...@@ -28,5 +28,31 @@ ...@@ -28,5 +28,31 @@
font-size: 30px; font-size: 30px;
} }
} }
.slick-list{
.slick-track{
.rating_slide{
outline: none;
}
}
}
}
}
//scss for slick_main
.backgnd_grey{
.map_overlay{
.map_contents{
ngx-slick-carousel{
.slick-dots{
li{
margin: 0px 0px ;
button{
&::before{
font-size: 10px;
}
}
}
}
}
}
} }
} }
\ 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