Skip to content

A
ati
Commit c9d7595b by amalk
Options

27-09-2019

parent 569642f4
Showing with 134 additions and 165 deletions
src/app/home/carousel/carousel.scss
...@@ -3,9 +3,6 @@ ...@@ -3,9 +3,6 @@
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
li {
width: auto;
}
} }
} }
......
src/app/home/destination/destination.component.html
<div class="destination_slider"> <div class="destination_slider">
<!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)"> <carousel>
<div ngxSlickItem class="slide"> <ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="inner_slider"> <div class="inner_slider">
<div class="inner_overlay"> <div class="inner_overlay">
<h4>Paris</h4> <h4>{{item.place}}</h4>
<h6> <h6>
<strong> <strong>
Starting from Starting from
</strong> <br>$ 245 </strong> <br>${{item.price}}
</h6> </h6>
</div> </div>
<img src="../../../assets/destination/paris.png"> <img src={{item.image}}>
</div> </div>
</div> </ng-container>
<div ngxSlickItem class="slide"> </ng-container>
<div class="inner_slider"> </carousel>
<div class="inner_overlay">
<h4>Dubai</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 375
</h6>
</div>
<img src="../../../assets/destination/dubai.png">
</div>
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="inner_overlay">
<h4>Paris</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 245
</h6>
</div>
<img src="../../../assets/destination/paris.png">
</div>
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="inner_overlay">
<h4>Dubai</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 375
</h6>
</div>
<img src="../../../assets/destination/dubai.png">
</div>
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="inner_overlay">
<h4>Paris</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 245
</h6>
</div>
<img src="../../../assets/destination/paris.png">
</div>
</div>
<div ngxSlickItem class="slide">
<div class="inner_slider">
<div class="inner_overlay">
<h4>Dubai</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 375
</h6>
</div>
<img src="../../../assets/destination/dubai.png">
</div>
</div>
</ngx-slick> -->
</div> </div>
\ No newline at end of file
src/app/home/destination/destination.component.scss
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
.inner_slider { .inner_slider {
position: relative; position: relative;
border-radius: 10px; border-radius: 10px;
height: 180px;
width: 150px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/app/home/destination/destination.component.ts
...@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
}) })
export class DestinationComponent implements OnInit { export class DestinationComponent implements OnInit {
items: any;
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
this.items = [
{ place: 'Paris', price: '213', image:"../../../assets/destination/paris.png"},
{ place: 'Dubai', price: '521', image: "../../../assets/destination/dubai.png" },
{ place: 'Dummy one', price: '121', image: "../../../assets/destination/paris.png" },
{ place: 'Dummy two', price: '75', image: "../../../assets/destination/dubai.png" },
{ place: 'Dummy three', price: '857', image: "../../../assets/destination/paris.png" },
{ place: 'Dummy four', price: '263', image: "../../../assets/destination/dubai.png" },
{ place: 'Dummy five', price: '145', image: "../../../assets/destination/paris.png" },
{ place: 'Dummy six', price: '1252', image: "../../../assets/destination/dubai.png" },
]
} }
......
src/app/home/index/index.component.html
<ati-navbar></ati-navbar> <ati-navbar></ati-navbar>
<div class="ati_main_wrapper"> <div class="ati_main_wrapper">
<ati-mainmenu></ati-mainmenu> <ati-mainmenu></ati-mainmenu>
<h4> <h4 fxLayout="row" fxLayoutAlign="space-between center">
<div class="width50"> <div>
<span class="head">Exclusive Deals</span> <span class="head">Exclusive Deals</span>
</div> </div>
<div class="width50 textRight"> <div>
<span class="more">All Deals</span> <span class="more">All Deals</span>
</div> </div>
</h4> </h4>
<offers></offers> <offers></offers>
<h4> <h4 fxLayout="row" fxLayoutAlign="space-between center">
<div class="width50"> <div>
<span class="head">Upcoming Itinerary</span> <span class="head">Upcoming Itinerary</span>
</div> </div>
<div class="width50 textRight"> <div>
<span class="more">More</span> <span class="more">More</span>
</div> </div>
</h4> </h4>
...@@ -24,20 +24,19 @@ ...@@ -24,20 +24,19 @@
<h5 class="">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5> <h5 class="">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5>
<h6 class="">in 5 Days</h6> <h6 class="">in 5 Days</h6>
<div class="clear"></div> <div class="clear"></div>
<h4><span>9 Aug, 2019</span><span>|</span><span>10 Aug, 2019</span><span>|</span><span>Non Stop</span><span>|</span><span>3 Travellers</span></h4> <h4 fxLayout="row" fxLayoutAlign="space-between center"><span>9 Aug, 2019</span><span>|</span><span>10 Aug,
2019</span><span>|</span><span>Non Stop</span><span>|</span><span>3 Travellers</span></h4>
</div> </div>
</div> </div>
<h4> <h4 fxLayout="row" fxLayoutAlign="space-between end">
<strong>Trending</strong>
<div> <div>
<div class="width50"> <strong>Trending</strong><br>
<span class="head">Destinations</span> <span class="head">Destinations</span>
</div> </div>
<div class="width50 textRight"> <div>
<span class="more">All Destinations</span> <span class="more">All Destinations</span>
</div> </div>
</div>
</h4> </h4>
<ati-destination></ati-destination> <ati-destination></ati-destination>
......
src/app/home/mainmenu/mainmenu.component.html
<!-- <div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center"> <section class="main_menu_wrapper">
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;"> <ul class="borderBottom" fxLayout="row" fxLayoutAlign="center center" cl>
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_flight.png" />
</div>
<p>FLIGHT</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_visa.png" />
</div>
<p>VISA</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_holiday.png" />
</div>
<p>HOLIDAY</p>
<div class="divison_layer "></div>
</div>
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu">
<img src="./../../../assets/mainmenu/menu_hotel.png" />
</div>
<p>Hotel</p>
</div>
</div> -->
<div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
<ul>
<li> <li>
<div class="menu_icon flight "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon flight"></span>
<p>FLIGHT</p> <p>Flight</p>
<div class="divison_layer "></div> </a>
</li> </li>
<li> <li>
<div class="menu_icon visa "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon visa"></span>
<p>VISA</p> <p>Visa</p>
<div class="divison_layer "></div> </a>
</li> </li>
<li> <li>
<div class="menu_icon holiday "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon holiday"></span>
<p>HOLIDAY</p> <p>Holidays</p>
<div class="divison_layer "></div> </a>
</li> </li>
<li> <li>
<div class="menu_icon hotel "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon hotel"></span>
<p>hotel</p> <p>Hotel</p>
</a>
</li> </li>
</ul>
<ul class="mobile-menu padding-top" fxLayout="row" fxLayoutAlign="center center">
<li> <li>
<div class="menu_icon forex "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon forex"></span>
<p>forex</p> <p>Forex</p>
</a>
</li> </li>
<li> <li>
<div class="menu_icon bus "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon bus"></span>
<p>bus</p> <p>Bus</p>
</a>
</li> </li>
<li> <li>
<div class="menu_icon inspire "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon inspire"></span>
<p>inspire</p> <p>Inspire</p>
</a>
</li> </li>
<li> <li>
<div class="menu_icon more "> <a fxLayout="column" fxLayoutAlign="center center">
</div> <span class="menu_icon more"></span>
<p>more</p> <p>More</p>
</a>
</li> </li>
</ul> </ul>
</div> </section>
\ No newline at end of file \ No newline at end of file
src/app/home/mainmenu/mainmenu.component.scss
$border_cm_color:#d7d8d9; $border_cm_color:#d7d8d9;
$backgroundWhite:#fff;
.main_menu_wrapper { .main_menu_wrapper {
.divison_layer { .divison_layer {
position: absolute; position: absolute;
...@@ -9,10 +10,13 @@ $border_cm_color:#d7d8d9; ...@@ -9,10 +10,13 @@ $border_cm_color:#d7d8d9;
right: -10px; right: -10px;
z-index: 9; z-index: 9;
} }
.borderBottom {
border-bottom: 1px solid $border_cm_color;
}
ul { ul {
margin: 0px; width: calc(100% - 20px);
padding: 10px; margin: 0 auto;
width: 100%; padding: 0px;
li { li {
list-style: none; list-style: none;
text-align: center; text-align: center;
...@@ -22,6 +26,17 @@ $border_cm_color:#d7d8d9; ...@@ -22,6 +26,17 @@ $border_cm_color:#d7d8d9;
border-top: none; border-top: none;
border-left: none; border-left: none;
position: relative; position: relative;
&::after {
content: '';
position: absolute;
bottom: -9px;
right: -8px;
background: $backgroundWhite;
z-index: 100;
width: 15px;
height: 15px;
border-radius: 50%;
}
.menu_icon { .menu_icon {
width: 35px; width: 35px;
height: 35px; height: 35px;
......
src/app/home/navbar/navbar.component.html
<div class="nav_header"> <div class="nav_header" fxLayout="row" fxLayoutAlign="start start">
<div class="nav_btn nav_menu" (click)="menuToggle()"></div> <div class="nav_btn nav_menu" (click)="menuToggle()"></div>
<div class="nav_title"> <div class="nav_title">
<img src="../../../assets/navbar/nav_logo.png"> <img src="../../../assets/navbar/nav_logo.png">
......
src/app/home/offers/offers.component.html
<carousel> <div class="offer_slider">
<carousel>
<ng-container *ngFor="let item of items;"> <ng-container *ngFor="let item of items;">
<ng-container *carouselItem> <ng-container *carouselItem>
<div class="offer_slider">
<div class="slide"> <div class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="content_inner"> <div class="content_inner">
...@@ -19,8 +20,7 @@ ...@@ -19,8 +20,7 @@
</div> </div>
<img src="../../../assets/offer/bottom_ribbon.png"> <img src="../../../assets/offer/bottom_ribbon.png">
</div> </div>
</div>
</ng-container> </ng-container>
</ng-container> </ng-container>
</carousel> </carousel>
\ No newline at end of file </div>
\ No newline at end of file
src/styles.scss
...@@ -161,22 +161,18 @@ button { ...@@ -161,22 +161,18 @@ button {
.width25 { .width25 {
width: 25% !important; width: 25% !important;
display: inline-block;
} }
.width50 { .width50 {
width: 50% !important; width: 50% !important;
display: inline-block;
} }
.width75 { .width75 {
width: 75% !important; width: 75% !important;
display: inline-block;
} }
.widthFull { .widthFull {
width: 100% !important; width: 100% !important;
display: inline-block;
} }
.widthAuto { .widthAuto {
...@@ -317,12 +313,10 @@ button { ...@@ -317,12 +313,10 @@ button {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30px; background-size: 30px;
display: inline-flex;
} }
.nav_title { .nav_title {
width: calc(100% - 100px); width: calc(100% - 100px);
display: inline-flex;
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
padding: 12px; padding: 12px;
padding-left: 5px; padding-left: 5px;
...@@ -361,3 +355,38 @@ button { ...@@ -361,3 +355,38 @@ button {
.nav_menu { .nav_menu {
background-image: url("./assets/navbar/nav_menu.png"); background-image: url("./assets/navbar/nav_menu.png");
} }
.destination_slider {
.carousel-wrapper {
ul {
li {
width: auto !important;
list-style: none;
margin-right: 10px;
}
}
}
}
.offer_slider {
.carousel-wrapper {
ul {
li {
width: auto !important;
list-style: none;
margin-right: 10px;
}
}
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
// .offer_slider {
// .slide {
// .inner_slider {
// height: 230px !important;
// width: 75% !important;
// }
// }
// }
}
\ 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