Skip to content

M
Moments
Commit e4f07fd0 by abraham
Options

accountlogin

parent c5550b5e
Showing with 782 additions and 176 deletions
src/app/body/loginaccount/loginaccount.component.html
<div class="loginaccount_overlay1">
<div class=" container">
<div class="row">
<div class="image_cam">
<img src="../../../assets/img/1.png">
<div class="image_top">
<img src="../../../assets/img/2.png">
<div class="loginaccount_overlay">
<div class="loginaccount_overlay1">
<div class=" container">
<div class="row">
<div class="image_cam">
<img src="../../../assets/img/1.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 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 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 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 class="loginaccount_overlay3">
<div class="container">
<div class="row">
<img src="../../../assets/img/8 (1).png">
</div>
<div class="row"><h2>NEXT TO-DOs</h2></div>
<div class="row">
<div class="col-md-6 both_col fir_col">
<h2>3</h2>
<h4>Done</h4>
</div>
<div class="col time_count">
<h1>-53</h1>
<h3>MINS</h3>
<div class="col-md-6 both_col sec_col">
<h2 class="head_clr">3</h2>
<h4>To Do</h4>
</div>
<div class="col time_count">
<h1>-47</h1>
<h3>SECS</h3>
</div>
<div class="row">
<div class="todo_content">
<p>No Work For Today</p>
</div>
</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 class="loginaccount_overlay4">
<div class="get_started">
<img src="../../../assets/img/9.png">
<h2>GET STARTED BOOKING VENDORS</h2>
</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>
<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>
</div>
<div class="loginaccount_overlay3">
<div class="container">
<div class="row">
<img src="../../../assets/img/8 (1).png">
</div>
<div class="row"><h2>NEXT TO-DOs</h2></div>
<div class="row">
<div class="col-md-6">
<div class="loginaccount_overlay5">
<div class="overlay5_head">
<img src="../../../assets/img/11 (1).png">
<h2>HIRED WEDDING VENDORS</h2>
<h4>Go to Vendor Manager</h4>
</div>
<div class="container">
<ul>
<li>
<div class="vendor_img" data-toggle="modal" data-target="#myModal">
<img src="../../../assets/img/12 (1).png">
</div>
<p>Add Vendors</p>
</li>
<li>
<div class="vendor_img">
<img src="../../../assets/img/1511411361_800x800_1484776452685-exterior-1.jpg">
</div>
<p>Antony Trivet photography</p>
</li>
</ul>
</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 class="col-md-6"></div>
</div>
</div>
</div>
src/app/body/loginaccount/loginaccount.component.scss
.loginaccount_overlay1{
background-image:url("../../../assets/img/loginaccount1.png");
.container{
.row{
.image_cam{
position: relative;
margin: 0 auto;
margin-top: 30px;
.image_top{
position: absolute;
top: 0;
right: 0;
}
}
.main_head{
margin: 0 auto;
h2{
display: inline-block;
font-weight: 400;
font-size: 30px;
color: #fff;
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.loginaccount_overlay{
.loginaccount_overlay1{
background-image:url("../../../assets/img/loginaccount1.png");
.container{
.row{
.image_cam{
position: relative;
margin: 0 auto;
margin-top: 30px;
.image_top{
position: absolute;
top: 0;
right: 0;
}
}
img{
vertical-align: text-bottom;
padding-left: 10px;
.main_head{
margin: 0 auto;
h2{
display: inline-block;
font-weight: 400;
font-size: 30px;
color: #fff;
}
img{
vertical-align: text-bottom;
padding-left: 10px;
}
}
}
.date_details{
.row{
padding-top: 15px;
.date_details1{
text-align: center;
h5{
display: inline-block;
font-weight: 400;
font-size: 16px;
color: #fff;
.date_details{
.row{
padding-top: 15px;
.date_details1{
text-align: center;
h5{
display: inline-block;
font-weight: 400;
font-size: 16px;
color: #fff;
}
img{
width: 20px;
height: auto;
margin-left: 10px;
vertical-align: text-bottom;
}
}
img{
width: 20px;
height: auto;
margin-left: 10px;
vertical-align: text-bottom;
.date_details2{
text-align: center;
.white_round{
display: inline-block;
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;
.white_round{
display: inline-block;
background-color: #fff;
border-radius: 50%;
height: 10px;
width: 10px;
}
img{
margin-left: 15px;
width: 20px;
height: auto;
vertical-align: text-bottom;
.time_count{
h1{
font-weight: 400;
font-size: 28px;
color: #fff;
}
h3{
font-weight: 400;
font-size: 18px;
color: #fff;
}
}
}
}
}
.date_time{
.row{
.last_sent{
margin: 0 auto;
padding-top: 30px;
text-align: center;
.time_count{
h1{
font-weight: 400;
font-size: 28px;
color: #fff;
padding-bottom: 100px;
h3{
font-weight: 400;
font-size: 18px;
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;
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;
padding-bottom: 100px;
h3{
font-weight: 400;
font-size: 18px;
color: #fff;
}
}
.loginaccount_overlay3{
background-color: #f1f1f1;
.container{
.row{
img{
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_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;
.loginaccount_overlay4{
.get_started{
width: 100%;
text-align: center;
img{
margin-top: 40px;
}
h2{
margin-top: 30px;
font-weight: 600;
font-size: 20px;
color: #636363;
}
}
.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_overlay3{
background-color: #f1f1f1;
.container{
.row{
.loginaccount_overlay5{
padding-top: 30px;
.overlay5_head{
width: 100%;
text-align: center;
img{
margin: 0 auto;
margin-top: 40px;
}
h2{
margin: 0 auto;
margin-top: 30px;
font-weight: 600;
font-size: 20px;
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;
}
}
}
}
}
}
\ No newline at end of file
//css modal
#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 { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-loginaccount',
......@@ -6,10 +7,22 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./loginaccount.component.scss']
})
export class LoginaccountComponent implements OnInit {
constructor() { }
con2=false;
con1=false;
constructor(
private router: Router,
private route: ActivatedRoute,
) { }
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;
}
}
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