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 @@
ul {
margin: 0px;
padding: 0px;
li {
width: auto;
}
}
}
......
src/app/home/destination/destination.component.html
<div class="destination_slider">
<!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem class="slide">
<carousel>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="inner_slider">
<div class="inner_overlay">
<h4>Paris</h4>
<h4>{{item.place}}</h4>
<h6>
<strong>
Starting from
</strong> <br>$ 245
</strong> <br>${{item.price}}
</h6>
</div>
<img src="../../../assets/destination/paris.png">
<img src={{item.image}}>
</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>
<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> -->
</ng-container>
</ng-container>
</carousel>
</div>
\ No newline at end of file
src/app/home/destination/destination.component.scss
......@@ -7,6 +7,8 @@
.inner_slider {
position: relative;
border-radius: 10px;
height: 180px;
width: 150px;
img {
width: 100%;
height: 100%;
......
src/app/home/destination/destination.component.ts
......@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
})
export class DestinationComponent implements OnInit {
items: any;
constructor() { }
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>
<div class="ati_main_wrapper">
<ati-mainmenu></ati-mainmenu>
<h4>
<div class="width50">
<h4 fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="head">Exclusive Deals</span>
</div>
<div class="width50 textRight">
<div>
<span class="more">All Deals</span>
</div>
</h4>
<offers></offers>
<h4>
<div class="width50">
<h4 fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="head">Upcoming Itinerary</span>
</div>
<div class="width50 textRight">
<div>
<span class="more">More</span>
</div>
</h4>
......@@ -24,20 +24,19 @@
<h5 class="">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5>
<h6 class="">in 5 Days</h6>
<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>
<h4>
<strong>Trending</strong>
<h4 fxLayout="row" fxLayoutAlign="space-between end">
<div>
<div class="width50">
<strong>Trending</strong><br>
<span class="head">Destinations</span>
</div>
<div class="width50 textRight">
<div>
<span class="more">All Destinations</span>
</div>
</div>
</h4>
<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">
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<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>
<section class="main_menu_wrapper">
<ul class="borderBottom" fxLayout="row" fxLayoutAlign="center center" cl>
<li>
<div class="menu_icon flight ">
</div>
<p>FLIGHT</p>
<div class="divison_layer "></div>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon flight"></span>
<p>Flight</p>
</a>
</li>
<li>
<div class="menu_icon visa ">
</div>
<p>VISA</p>
<div class="divison_layer "></div>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon visa"></span>
<p>Visa</p>
</a>
</li>
<li>
<div class="menu_icon holiday ">
</div>
<p>HOLIDAY</p>
<div class="divison_layer "></div>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon holiday"></span>
<p>Holidays</p>
</a>
</li>
<li>
<div class="menu_icon hotel ">
</div>
<p>hotel</p>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon hotel"></span>
<p>Hotel</p>
</a>
</li>
</ul>
<ul class="mobile-menu padding-top" fxLayout="row" fxLayoutAlign="center center">
<li>
<div class="menu_icon forex ">
</div>
<p>forex</p>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon forex"></span>
<p>Forex</p>
</a>
</li>
<li>
<div class="menu_icon bus ">
</div>
<p>bus</p>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon bus"></span>
<p>Bus</p>
</a>
</li>
<li>
<div class="menu_icon inspire ">
</div>
<p>inspire</p>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon inspire"></span>
<p>Inspire</p>
</a>
</li>
<li>
<div class="menu_icon more ">
</div>
<p>more</p>
<a fxLayout="column" fxLayoutAlign="center center">
<span class="menu_icon more"></span>
<p>More</p>
</a>
</li>
</ul>
</div>
\ No newline at end of file
</section>
\ No newline at end of file
src/app/home/mainmenu/mainmenu.component.scss
$border_cm_color:#d7d8d9;
$backgroundWhite:#fff;
.main_menu_wrapper {
.divison_layer {
position: absolute;
......@@ -9,10 +10,13 @@ $border_cm_color:#d7d8d9;
right: -10px;
z-index: 9;
}
.borderBottom {
border-bottom: 1px solid $border_cm_color;
}
ul {
margin: 0px;
padding: 10px;
width: 100%;
width: calc(100% - 20px);
margin: 0 auto;
padding: 0px;
li {
list-style: none;
text-align: center;
......@@ -22,6 +26,17 @@ $border_cm_color:#d7d8d9;
border-top: none;
border-left: none;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -9px;
right: -8px;
background: $backgroundWhite;
z-index: 100;
width: 15px;
height: 15px;
border-radius: 50%;
}
.menu_icon {
width: 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_title">
<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 *carouselItem>
<div class="offer_slider">
<div class="slide">
<div class="inner_slider">
<div class="content_inner">
......@@ -19,8 +20,7 @@
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</div>
</ng-container>
</ng-container>
</carousel>
\ No newline at end of file
</carousel>
</div>
\ No newline at end of file
src/styles.scss
......@@ -161,22 +161,18 @@ button {
.width25 {
width: 25% !important;
display: inline-block;
}
.width50 {
width: 50% !important;
display: inline-block;
}
.width75 {
width: 75% !important;
display: inline-block;
}
.widthFull {
width: 100% !important;
display: inline-block;
}
.widthAuto {
......@@ -317,12 +313,10 @@ button {
background-position: center;
background-repeat: no-repeat;
background-size: 30px;
display: inline-flex;
}
.nav_title {
width: calc(100% - 100px);
display: inline-flex;
color: rgba(59, 57, 77, 1);
padding: 12px;
padding-left: 5px;
......@@ -361,3 +355,38 @@ button {
.nav_menu {
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