Skip to content

C
Codeinfotech
Commit c5485bb4 by abraham
Options

updated

parent 46bdce61
Showing with 388 additions and 47 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="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">
#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>
<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="#">
......@@ -23,8 +24,8 @@
</div>
</div>
</div>
</div>
<div ngxSlickItem class="slick_main">
</div>
<div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5">
<div class="left_side">
......@@ -43,8 +44,8 @@
</div>
</div>
</div>
</div>
<div ngxSlickItem class="slick_main">
</div>
<div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5">
<div class="left_side">
......@@ -63,8 +64,8 @@
</div>
</div>
</div>
</div>
<div ngxSlickItem class="slick_main">
</div>
<div ngxSlickItem class="slick_main">
<div class="row">
<div class="col-md-5">
<div class="left_side">
......@@ -83,12 +84,12 @@
</div>
</div>
</div>
</div>
</ngx-slick-carousel>
</div>
</ngx-slick-carousel>
</div>
</div>
<div class="our_products">
</div>
</div>
<div class="our_products">
<div class="prod_overlay">
<h2><div class="prod_color">OUR</div> PRODUCTS</h2>
</div>
......@@ -204,8 +205,8 @@
</div>
</div>
</div>
</div>
<div class="why_codein_overlay">
</div>
<div class="why_codein_overlay">
<div class="code_overlay">
<h2 class="white_head"><div class="prod_color">WHY</div> CODEINFOTEC ?</h2>
<hr>
......@@ -264,8 +265,8 @@
</div>
</div>
</div>
</div>
<div class="rating_review">
</div>
<div class="rating_review">
<div class="rating_overlay">
<h2>RATINGS AND REVIEWS</h2>
<hr>
......@@ -462,4 +463,5 @@
</div>
</ngx-slick-carousel>
</div>
</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,7 +36,8 @@
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
//css for landingpage
.backgnd_grey{
.backgnd_grey{
background-color: rgb(239,240,241);
max-height: 1080px;
max-width: 1920px;
......@@ -49,6 +50,7 @@
padding-top: 300px;
padding-bottom: 250px;
.slick_main{
outline: none;
.row{
.col-md-5{
display: flex;
......@@ -122,8 +124,8 @@
}
}
}
}
.our_products{
}
.our_products{
background-color: #ffffff;
max-width: 1920px;
height: auto;
......@@ -235,8 +237,8 @@
}
}
}
}
h2{
}
h2{
display: inline;
object-fit: contain;
font-family: Roboto;
......@@ -252,16 +254,16 @@ h2{
color: #67912c;
display: inline;
}
}
hr{
}
hr{
border: 5px solid rgb(125,181,50);
width: 57px;
background-color: rgb(125,181,50);
}
.white_head{
}
.white_head{
color: #ffffff;
}
.why_codein_overlay{
}
.why_codein_overlay{
padding-bottom: 70px;
background-color: rgb(0, 0, 0);
overflow: auto;
......@@ -291,7 +293,7 @@ hr{
border-right: 1px solid;
.image_icon{
width: 74px;
height: 84px;
height: 77px;
margin: 0 auto;
img{
width: 100%;
......@@ -314,8 +316,8 @@ hr{
}
}
}
}
.rating_review{
}
.rating_review{
background-color: #ffffff;
text-align: center;
.rating_overlay{
......@@ -405,4 +407,5 @@ hr{
}
}
}
}
\ 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,13 +61,15 @@ nav{
}
}
// landing page scss
.backgnd_grey{
.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{
......@@ -76,18 +78,23 @@ nav{
.ipsum{
font-size: 50px !important;
}
.get_info{
margin-left: 1px !important;
}
}
}
.col-md-7{
.right_side{
max-width: 400px !important;
margin-left: 1px !important;
margin-right: 1px !important;
}
}
}
}
}
}
.our_products{
}
.our_products{
margin-bottom: 50px !important;
.prod_overlay{
padding-top: 40px !important;
......@@ -131,11 +138,11 @@ nav{
}
}
}
}
h2{
}
h2{
font-size: 35px !important;
}
.why_codein_overlay{
}
.why_codein_overlay{
.code_overlay{
padding-top: 40px !important;
}
......@@ -152,8 +159,8 @@ h2{
}
}
}
}
.rating_review{
}
.rating_review{
.rating_overlay{
padding-top: 40px !important;
}
......@@ -193,10 +200,13 @@ 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,12 +386,41 @@ h2{
margin-left: 0px !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;
}
}
}
}
}
}
//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;
}
}
}
}
}
}
}
......@@ -397,6 +454,8 @@ 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