Skip to content

M
Moments
Commit b20a3c08 by Aksa98
Options

Merge branch 'master' into aksa

parents 79d83640 a27dd642
Showing with 912 additions and 177 deletions
src/app/body/login/login.component.html
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<input type="email" placeholder="Email ID"> <input type="email" placeholder="Email ID">
<input type="password" placeholder="Password"> <input type="password" placeholder="Password">
<div class="btn-m-login"> <div class="btn-m-login">
<button class="btn-login">Login</button> <button class="btn-login" (click)="goToPage('loginaccount')">Login</button>
</div> </div>
<div class="links"> <div class="links">
<div class="row"> <div class="row">
......
src/app/body/loginaccount/loginaccount.component.html
<div class="loginaccount_overlay1"> <div class="loginaccount_overlay">
<div class=" container"> <div class="loginaccount_overlay1">
<div class="row"> <div class=" container">
<div class="image_cam"> <div class="row">
<img src="../../../assets/img/1.png"> <div class="image_cam">
<div class="image_top"> <img src="../../../assets/img/1.png">
<img src="../../../assets/img/2.png"> <div class="image_top">
<img src="../../../assets/img/2.png">
</div>
</div>
</div>
<div class="row">
<div class="main_head">
<h2>Hi, Aleksandar !</h2>
<img src="../../../assets/img/4.png">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 date_details">
<div class="row">
<div class="col date_details1">
<h5>2018-11-22</h5>
<img src="../../../assets/img/3.png">
</div>
<div class="col date_details2">
<div class="white_round"></div>
<img src="../../../assets/img/4.png">
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 date_time">
<div class="row">
<div class="col time_count">
<h1>EXPIRED</h1>
<h3>DAYS</h3>
</div>
<div class="col time_count">
<h1>-7</h1>
<h3>HOURS</h3>
</div>
<div class="col time_count">
<h1>-53</h1>
<h3>MINS</h3>
</div>
<div class="col time_count">
<h1>-47</h1>
<h3>SECS</h3>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="last_sent">
<h3>UNTILL WE SAY I DO!</h3>
</div>
</div> </div>
</div>
</div>
<div class="row">
<div class="main_head">
<h2>Hi, Aleksandar !</h2>
<img src="../../../assets/img/4.png">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 date_details">
<div class="row">
<div class="col date_details1">
<h5>2018-11-22</h5>
<img src="../../../assets/img/3.png">
</div>
<div class="col date_details2">
<div class="white_round"></div>
<img src="../../../assets/img/4.png">
</div> </div>
</div>
<div class="loginaccount_overlay2">
<div class="container">
<ul>
<li><a href="#">Messages</a></li>
<li><a href="#">Checklist</a></li>
<li><a href="#">Guest List</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Favorite Vendors</a></li>
</ul>
<div class="input_box">
<div class="input_cont input_cont1">
<input placeholder="eg, rustic venues, florists, beach wedding" (keyup)="onKey1($event)">
<div class="con1_drop" *ngIf="con1">
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
</div>
</div>
<div class="input_cont input_cont2">
<input placeholder="North Pole, AK" (keyup)="onKey2($event)">
<div class="input_box_button">
<i class="fas fa-search"></i>
</div>
<div class="con2_drop" *ngIf="con2">
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
<p>Planning</p>
</div>
</div>
<div class="clear"></div>
</div>
</div> </div>
</div> </div>
<div class="col-md-3"></div> <div class="loginaccount_overlay3">
</div> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-2"></div> <img src="../../../assets/img/8 (1).png">
<div class="col-md-8 date_time"> </div>
<div class="row"> <div class="row"><h2>NEXT TO-DOs</h2></div>
<div class="col time_count"> <div class="row">
<h1>EXPIRED</h1> <div class="col-md-6 both_col fir_col">
<h3>DAYS</h3> <h2>3</h2>
</div> <h4>Done</h4>
<div class="col time_count">
<h1>-7</h1>
<h3>HOURS</h3>
</div> </div>
<div class="col time_count"> <div class="col-md-6 both_col sec_col">
<h1>-53</h1> <h2 class="head_clr">3</h2>
<h3>MINS</h3> <h4>To Do</h4>
</div> </div>
<div class="col time_count"> </div>
<h1>-47</h1> <div class="row">
<h3>SECS</h3> <div class="todo_content">
<p>No Work For Today</p>
</div> </div>
</div>
</div> </div>
</div> </div>
<div class="col-md-2"></div> <div class="loginaccount_overlay4">
</div> <div class="get_started">
<div class="row"> <img src="../../../assets/img/9.png">
<div class="last_sent"> <h2>GET STARTED BOOKING VENDORS</h2>
<h3>UNTILL WE SAY I DO!</h3> </div>
<div class="container">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#photo">Wedding Photographers</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#venue">Wedding Venues</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#plan">Planning</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#dj">Wedding DJs</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#invite">Wedding Invitations</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#cater">Wedding Caterers</a>
</li>
</ul>
<h3>EXPLORE WEDDING FLORISTS FOR YOU NEAR</h3>
<!-- Tab panes -->
<div class="tab-content">
<div id="photo" class="container tab-pane active"><br>
<ul>
<li>
<div class="tab_img">
<img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse">
</div>
<div class="rat_box">
<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="rat_cont">
<p>2 Reviews</p>
<h4>Catie Bartlett Photography</h4>
<p>Bangalore,54645</p>
</div>
</li>
<li>
<div class="tab_img">
<img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse">
</div>
<div class="rat_box">
<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="rat_cont">
<p>2 Reviews</p>
<h4>Catie Bartlett Photography</h4>
<p>Bangalore,54645</p>
</div>
</li>
<li>
<div class="tab_img">
<img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse">
</div>
<div class="rat_box">
<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="rat_cont">
<p>2 Reviews</p>
<h4>Catie Bartlett Photography</h4>
<p>Bangalore,54645</p>
</div>
</li>
<li>
<div class="tab_img">
<img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse">
</div>
<div class="rat_box">
<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="rat_cont">
<p>2 Reviews</p>
<h4>Catie Bartlett Photography</h4>
<p>Bangalore,54645</p>
</div>
</li>
</ul>
</div>
<div id="venue" class="container tab-pane fade"><br>
<h3>NO RESULTS FOUND</h3>
</div>
<div id="plan" class="container tab-pane fade"><br>
<h3>NO RESULTS FOUND</h3>
</div>
<div id="dj" class="container tab-pane fade"><br>
<h3>NO RESULTS FOUND</h3>
</div>
<div id="invite" class="container tab-pane fade"><br>
<h3>NO RESULTS FOUND</h3>
</div>
<div id="cater" class="container tab-pane fade"><br>
<h3>NO RESULTS FOUND</h3>
</div>
</div>
<div class="view_all">
<button><a href="#">View All</a></button>
</div>
</div>
</div> </div>
</div> <div class="loginaccount_overlay5">
</div> <div class="overlay5_head">
</div> <img src="../../../assets/img/11 (1).png">
<div class="loginaccount_overlay2"> <h2>HIRED WEDDING VENDORS</h2>
<div class="container"> <h4>Go to Vendor Manager</h4>
<ul> </div>
<li><a href="#">Messages</a></li> <div class="container">
<li><a href="#">Checklist</a></li> <ul>
<li><a href="#">Guest List</a></li> <li>
<li><a href="#">Budget</a></li> <div class="vendor_img" data-toggle="modal" data-target="#myModal">
<li><a href="#">Favorite Vendors</a></li> <img src="../../../assets/img/12 (1).png">
</ul> </div>
</div> <p>Add Vendors</p>
</div> </li>
<div class="loginaccount_overlay3"> <li>
<div class="container"> <div class="vendor_img">
<div class="row"> <img src="../../../assets/img/1511411361_800x800_1484776452685-exterior-1.jpg">
<img src="../../../assets/img/8 (1).png"> </div>
</div> <p>Antony Trivet photography</p>
<div class="row"><h2>NEXT TO-DOs</h2></div> </li>
<div class="row"> </ul>
<div class="col-md-6"> </div>
</div>
<!-- modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<h3>Congratulations! Which officiant did you hire?</h3>
<hr>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button>Save</button>
</div>
</div>
</div>
</div> </div>
<div class="col-md-6"></div>
</div>
</div>
</div> </div>
src/app/body/loginaccount/loginaccount.component.scss
.loginaccount_overlay1{ @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
background-image:url("../../../assets/img/loginaccount1.png"); .loginaccount_overlay{
.container{ .loginaccount_overlay1{
.row{ background-image:url("../../../assets/img/loginaccount1.png");
.image_cam{ .container{
position: relative; .row{
margin: 0 auto; .image_cam{
margin-top: 30px; position: relative;
.image_top{ margin: 0 auto;
position: absolute; margin-top: 30px;
top: 0; .image_top{
right: 0; position: absolute;
} top: 0;
} right: 0;
.main_head{ }
margin: 0 auto;
h2{
display: inline-block;
font-weight: 400;
font-size: 30px;
color: #fff;
} }
img{ .main_head{
vertical-align: text-bottom; margin: 0 auto;
padding-left: 10px; h2{
display: inline-block;
font-weight: 400;
font-size: 30px;
color: #fff;
}
img{
vertical-align: text-bottom;
padding-left: 10px;
}
} }
} .date_details{
.date_details{ .row{
.row{ padding-top: 15px;
padding-top: 15px; .date_details1{
.date_details1{ text-align: center;
text-align: center; h5{
h5{ display: inline-block;
display: inline-block; font-weight: 400;
font-weight: 400; font-size: 16px;
font-size: 16px; color: #fff;
color: #fff; }
img{
width: 20px;
height: auto;
margin-left: 10px;
vertical-align: text-bottom;
}
} }
img{ .date_details2{
width: 20px; text-align: center;
height: auto; .white_round{
margin-left: 10px; display: inline-block;
vertical-align: text-bottom; background-color: #fff;
border-radius: 50%;
height: 10px;
width: 10px;
}
img{
margin-left: 15px;
width: 20px;
height: auto;
vertical-align: text-bottom;
}
} }
} }
.date_details2{ }
.date_time{
.row{
padding-top: 30px;
text-align: center; text-align: center;
.white_round{ .time_count{
display: inline-block; h1{
background-color: #fff; font-weight: 400;
border-radius: 50%; font-size: 28px;
height: 10px; color: #fff;
width: 10px; }
} h3{
img{ font-weight: 400;
margin-left: 15px; font-size: 18px;
width: 20px; color: #fff;
height: auto; }
vertical-align: text-bottom;
} }
} }
} }
} .last_sent{
.date_time{ margin: 0 auto;
.row{
padding-top: 30px; padding-top: 30px;
text-align: center; padding-bottom: 100px;
.time_count{ h3{
h1{ font-weight: 400;
font-weight: 400; font-size: 18px;
font-size: 28px; color: #fff;
color: #fff; }
}
}
}
}
.loginaccount_overlay2{
background-color: #fcfde4;
.container{
ul{
padding-top: 50px;
padding-left: 0px;
li{
list-style: none;
display: inline-block;
margin-right: 50px;
a{
font-weight: 400;
font-size: 16px;
color: #5f5f5f;
}
}
}
.input_box{
padding-top: 10px;
padding-bottom: 60px;
.input_cont{
width: 50%;
display: inline-block;
height: 60px;
background-color: #ffffff;
padding: 10px 10px 10px 10px;
input{
float: left;
width: calc(100% - 40px);
height: 100%;
border-radius: 20px;
border: transparent;
outline: none;
padding-left: 20px;
&::placeholder{
opacity: .5;
} }
h3{ }
font-weight: 400; .input_box_button{
text-align: center;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(194, 55, 194);
i{
font-size: 18px; font-size: 18px;
color: #fff; padding-top: 11px;
color: #e2e2e2;
}
}
}
.input_cont1{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
position: relative;
input{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px ;
border-right: 1px solid #c717c7 ;
width: 100% ;
}
.input_box_button{
display: none;
}
.con1_drop{
padding:10px;
position: absolute;
top: 70px;
left: 10px;
right: 0;
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
p{
margin-bottom: 0px;
font-weight: 600;
color: #c717c7;
}
}
}
.input_cont2{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
.con2_drop{
padding:10px;
position: absolute;
top: 70px;
left: 0px;
right: 0;
background-color: #fff;
border-radius: 5px;
width: calc(100% - 30px);
p{
margin-bottom: 0px;
font-weight: 600;
color: #c717c7;
} }
} }
} }
} }
.last_sent{ }
margin: 0 auto; }
padding-top: 30px; .loginaccount_overlay3{
padding-bottom: 100px; background-color: #f1f1f1;
h3{ .container{
font-weight: 400; .row{
font-size: 18px; img{
color: #fff; margin: 0 auto;
margin-top: 40px;
}
h2{
margin: 0 auto;
margin-top: 30px;
font-weight: 600;
font-size: 20px;
color: #636363;
}
.both_col{
padding-top: 20px;
h2{
display: inline;
font-weight: 600;
font-size: 30px;
color: #00bb5c;
margin: 0 5px 0 0;
}
.head_clr{
color: #e82c2c;
}
h4{
display: inline;
font-weight: 600;
font-size: 18px;
color: #535353;
}
}
.fir_col{
text-align: left;
}
.sec_col{
text-align: right;
}
.todo_content{
margin-top: 30px;
margin-bottom: 20px;
width: 100%;
background-color: #fff;
padding-top: 20px;
padding-bottom: 5px;
p{
color: #c717c7;
text-align: center;
font-weight: 500;
font-size: 20px;
margin-bottom: 0px;
}
} }
} }
} }
} }
} .loginaccount_overlay4{
.loginaccount_overlay2{ .get_started{
background-color: #fcfde4; width: 100%;
.container{ text-align: center;
ul{ img{
padding-top: 50px; margin-top: 40px;
padding-left: 0px; }
li{ h2{
list-style: none; margin-top: 30px;
display: inline-block; font-weight: 600;
margin-right: 50px; font-size: 20px;
a{ color: #636363;
font-weight: 400; }
font-size: 16px; }
color: #5f5f5f; .container{
padding-top: 40px;
h3{
font-weight: 400;
color: #4c4c4c;
font-size: 18px;
padding-top: 30px;
text-align: center;
}
.nav-pills{
justify-content: space-evenly;
.nav-item{
.nav-link{
padding: 10px 20px 10px 20px;
color: #000;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
border: 2px solid transparent;
}
.active{
background-color: #fff;
border-radius: 24px;
border: 2px solid #000;
color: #000;
}
}
}
.tab-content{
.tab-pane{
h3{
text-align: left;
font-weight: 600;
font-size: 20px;
color: #c717c7;
}
ul{
padding-left: 0px;
margin-bottom: 0px;
li{
list-style: none;
display: inline-block;
padding-right: 20px;
.tab_img{
height: 100%;
width: 250px;
img{
height: 100%;
width: 100%;
}
}
.rat_box{
overflow: auto;
/****** Style Star Rating Widget *****/
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin-bottom: 0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
.rat_cont{
p{
font-weight: 400;
font-size: 15px;
color: #b0b0b0;
margin-bottom: 0px;
padding-bottom: 5px;
}
h4{
font-weight: 400;
font-size: 16px;
color: #646464;
margin-bottom: 0px;
padding-bottom: 5px;
}
}
}
}
}
}
.view_all{
padding-top: 30px;
padding-left: 15px;
button{
background: #f1a42a;
border: 1px solid #f1a42a;
padding: 5px 20px;
border-radius: 20px;
a{
font-weight: 400;
text-decoration: none;
font-size: 14px;
color: #fff;
}
} }
} }
} }
} }
} .loginaccount_overlay5{
.loginaccount_overlay3{ padding-top: 30px;
background-color: #f1f1f1; .overlay5_head{
.container{ width: 100%;
.row{ text-align: center;
img{ img{
margin: 0 auto;
margin-top: 40px; margin-top: 40px;
} }
h2{ h2{
margin: 0 auto;
margin-top: 30px; margin-top: 30px;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
color: #636363; color: #636363;
} }
h4{
padding-top: 10px;
font-weight: 400;
font-size: 18px;
color: #636363;
}
}
.container{
padding-top: 30px;
padding-bottom: 10px;
ul{
padding-left: 0px;
li{
list-style: none;
display: inline-block;
padding-left: 50px;
.vendor_img{
cursor: pointer;
height: 108px;
width: 108px;
margin: 0 auto;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
p{
padding-top: 10px;
font-weight: 400;
font-size: 16px;
text-align: center;
color: #636363;
}
}
}
} }
} }
} //css modal
\ No newline at end of file #myModal{
.modal-dialog{
margin: 100px auto;
.modal-content{
.modal-body{
padding: 40px 15px;
h3{
font-weight: 600;
font-size: 18px;
color: #535353;
}
hr{
margin-left: 0px;
width: 30px;
border: 2px solid rgb(194, 55, 194);
border-radius: 1px;
}
select{
margin-top: 20px;
width: 80%;
font-size: 14px;
padding: 5px;
border: transparent;
margin-bottom: 25px;
}
button{
color: #fff;
font-size: 18px;
padding: 5px 20px;
display: block;
margin: 0 auto;
background-color: #ff9c00;
border: 1px solid #ff9c00;
border-radius: 24px;
margin-bottom: 30px;
}
}
}
}
}
}
src/app/body/loginaccount/loginaccount.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-loginaccount', selector: 'app-loginaccount',
...@@ -6,10 +7,22 @@ import { Component, OnInit } from '@angular/core'; ...@@ -6,10 +7,22 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./loginaccount.component.scss'] styleUrls: ['./loginaccount.component.scss']
}) })
export class LoginaccountComponent implements OnInit { export class LoginaccountComponent implements OnInit {
con2=false;
constructor() { } con1=false;
constructor(
private router: Router,
private route: ActivatedRoute,
) { }
ngOnInit() { ngOnInit() {
} }
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
onKey2(event: any) {
this.con2 = !this.con2;
}
onKey1(event: any) {
this.con1 = !this.con1;
}
} }
src/assets/responsive.scss
...@@ -112,6 +112,85 @@ ...@@ -112,6 +112,85 @@
} }
} }
} }
//scss for loginaccount
.loginaccount_overlay{
.loginaccount_overlay1{
.container{
.row{
.date_details{
.row{
.date_details1{
text-align: left !important;
}
.date_details2{
text-align: right !important;
}
}
}
.last_sent{
padding-bottom: 40px !important;
}
}
}
}
.loginaccount_overlay2{
.container{
ul{
text-align: center !important;
li{
margin-right: 0px !important;
padding: 5px !important;
}
}
.input_box{
.input_cont{
input{
padding-left: 5px !important;
}
}
}
}
}
.loginaccount_overlay3{
.container{
.row{
.both_col{
width: 50% !important;
}
}
}
}
.loginaccount_overlay4{
.container{
.tab-content{
.tab-pane{
ul{
li{
padding-right: 0px !important;
padding-bottom: 20px !important;
.tab_img{
width: 100% !important;
}
}
}
}
}
.view_all{
padding-top: 0px !important;
}
}
}
.loginaccount_overlay5{
.container{
ul{
li{
padding-left: 0px !important;
width: 100% !important;
}
}
}
}
}
//navbar scss //navbar scss
nav{ nav{
height: auto !important; height: auto !important;
...@@ -726,6 +805,56 @@ margin-top: 10px !important; ...@@ -726,6 +805,56 @@ margin-top: 10px !important;
} }
} }
//scss for loginaccount
.loginaccount_overlay{
.loginaccount_overlay2{
.container{
ul{
text-align: center !important;
li{
margin-right: 30px !important;
margin-left: 30px !important;
}
}
}
}
.loginaccount_overlay4{
.container{
.tab-content{
.tab-pane{
ul{
text-align: center !important;
li{
padding-left: 10px !important;
padding-right: 10px !important;
.tab_img{
width: 300px !important;
}
.rat_cont{
text-align: left !important;
}
}
}
}
}
.view_all{
padding-left: 30px !important;
}
}
}
.loginaccount_overlay5{
.container{
ul{
text-align: center !important;
li{
padding-left: 20px !important;
padding-right: 20px !important;
}
}
}
}
}
} }
/* 05.0 iPads (landscape) ----------- */ /* 05.0 iPads (landscape) ----------- */
......
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