Skip to content

M
Moments
Commit 82d7250a by aksa
Options

Merge branch 'aksa' into 'master'

Aksa See merge request !4
parents 608642ae d3210d93
Showing with 1711 additions and 168 deletions
src/app/body/body-routing.module.ts
......@@ -5,6 +5,8 @@ import{JoinComponent} from './join/join.component';
import{HomeComponent} from './home/home.component';
import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { from } from 'rxjs';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
const ModuleRoutes: Routes = [
{
path:'login',component: LoginComponent
......@@ -20,6 +22,12 @@ const ModuleRoutes: Routes = [
{
path:'loginaccount',component: LoginaccountComponent
},
{
path:'loginvendors',component: LoginvendorsComponent
},
{
path:'payment',component: PaymentComponent
}
];
......
src/app/body/body.module.ts
......@@ -6,8 +6,10 @@ import{ moduleRouting } from './body-routing.module';
import { HomeComponent } from './home/home.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';
import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
@NgModule({
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent],
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent],
imports: [
CommonModule,
moduleRouting,
......
src/app/body/join/join.component.html
<div class="m-join">
<div class="row">
<div class="col-md-6">
<div class="m-join-wedding">
<div class="m-join-planning">
<h3>Wedding planning starts here..</h3>
<div class="buttoncls-join">
<div class="row">
<div class="col-md-5">
<a href="login"> <button class="sig-btn">Login</button></a>
</div>
<div class="col-md-5">
<a href="join"><button class="siup-btn">Signup</button></a>
</div>
<div class="row">
<div class="col-md-6 join-sets">
<div class="m-join-wedding">
<div class="m-join-planning">
<h3>Wedding planning starts here..</h3>
<div class="buttoncls-join">
<div class="row">
<div class="col">
<a (click)="goto('login')"> <button class="sig-btn">Login</button></a>
</div>
<div class="col">
<a (click)="goto('join')"><button class="siup-btn">Signup</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="m-join-body">
<div class="m-join-header">
<div class="col-md-6">
<div class="m-join-body">
<div class="m-join-header">
<h3>START BY CREATING YOUR FREE ACCOUNT</h3>
</div>
<div class="m-join-conent">
<input type="text" placeholder="Enter Your First Name">
<input type="text" placeholder="Enter Your Last Name">
<input type="email" placeholder="Enter Your Email">
<input type="password" placeholder="Password">
<h3>START BY CREATING YOUR FREE ACCOUNT</h3>
</div>
<div class="m-join-conent">
<input type="text" placeholder="Enter Your First Name">
<input type="text" placeholder="Enter Your Last Name">
<input type="email" placeholder="Enter Your Email">
<input type="password" placeholder="Password">
<input type="text" placeholder="Wedding Date">
<div class="txt-join"><p>By clicking "Sign Up" you agree to Moments's Terms of Use</p></div>
<div class="btn-m-join">
<button class="btn-signup">signup</button>
</div>
<div class="links">
<div class="row">
<div class="col">
<p> <a href="login">Already a Member?</a>LOG IN</p>
</div>
<div class="col">
<a href="#"> ARE YOU A VENDOR?</a>
</div>
</div>
<input type="text" placeholder="Wedding Date">
<div class="txt-join"><p>By clicking "Sign Up" you agree to Moments's Terms of Use</p></div>
<div class="btn-m-join">
<button class="btn-signup">signup</button>
</div>
<div class="links">
<div class="row">
<div class="col">
<p> <a (click)="goto('login')">Already a Member?</a>LOG IN</p>
</div>
<div class="col">
<a data-toggle="modal" data-target="#myModal-join"> ARE YOU A VENDOR?</a><!-- href="payment" -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- The Modal -->
<div class="modal" id="myModal-join">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5>WELCOME TO STORY PAGE
THE BEST PLACE TO POWER YOUR BUSINESS</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label for="sel1">
Select Your Business Category:</label>
<select class="form-control" id="sel1" name="sellist1">
<option>Wedding Photographers</option>
<option>Wedding Venues</option>
<option>Planning</option>
<option>Wedding DJs</option>
<option>Wedding Invitations</option>
<option>Wedding caterers</option>
<option>Wedding Favors & Gifts</option>
<option>Wedding Jewelry</option>
</select>
<label for="sel1">Select Your Region:</label>
<select class="form-control" id="sel1" name="sellist1">
<option>Kollam</option>
<option>Kottayam</option>
<option>Kochi</option>
<option>Bangalore</option>
<option>Chennai</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Karnataka</option>
<option>Thrissur</option>
</select>
<div class="btn-plans">
<button class="pri-btn"> <a href="payment">SEE PLANS & PRICING</a></button>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
src/app/body/join/join.component.scss
......@@ -5,15 +5,21 @@
}
.m-join{
padding-top: 135px;
.row{
width: 100%;
margin-right: 0px;
margin-left: 0px;
}
.col-md-6{
width: 50%;
.join-sets{
width: 50%;
padding-right: 0px;
padding-left: 0px;
height: 655px;
}
padding-right: 0px;
padding-left: 0px;
padding-left: 0px;
}
.m-join-wedding{
text-align: center;
......@@ -48,7 +54,7 @@
width:100px;
background:transparent;
border:1px solid #fff;
margin-left: 200px;
margin-left: 230px;
outline: none;
}
......@@ -64,7 +70,7 @@
width:100px;
background: #ff9c00;
outline: none;
margin-left: -210px;
border: 1px solid #ff9c00;
&:hover{
background: transparent;
......@@ -137,13 +143,100 @@
font-size: 15px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
p{
color: #fff;
font-size: 15px;
font-weight: 400;
cursor: pointer;
}
}
/*****************modal**********************/
.modal-dialog{
max-width: 600px;
}
.modal-header{
background: url("../../../assets/img/9.png");
background-repeat: no-repeat;
background-position: center;
padding-bottom: 0px;
margin-top: -46px;
border: none;
h5{
margin-top: 100px;
text-align: center;
color: #6d6c6c;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
width: 375px;
margin-left: 81px;
}
}
.modal-header .close {
padding: 1rem 1rem;
margin: 3rem -1rem -1rem auto;
outline:none;
}
.modal-body{
border: none;
outline: none;
margin-left: 81px;
select{
outline: none;
}
.form-control{
margin-top: 10px;
border: none;
outline: none;
border-bottom: 1px solid gray;
padding: 3px;
font-size: 14px;
width:410px;
}
label{
margin-top: 20px;
font-size: 0.8rem;
color: #9e9e9e;
}
option{
color: #c717c7;
outline: none;
}
.btn-plans{
text-align: center;
margin-top: 50px;
.pri-btn{
background-color: #b638b6;
border: 1px;
border-radius: 2px;
width: 203px;
height: 35px;
padding: 5px;
font-size: 15px;
margin-left: -56px;
a{
text-decoration: none;
color: #fff;
}
&:hover{
background: #c717c7;
}
}
}
}
.modal-footer{
border: none;
margin-top: 25px;
}
}
\ No newline at end of file
src/app/body/join/join.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-join',
templateUrl: './join.component.html',
......@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core';
})
export class JoinComponent implements OnInit {
constructor() { }
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
}
goto(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
}
src/app/body/login/login.component.html
<div class="m-login">
<div class="row">
<div class="col-md-6">
<div class="m-login-wedding">
<div class="m-login-planning">
<h3>Wedding planning starts here..</h3>
<div class="buttoncls">
<div class="row">
<div class="col-md-5">
<a href="login"> <button class="sig-btn">Login</button></a>
</div>
<div class="col-md-5">
<a href="sigin"><button class="siup-btn">Signup</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="m-login-body">
<div class="m-login-header">
<h3>LOGIN TO STORY PAGE EVENTS</h3>
</div>
<div class="m-login-conent">
<input type="email" placeholder="Email ID">
<input type="password" placeholder="Password">
<div class="btn-m-login">
<button class="btn-login" (click)="goToPage('loginaccount')">Login</button>
</div>
<div class="links">
<div class="row">
<div class="col">
<p> <a href="login">Already a Member?</a> LOG IN</p>
</div>
<div class="col">
<a href="#"> ARE YOU A VENDOR?</a>
</div>
</div>
<div class="frg-pass"><a href="#">Forgot Password</a></div>
</div>
<div class="row">
<div class="col-md-6 setsa">
<div class="m-login-wedding">
<div class="m-login-planning">
<h3>Wedding planning starts here..</h3>
<div class="buttoncls">
<div class="row">
<div class="col log-set">
<a (click)="goto('login')"> <button class="sig-btn">Login</button></a>
</div>
<div class="col">
<a (click)="goto('join')"><button class="siup-btn">Signup</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="m-login-body">
<div class="m-login-header">
<h3>LOGIN TO STORY PAGE EVENTS</h3>
</div>
<div class="m-login-conent">
<input type="email" placeholder="Email ID">
<input type="password" placeholder="Password">
<div class="btn-m-login">
<button class="btn-login">Login</button>
</div>
<div class="links">
<div class="row">
<div class="col">
<p> <a (click)="goto('login')">Already a Member?</a> LOG IN</p>
</div>
<div class="col">
<a href="loginvendors"> ARE YOU A VENDOR?</a>
</div>
</div>
<div class="frg-pass" data-toggle="modal" data-target="#myModal"><a >Forgot Password</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
\ No newline at end of file
<!-- Modal Header -->
<div class="modal-header">
<h4>FORGOT PASSWORD <hr></h4>
</div>
<!-- Modal body -->
<div class="modal-bodyy">
<div class="m-login-modal-input"><input type="email" placeholder="Email ID"></div>
<div class="m-login-modal-btn">
<button class="btn-send">Send Mail</button>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/body/login/login.component.scss
......@@ -5,15 +5,23 @@
}
.m-login {
padding-top: 135px;
.row{
width: 100%;
margin-right: 0px;
margin-left: 0px;
}
.setsa{
width: 50%;
padding-right: 0px;
padding-left: 0px;
height: 655px;
}
.col-md-6{
width: 50%;
padding-right: 0px;
padding-left: 0px;
height: 655px;
}
.m-login-wedding{
text-align: center;
......@@ -39,7 +47,7 @@
color: #fff;
font-weight: 400;
font-size: 16px;
font-size: 17px;
background: #ff9c00;
text-transform: capitalize;
border-radius: 30px;
......@@ -47,7 +55,7 @@
height: 40px;
width:100px;
border: 1px solid #ff9c00;
margin-left: 200px;
margin-left: 230px;
outline: none;
&:hover{
background: transparent;
......@@ -57,7 +65,7 @@
color: #fff;
font-weight: 400;
font-size: 16px;
font-size: 17px;
background:transparent;
text-transform: capitalize;
border-radius: 30px;
......@@ -66,6 +74,7 @@
width:100px;
border:1px solid #fff;
outline: none;
margin-left: -210px;
}
}
......@@ -127,6 +136,7 @@
font-size: 15px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
p{
color: #fff;
......@@ -136,7 +146,76 @@
.frg-pass{
margin-left: 18px;
margin-top: 30px;
cursor: pointer;
}
.member-scn {
margin: 20px 0 0 0;
}
}
/*modal*/
.modal-dialog{
max-width: 600px;
}
.modal-header{
border:none;
h4{
color: #535353;
font-weight: 600;
font-size: 18px;
margin: 0;
}
hr {
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid rgb(255, 0,255);
width: 20px;
margin-left: 0px;
border-radius: 12px;
}
}
.modal-bodyy{
.m-login-modal-input{
input{
border:none;
color: black;
border-bottom: 1px solid #d7d7d7 ;
font-size: 15px;
width: 550px;
outline: none;
background-color: transparent;
&::placeholder{
color:#636c72;
}
}
}
.m-login-modal-btn{
text-align:center;
margin-top: 20px;
.btn-send{
background: #ff9c00;
padding: 7px 30px;
border: 1px solid #ff9c00;
color: #fff;
font-size: 17px;
border-radius: 30px;
outline: none;
}
}
}
.modal-footer{
border: none;
padding: 2rem;
}
}
\ No newline at end of file
src/app/body/loginvendors/loginvendors.component.html 0 → 100644
<div class="m-login">
<div class="row">
<div class="col-md-6">
<div class="m-login-wedding">
<div class="m-login-planning">
<h3>Wedding planning starts here..</h3>
<div class="buttoncls">
<div class="row">
<div class="col">
<a (click)="goto('login')"> <button class="sig-btn">Login</button></a>
</div>
<div class="col">
<a (click)="goto('join')"><button class="siup-btn">Signup</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="m-login-body">
<div class="m-login-header">
<h3>VENDOR LOGIN TO STORY PAGE EVENTS</h3>
</div>
<div class="m-login-conent">
<input type="email" placeholder="Email ID">
<input type="password" placeholder="Password">
<div class="btn-m-login">
<button class="btn-login">Login</button>
</div>
<div class="links">
<div class="row">
<div class="col">
<p> <a (click)="goto('login')">Already a Member?</a> LOG IN</p>
</div>
<div class="col">
<a data-toggle="modal" data-target="#myModal-vendor"> ARE YOU A VENDOR?</a>
</div>
</div>
<div class="frg-pass "><a data-toggle="modal" data-target="#myModal-frg" >Forgot Password</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- The Modal -->
<div class="modal" id="myModal-vendor">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-headers">
<h5>WELCOME TO STORY PAGE
THE BEST PLACE TO POWER YOUR BUSINESS</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label for="sel1">
Select Your Business Category:</label>
<select class="form-control" id="sel1" name="sellist1">
<option>Wedding Photographers</option>
<option>Wedding Venues</option>
<option>Planning</option>
<option>Wedding DJs</option>
<option>Wedding Invitations</option>
<option>Wedding caterers</option>
<option>Wedding Favors & Gifts</option>
<option>Wedding Jewelry</option>
</select>
<label for="sel1">Select Your Region:</label>
<select class="form-control" id="sel1" name="sellist1">
<option>Kollam</option>
<option>Kottayam</option>
<option>Kochi</option>
<option>Bangalore</option>
<option>Chennai</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Karnataka</option>
<option>Thrissur</option>
</select>
<div class="btn-plans">
<button class="pri-btn"> <a href="payment">SEE PLANS & PRICING</a></button>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div></div></div>
<div class="container">
<!-- The Modal -->
<div class="modal" id="myModal-frg">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4>FORGOT PASSWORD <hr></h4>
</div>
<!-- Modal body -->
<div class="modal-bodyy">
<div class="m-login-modal-input"><input type="email" placeholder="Email ID"></div>
<div class="m-login-modal-btn">
<button class="btn-send">Send Mail</button>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/body/loginvendors/loginvendors.component.scss 0 → 100644
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
*{
font-family: 'Roboto', sans-serif;
}
.m-login {
padding-top: 135px;
.row{
width: 100%;
margin-right: 0px;
margin-left: 0px;
}
.col-md-6{
width: 50%;
padding-right: 0px;
padding-left: 0px;
}
.m-login-wedding{
text-align: center;
//width:114%;
height: 100%;
object-fit: cover;
object-position: top;
background: url("../../../assets/img/login-img.png");
background-size: cover;
background-repeat: no-repeat;
h3{
padding-top: 168px;
color:#fff;
font-weight: 400;
font-size: 35px;
width: 73%;
padding-left: 212px;
text-align: center;
}
.buttoncls{
margin-top: 20px;
.sig-btn{
color: #fff;
font-weight: 400;
font-size: 16px;
background: #ff9c00;
text-transform: capitalize;
border-radius: 30px;
box-shadow: none;
height: 40px;
width:100px;
border: 1px solid #ff9c00;
margin-left: 200px;
outline: none;
margin-left: 230px;
&:hover{
background: transparent;
}
}
.siup-btn{
color: #fff;
margin-left: -210px;
font-weight: 400;
font-size: 16px;
background:transparent;
text-transform: capitalize;
border-radius: 30px;
box-shadow: none;
height: 40px;
width:100px;
border:1px solid #fff;
outline: none;
}
}
}
.m-login-body{
background: #b638b6;
height:655px;
padding: 200px 20px 20px 40px;
.m-login-header{
h3{
font-size: 22px;
font-weight: 400;
color: #fff;
}
}
.m-login-conent {
margin-top: 40px;
}
.m-login-conent input{
width: 80%;
background: transparent;
border:none;
border-bottom: 1px solid #ccc;
color:#ffff;
outline: none;
line-height: 4.0;
font-size: 15px;
font-weight: 300;
&::placeholder{
color:white;
}
}
.btn-m-login{
padding-top: 40px;
.btn-login{
color: #5d5a5a;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
background: #fff;
text-transform: capitalize;
border-radius: 30px;
box-shadow: none;
height: 40px;
width:100px;
border:1px;
outline: none;
&:hover{
background: #c717c7;
color:#fff;
}
}
}
}
.links{
margin-top: 70px;
a{
color:#fff;
font-size: 15px;
font-weight: 400;
text-decoration: none;
cursor: pointer;
}
p{
color: #fff;
font-size: 15px;
font-weight: 400;
cursor: pointer;
}
.frg-pass{
margin-left: 18px;
margin-top: 30px;
}
}
}
/*****************Modal-vendor**********************/
.modal-dialog{
max-width: 700px;
}
.modal-content{
padding-left: 51px;
}
.modal-headers{
background: url("../../../assets/img/9.png");
background-repeat: no-repeat;
background-position: center;
padding-bottom: 0px;
margin-top: -45px;
padding-left: 41px;
border: none;
h5{
margin-top: 150px;
text-align: center;
color: #6d6c6c;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
width: 375px;
margin-left: 81px;
}
}
.modal-headers .close {
padding: 1rem 1rem;
margin: -8rem 1rem -1rem auto;
outline:none;
}
.modal-body{
border: none;
outline: none;
margin-left: 81px;
select{
outline: none;
}
.form-control{
margin-top: 10px;
border: none;
outline: none;
border-bottom: 1px solid gray;
padding: 3px;
font-size: 14px;
width:410px;
}
label{
margin-top: 20px;
font-size: 0.8rem;
color: #9e9e9e;
}
option{
color: #c717c7;
outline: none;
}
.btn-plans{
text-align: center;
margin-top: 50px;
.pri-btn{
background-color: #b638b6;
border: 1px;
border-radius: 2px;
width: 203px;
height: 35px;
padding: 5px;
font-size: 15px;
margin-left: -56px;
a{
text-decoration: none;
color: #fff;
}
&:hover{
background: #c717c7;
}
}
}
}
.modal-footer{
border: none;
margin-top: 25px;
}
/*******************************************frg *modal*/
.modal-dialog{
max-width: 700px;
}
.modal-header{
border:none;
padding-left: 0%;
h4{
color: #535353;
font-weight: 600;
font-size: 18px;
margin: 0;
}
hr {
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid rgb(255, 0,255);
width: 20px;
margin-left: 0px;
border-radius: 12px;
}
}
.modal-bodyy{
.m-login-modal-input{
input{
border:none;
color: black;
border-bottom: 1px solid #d7d7d7 ;
font-size: 15px;
width: 550px;
outline: none;
background-color: transparent;
margin-top: 10px;
&::placeholder{
color:#636c72;
}
}
}
.m-login-modal-btn{
text-align:center;
margin-top: 50px;
.btn-send{
background: #ff9c00;
padding: 7px 30px;
border: 1px solid #ff9c00;
color: #fff;
font-size: 17px;
border-radius: 30px;
outline: none;
}
}
}
.modal-footer{
border: none;
padding: 2rem;
}
src/app/body/loginvendors/loginvendors.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginvendorsComponent } from './loginvendors.component';
describe('LoginvendorsComponent', () => {
let component: LoginvendorsComponent;
let fixture: ComponentFixture<LoginvendorsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginvendorsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginvendorsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/body/loginvendors/loginvendors.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-loginvendors',
templateUrl: './loginvendors.component.html',
styleUrls: ['./loginvendors.component.scss']
})
export class LoginvendorsComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
}
goto(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
}
src/app/body/payment/payment.component.html 0 → 100644
<div class="m-payment">
<div class="m-payment_note">
<div class="container">
<div class="m-payment_note_search">
<div class="row">
<div class="col-md-6 ">
<input class="rht-bro" type="text" placeholder="ceremony & Reception Venue Change">
</div>
<div class="col-md-5"> <input type="text" placeholder="North pole,AK"> </div>
<div class="col-md-1"> <button class="btn-edit" ><img src="../../../assets/img/sea.png"></button></div>
</div>
</div>
</div>
</div>
<div class="m-payment_table">
<div class="container">
<div class="m-payment_table_header">
<h5>PLANS & PRICING</h5>
<p>Rates based on your selections</p>
</div>
<table class="table ">
<thead>
<tr >
<th class="m_table_color-head">LITE</th>
<th class="m_table_color-head">PROFESSIONAL</th>
<th class="m_table_color-head"> FEATURED AD</th>
<th class="m_table_color-head">SPOTLIGHT AD</th>
</tr>
</thead>
<tbody>
<tr >
<td ><div class="fst-colm">0</div> <button class="btn-pay-select">Select</button></td>
<td ><div class="fst-colm">2000</div> <button class="btn-pay-select">Select</button></td>
<td><div class="fst-colm">3000</div> <button class="btn-pay-select">Select</button></td>
<td ><div class="fst-colm">4000</div> <button class="btn-pay-select">Select</button></td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Advertising</td>
<td class="m-pay-table-fstpart">Advertising</td>
<td class="m-pay-table-fstpart">Advertising</td>
<td class="m-pay-table-fstpart">Advertising</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Marketing</td>
<td class="m-pay-table-fstpart">Marketing</td>
<td class="m-pay-table-fstpart">Marketing</td>
<td class="m-pay-table-fstpart">Marketing</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Sales</td>
<td class="m-pay-table-fstpart">Sales</td>
<td class="m-pay-table-fstpart">Sales</td>
<td class="m-pay-table-fstpart">Sales</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Site</td>
<td class="m-pay-table-fstpart">Site</td>
<td class="m-pay-table-fstpart">Site</td>
<td class="m-pay-table-fstpart">Site</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Reputation</td>
<td class="m-pay-table-fstpart">Reputation</td>
<td class="m-pay-table-fstpart">Reputation</td>
<td class="m-pay-table-fstpart">Reputation</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
</tr>
<tr>
<td class="m-pay-table-scndpart"></td>
<td class="m-pay-table-scndpart"></td>
<td class="m-pay-table-scndpart">Contact Form + Inquiry</td>
<td class="m-pay-table-scndpart">Unlimited free Advertising</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Networking</td>
<td class="m-pay-table-fstpart">Networking</td>
<td class="m-pay-table-fstpart">Networking</td>
<td class="m-pay-table-fstpart">Networking</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
</tr>
<tr>
<td class="m-pay-table-fstpart">Support Features</td>
<td class="m-pay-table-fstpart">Support Features</td>
<td class="m-pay-table-fstpart">Support Features</td>
<td class="m-pay-table-fstpart">Support Features</td>
</tr>
<tr>
<td class="m-pay-table-scndpart">8iyuiy</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">NO</td>
<td class="m-pay-table-scndpart">8iyuiy</td>
</tr>
<tr >
<th class="m_table_color-head">LITE</th>
<th class="m_table_color-head">PROFESSIONAL</th>
<th class="m_table_color-head"> FEATURED AD</th>
<th class="m_table_color-head">SPOTLIGHT AD</th>
</tr>
<tr >
<td ><div class="fst-colm">0</div> <button class="btn-pay-select">Select</button></td>
<td ><div class="fst-colm">2000</div> <button class="btn-pay-select">Select</button></td>
<td><div class="fst-colm">3000</div> <button class="btn-pay-select">Select</button></td>
<td ><div class="fst-colm">4000</div> <button class="btn-pay-select">Select</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
src/app/body/payment/payment.component.scss 0 → 100644
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
*{
font-family: 'Roboto', sans-serif;
}
.m-payment{
padding-top: 135px;
.m-payment_note{
background: #fdfdea;
.container{
padding-bottom: 10px;
padding-top: 80px;
.m-payment_note_search
{
background: #fff;
text-align: center;
border: 1px solid #d0d0d0;
border-radius: 30px;
height: 60px;
.row{
.col-md-6{
input{
width: 100%;
padding: 11px;
border: none;
background: transparent;
font-size: 15px;
outline: none;
&::placeholder{
color: #d0d0d0;
}
}
.rht-bro{
border-right: 1px solid #c717c7;
margin-top: 7px;
}
}
.col-md-5{
padding-left: 0px;
input{
width: 100%;
padding: 11px;
border: none;
background: transparent;
font-size: 15px;
outline: none;
margin-top: 7px;
&::placeholder{
color: #d0d0d0;
}
}
}
.col-md-1{
.btn-edit{
width: 100%;
padding: 8px;
border: none;
background: transparent;
font-size: 15px;
outline: none;
border-radius: 22px;
height: 50px;
}
}
}
}
}
}
.m-payment_table{
margin-top: 20px;
.container{
.m-payment_table_header{
h5{
color: #515151;
font-weight: 600;
font-size: 21px;
text-transform: uppercase;
margin: 5px 0;
padding: 20px 0 0 0;
}
p{
font-weight: 400;
font-size: 15px;
margin: 0 0 20px 0;
}
}
.table{
thead{
text-align: center;
.m_table_color-head{
background-color: #8b8b8b;
color: #fff;
font-weight: 400;
font-size: 16px;
padding: 15px;
}
th{
border-right: 2px solid white;
border-bottom:none;
}
}
tbody{
tr{
text-align: center;
.m_table_color-head{
background-color: #8b8b8b;
color: #fff;
font-weight: 400;
font-size: 16px;
padding: 15px;
border-right: 2px solid white;
border-bottom:2px solid white;
}
.fst-colm{
color: red;
text-align: center;
font-weight: 600;
font-size: 18px;
margin-bottom: 15px;
}
td{
.btn-pay-select{
color: #fefef5;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
background: #ffa311;
border: 1px solid #ffa311;
padding: 5px 20px;
border-radius: 30px;
outline: none;
margin-bottom: 10px;
&:hover{
background: transparent;
color:black;
}
}
}
.m-pay-table-fstpart{
color: #7d7d7d;
font-weight: 600;
font-size: 16px;
background-color: #dfdfdf;
margin: 2px 0;
text-align: center;
padding: 15px 10px;
border-right: 2px solid white;
border-bottom:2px solid white;
}
.m-pay-table-scndpart{
color: #616161;
font-weight: 400;
font-size: 14px;
background-color: #f2f2f2;
margin: 2px 0;
padding: 10px;
text-align: center;
border-right: 2px solid white;
border-bottom:4px solid white;
}
}
}
}
}
}
}
src/app/body/payment/payment.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PaymentComponent } from './payment.component';
describe('PaymentComponent', () => {
let component: PaymentComponent;
let fixture: ComponentFixture<PaymentComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PaymentComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PaymentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/body/payment/payment.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.scss']
})
export class PaymentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
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