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 @@
}
.container{
margin-top: 50px;
margin-bottom: 30px;
.row{
justify-content: space-around;
.col-md-5{
......
src/app/body/landingpage/landingpage.component.html
<div class="backgnd_grey">
<div class="map_overlay">
<div class="container map_contents">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="firstConfig">
<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 class="landing_page">
<div class="backgnd_grey">
<div class="map_overlay">
<div class="container map_contents">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="firstConfig">
<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><br>
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 class="col-md-7">
<div class="right_side">
<img src="../../../assets/img/asset_banner_img.png">
</div>
</div>
<div class="col-md-7">
<div class="right_side">
<img src="../../../assets/img/asset_banner_img.png">
</div>
</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 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 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="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 class="col-md-7">
<div class="right_side">
<img src="../../../assets/img/asset_banner_img.png">
</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>
<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 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 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="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">
<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 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>
</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>
<img src="../../../assets/img/asset_poster_one.png">
</div>
</div>
<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 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_two.png">
</div>
</div>
<img src="../../../assets/img/asset_poster_two.png">
</div>
</div>
<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 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_six.png">
</div>
</div>
<img src="../../../assets/img/asset_poster_six.png">
</div>
</div>
</div>
<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 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_three.png">
</div>
</div>
<img src="../../../assets/img/asset_poster_three.png">
</div>
</div>
<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 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_four.png">
</div>
</div>
<img src="../../../assets/img/asset_poster_four.png">
</div>
</div>
<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 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_five.png">
</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 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 class="col padd_bottom">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_3.png">
<div class="why_codein_overlay">
<div class="code_overlay">
<h2 class="white_head"><div class="prod_color">WHY</div> CODEINFOTEC ?</h2>
<hr>
</div>
<h4>Exclusive Author</h4>
</div>
<div class="col padd_bottom border_none">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_4.png">
</div>
<h4>Copyright Ninja</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 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="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
<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="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 class="col padd_bottom">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_3.png">
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
<h4>Exclusive Author</h4>
</div>
<div class="col padd_bottom border_none">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_4.png">
</div>
<h4>Copyright Ninja</h4>
</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 class="row">
<div class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_5.png">
</div>
</div>
<h4>4 year of Membership</h4>
</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 class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_6.png">
</div>
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
<h4>Collector Level 2</h4>
</div>
<div class="col padd_top">
<div class="image_icon">
<img src="../../../assets/img/asset_badge_7.png">
</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 class="rating_review">
<div class="rating_overlay">
<h2>RATINGS AND REVIEWS</h2>
<hr>
</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 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 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="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</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 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 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="for-design-quality">
<div class="for_textstyle">for</div> Design Quality
<div class="clear"></div>
<div class="row rating_body">
<div class="rating_content">
I love this application.its very easy to manage.
</div>
<div class="kochi_taxi">by kochitaxi</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 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>
</div>
</ngx-slick-carousel>
</div>
</ngx-slick-carousel>
</div>
</div>
\ No newline at end of file
</div>
</div>
src/app/body/landingpage/landingpage.component.scss
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/****** Style Star Rating Widget *****/
.landing_page{
.rating {
border: none;
float: left;
......@@ -36,196 +36,199 @@
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
//css for landingpage
.backgnd_grey{
background-color: rgb(239,240,241);
max-height: 1080px;
max-width: 1920px;
.map_overlay{
background-image: url('../../../assets/img/[email protected]');
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
.map_contents{
padding-top: 300px;
padding-bottom: 250px;
.slick_main{
.row{
.col-md-5{
display: flex;
justify-content: space-evenly;
flex-direction:column;
.left_side{
object-fit: contain;
font-family: Roboto;
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;
.backgnd_grey{
background-color: rgb(239,240,241);
max-height: 1080px;
max-width: 1920px;
.map_overlay{
background-image: url('../../../assets/img/[email protected]');
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
.map_contents{
padding-top: 300px;
padding-bottom: 250px;
.slick_main{
outline: none;
.row{
.col-md-5{
display: flex;
justify-content: space-evenly;
flex-direction:column;
.left_side{
object-fit: contain;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
font-size: 44.5px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.81;
line-height: 1.16;
letter-spacing: normal;
text-align: left;
color: #404041;
}
.get_info{
width: fit-content;
background-color: rgb(92,141,24);
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;
.lorem{
font-size: 67.5px;
font-weight: 900;
color: #8cc342;
}
}
}
}
.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;
.ipsum{
font-size: 67.5px;
font-weight: 900;
}
h6{
p{
margin-top: 20px;
object-fit: contain;
font-family: Roboto;
font-size: 18px;
font-size: 16px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
line-height: 1.81;
letter-spacing: normal;
text-align: left;
color: #6b6b6b;
color: #404041;
}
p{
margin-top: 10px;
.get_info{
width: fit-content;
background-color: rgb(92,141,24);
padding: 11px 14px 12px 18px;
object-fit: contain;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
font-size: 24px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: 1.53;
line-height: 0.77;
letter-spacing: normal;
text-align: left;
color: #ffffff;
img{
height: auto !important;
width: 23px;
padding-left: 3px;
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 @@
}
}
}
}
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;
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;
}
}
}
hr{
border: 5px solid rgb(125,181,50);
width: 57px;
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;
hr{
border: 5px solid rgb(125,181,50);
width: 57px;
background-color: rgb(125,181,50);
}
.icon_container{
.border_bottom{
border-bottom: 1px solid;
}
.margin_top{
margin-top: 53px;
.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;
}
.row{
.padd_top{
padding-top: 50px;
}
.padd_bottom{
padding-bottom: 50px;
.icon_container{
.border_bottom{
border-bottom: 1px solid;
}
.border_none{
border-right: none !important;
.margin_top{
margin-top: 53px;
}
.col{
border-right: 1px solid;
.image_icon{
width: 74px;
height: 84px;
margin: 0 auto;
img{
width: 100%;
height: 100%;
}
.row{
.padd_top{
padding-top: 50px;
}
.padd_bottom{
padding-bottom: 50px;
}
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;
.border_none{
border-right: none !important;
}
.col{
border-right: 1px solid;
.image_icon{
width: 74px;
height: 77px;
margin: 0 auto;
img{
width: 100%;
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{
background-color: #ffffff;
text-align: center;
.rating_overlay{
padding-top: 73px;
h2{
color: #3c3c3b !important;
.rating_review{
background-color: #ffffff;
text-align: center;
.rating_overlay{
padding-top: 73px;
h2{
color: #3c3c3b !important;
}
}
}
.rating_review_box{
max-width: 980px;
margin: 0 auto;
margin-bottom: 75px;
padding-top: 36px;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{
margin: 23px 16px 24px 16px;
.row{
width: 100%;
margin-left: 0px;
margin-right: 0px;
.rating_head{
background-color: rgb(225, 225, 225);
.rating_review_box{
max-width: 980px;
margin: 0 auto;
margin-bottom: 75px;
padding-top: 36px;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{
margin: 23px 16px 24px 16px;
.row{
width: 100%;
text-align: left;
.rating_star{
margin: 0px 23px 0px 20px;
display: inline-block;
label{
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
.rating_head{
background-color: rgb(225, 225, 225);
width: 100%;
text-align: left;
.rating_star{
margin: 0px 23px 0px 20px;
display: inline-block;
label{
margin-bottom: 0px;
}
img{
width: 100%;
}
}
img{
width: 100%;
.for-design-quality{
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;
}
}
}
.for-design-quality{
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{
padding: 5px 33px 0px 0px;
vertical-align: top;
float: right;
object-fit: contain;
font-family: Roboto;
font-size: 21px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
text-align: left;
color: #656565;
}
}
.kochi_taxi{
padding: 5px 33px 0px 0px;
vertical-align: top;
float: right;
}
.rating_body{
border: 2px solid rgb(225, 225, 225);
.rating_content{
object-fit: contain;
font-family: Roboto;
font-size: 21px;
font-weight: 500;
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;
}
}
}
.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 {
ngOnInit() {
}
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}}]};
firstConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrows": false,"dots":true,"autoplay":false,"autoplaySpeed":2000};
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{
}
}
// landing page scss
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 100px !important;
padding-bottom: 50px !important;
.row{
.col-md-5{
.left_side{
font-size: 28px !important;
.lorem{
font-size: 50px !important;
}
.ipsum{
font-size: 50px !important;
.landing_page{
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 100px !important;
padding-bottom: 50px !important;
.row{
.col-md-5{
padding-bottom: 20px !important;
.left_side{
font-size: 28px !important;
.lorem{
font-size: 50px !important;
}
.ipsum{
font-size: 50px !important;
}
.get_info{
margin-left: 1px !important;
}
}
}
}
.col-md-7{
.right_side{
max-width: 400px !important;
.col-md-7{
.right_side{
max-width: 400px !important;
margin-left: 1px !important;
margin-right: 1px !important;
}
}
}
}
}
}
}
.our_products{
margin-bottom: 50px !important;
.prod_overlay{
padding-top: 40px !important;
}
.pill_margin{
margin-top: 40px !important;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 25px 5px 25px !important;
.our_products{
margin-bottom: 50px !important;
.prod_overlay{
padding-top: 40px !important;
}
.pill_margin{
margin-top: 40px !important;
}
.container{
.nav-pills{
.nav-item{
.nav-link{
padding: 5px 25px 5px 25px !important;
}
}
}
}
.tab-content{
.tab-pane{
.row{
.col{
display: contents !important;
.prod_img{
height: 300px !important;
padding-top: 10px !important;
}
.prod_hover{
.prod_hover_overlay{
margin: 20px 20px 20px 20px !important;
img{
height: 50px !important;
}
h6{
margin-top: 0px !important;
}
p{
margin-top: 0px !important;
.tab-content{
.tab-pane{
.row{
.col{
display: contents !important;
.prod_img{
height: 300px !important;
padding-top: 10px !important;
}
.prod_hover{
.prod_hover_overlay{
margin: 20px 20px 20px 20px !important;
img{
height: 50px !important;
}
h6{
margin-top: 0px !important;
}
p{
margin-top: 0px !important;
}
}
}
}
......@@ -131,62 +139,62 @@ nav{
}
}
}
}
h2{
font-size: 35px !important;
}
.why_codein_overlay{
.code_overlay{
padding-top: 40px !important;
h2{
font-size: 35px !important;
}
.icon_container{
.row{
.col{
.image_icon{
width: 110px !important;
height: 100px !important;
}
h4{
font-size: 18px !important;
.why_codein_overlay{
.code_overlay{
padding-top: 40px !important;
}
.icon_container{
.row{
.col{
.image_icon{
width: 110px !important;
height: 100px !important;
}
h4{
font-size: 18px !important;
}
}
}
}
}
}
.rating_review{
.rating_overlay{
padding-top: 40px !important;
}
.rating_review_box{
padding-top: 20px !important;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{
.row{
.rating_head{
.rating_star{
margin: 0px 0px 0px 4px !important;
line-height: 1.5 !important;
.rating_review{
.rating_overlay{
padding-top: 40px !important;
}
.rating_review_box{
padding-top: 20px !important;
ngx-slick-carousel{
.rating_slide{
.rating_review_box_one{
.row{
.rating_head{
.rating_star{
margin: 0px 0px 0px 4px !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;
float: right !important;
font-size: 19px !important;
}
.rating_body{
.rating_content{
font-size: 18px !important;
margin: 25px 15px 25px 15px !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{
}
}
}
//scss for aboutus
.about{
padding-top: 50px !important;
margin-bottom: 0px !important;
.map_overlay{
padding-left: 10px !important;
padding-right: 10px !important;
......@@ -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_overlay{
.container{
......@@ -358,36 +386,66 @@ h2{
margin-left: 0px !important;
}
}
//scss for landing
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 180px !important;
padding-bottom: 150px !important;
//scss for aboutus
.anim_background{
.anim_background_overlay{
.container{
.row{
padding-top: 70px !important;
padding-bottom: 70px !important;
.col-md-3{
h3{
font-size: 55px !important;
}
h5{
font-size: 20px !important;
}
}
}
}
}
}
.our_products{
.container{
.tab-content{
.tab-pane{
.row{
.col{
padding: 8px !important;
.prod_img{
width: 680px !important;
height: 100% !important;
//scss for landing
.landing_page{
.backgnd_grey{
.map_overlay{
.map_contents{
padding-top: 180px !important;
padding-bottom: 150px !important;
.slick_main{
.row{
.col-md-5{
.get_info{
margin-left: 1px !important;
}
}
.prod_hover{
.prod_hover_overlay{
img{
height: 60px !important;
}
h6{
font-size: 32px !important;
}
p{
font-size: 18px !important;
}
}
}
}
}
.our_products{
.container{
.tab-content{
.tab-pane{
.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{
}
}
}
}
}
}
}
.foot-codeinfo{
.col-md-4{
......@@ -477,10 +536,260 @@ h2{
}
@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) {
//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) {
......
src/styles.scss
......@@ -28,5 +28,31 @@
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