HTML R

about css:
.about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2rem;
}
.about .image {
-webkit-box-flex: 1;
-ms-flex: 1 1 30rem;
flex: 1 1 30rem;
}
.about .image img {

width: 100%;
}
.about .content {
-webkit-box-flex: 1;
-ms-flex: 1 1 40rem;
flex: 1 1 40rem;
}
.about .content span {

font-size: 1.5rem;
color: #779;
}
.about .content h3 {
font-size: 1.5rem;
color: #244d4d;
padding-top: 1rem;
}
.about .content p {
font-size: 1.2rem;
color: #779;
padding: 1rem 0;
line-height: 1.5;
}
About.html:
<section class="heading">
<h3 class="text-center">About Us</h3>
</section>
<section class="about">
<div class="image">
<img src="../../assets/image/about.jpg" alt="">
</div>
<div class="content">
<span>Welcome to our shop</span>
<h3>We make your home more astonishing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam officiis,
reiciendis veniam incidunt architecto quam velit dolorum exercitationem cum aliquam
ab quas dicta dolores ad earum quasis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
adipisci totam, nam voluptates quis delectus. Ea quo repudiandae.</p>
<a href="#" class="btn btn-success">read more</a>
</div>
</section>
Home.css:
.home img{
width: 100%;
height: 500px;
object-position: center;
object-fit: cover;
}
.homecontent{
position: absolute;
top:70%;
left: 50%;
transform: translate(-60%,-60%);
}
.homecontent h2{
color: black;
font-size: 30px;
}
.homecontent a{
margin-top: 10px;
}
@media screen and (max-width: 600px)

{
.home img
{
height: 600px;
}
.homecontent h2
{
font-size: 28px;
}
}
Home.html:
<section class="home">
<img src="../../assets/image/bannner.jpeg">
<div class="homecontent">
<h2>simplicity is the ultimate<br>sophistication</h2>
<a href="#" class="btn btn-lg btn-secondary">Shop Now....</a>
</div>
</section>
Products.html with css:
<div class="body">
<div class="row">
<div class="col col-12 col-md-6 col-lg-3 p-5" *ngFor="let prod of products,
index as i">
<div class="card" style="width: 18rem;">
<img class="card-img-top" [src]="prod.picturePath" style="width:
286px; height: 180px;">
<div class="card-body">
<h5 class="card-title">{{prod.name | titlecase}}</h5>
<p class="card-text">{{prod.description}}</p>
<p class="card-text">{{prod.price | currency: 'RUB': "symbol-
narrow": "1.2-2"}}</p>
<button class="btn btn-primary" (click)="addToCart(i)"
*ngIf="add !== i">Add To cart</button>
<div *ngIf="add === i">
<input type="number" class="form-control"
placeholder="Amount" #amount min="0"/>
<button class="btn btn-primary"
(click)="buy(amount.value)">Buy Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
New Arrivals.html:
<div class="container">
<h2 class="font-weight-bold mb-2 text-center">New Products</h2>
<div class="row">
<div class="col-md-4">
<div class="category mb-10">

<div class="htcatthumb">
<a href="#">
<img src="../../assets/image/new1.jpg"
alt="product images">
</a>
</div>
<div class="frhoverinfo">
<ul class="productaction">
<li><a href=""><i class="fa fa-
heart"></i></a></li>
<li><a href="#"><i class="fa fa-

shopping-bag"></i></a></li>

share"></i></a></li>
</ul>
</div>
<div class="frproductinner innerposition">
<h4><a href="">Simple Dining Table</a></h4>
<ul class="frproprize text-left ml-text">
<li class="oldprize">$399</li>
</ul>
<ul class="rating">
<li><i class="fa fa-star"></i></li>
</ul>
</div>
</div>
</div>

<a href="#">
</a>
</div>


</ul>
</div>
<h4><a href="">Appartment Dining
Table</a></h4>
</ul>
<ul class="rating">
</ul>
</div>
</div>
</div>

<a href="#">
</a>
</div>


</ul>
</div>
<h4><a href="">Home Dining Table</a></h4>
</ul>
<ul class="rating">
</ul>
</div>
</div>
</div>

<a href="#">
</a>
</div>


</ul>
</div>
<h4><a href="">Home wall cabinet</a></h4>
</ul>
<ul class="rating">
</ul>
</div>
</div>
</div>

<a href="#">
</a>
</div>


</ul>
</div>
<h4><a href="">Office Chair
Furniture</a></h4>
</ul>
<ul class="rating">
</ul>
</div>
</div>
</div>

<a href="#">
</a>
</div>


</ul>
</div>
<h4><a href="">Luxury Arm Chair</a></h4>
</ul>
<ul class="rating">
</ul>
</div>
</div>
</div>
</div>
</div>
New Arrivals.css:
.category {
overflow: hidden;
position: relative;
border: 1px solid #F84C24;
}
.container{
margin-top: 50px;
margin-bottom: 50px;
}
a, .btn {
transition: all 0.3s ease-out 0s;
a {
color: #333;
text-decoration: none !important;
}
h4{
margin-bottom: 0px !important;
}
.mb-10{
margin-bottom: 10px;
}
.htcatthumb a img {
width: 100%;
}
p + img, img:last-child {
margin-bottom: 0;
}
.frhoverinfo {
position: absolute;
right: 20px;
top: 20px;
}
.productaction {
display: flex;
justify-content: center;
flex-flow: column;
}
.ml-text{
margin-left: -44px;
}
ul, ol {
list-style: none;
}
.productaction li:nth-child(1) {
opacity: 0;
transition: opacity 300ms linear 0s;
}
opacity: 0;
}
opacity: 0;
}
.productaction li {
margin: 0;
margin-bottom: 2px;
}
.productaction li a {
background: #fefefe none repeat scroll 0 0;
display: inline-block;
height: 50px;
line-height: 60px;
text-align: center;
transition: all 0.4s ease 0s;
width: 50px;
}
.productaction li a i {
color: #F84C24;
font-size: 18px;
}
.category:hover .productaction li:nth-child(1) {

-webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInRight;
animation: 300ms ease-in-out 0s normal none 1 running fadeInRight;
opacity: 1;
}

opacity: 1;
}

opacity: 1;
}
.category:hover .frproductinner.innerposition {
bottom: 0;
opacity: 1;
}
.frproductinner.innerposition {
background: #fff none repeat scroll 0 0;
bottom: -20px;
left: 0;
opacity: 0;
padding: 30px 20px;
position: absolute;
text-align: left;
width: 100%;
}
.frproductinner h4 a {
color: #F84C24;
font-family: Old Standard TT;
font-size: 17px;
font-weight: 600;
text-transform: capitalize;
}
.innerposition .frproprize {
float: left;
justify-content: flex-start;
}
.frproprize {
display: flex;
justify-content: center;
margin-top: 6px;
}
.frproprize li {
color: black;
font-family: Poppins;
font-size: 16px;
font-weight: 500;
margin: 0 5px;
}
.innerposition .frproprize {
margin-top: 0;
}
.innerposition .rating {
display: flex;
float: right;
}
.rating li i{
color:#025E73;
Cart.html with css
<br/>
<table class="table table-striped table-bordered table-primary">
<thead class="bg-primary text-white">
<td>Product name</td>
<td>Product price</td>
<td>Product amount</td>
<td>Total</td>
<td>Options</td>
</thead>
<tbody>
<tr *ngFor="let product of shoppingCart; index as i">
<td>{{product.name}}</td>
<td>{{product.price | currency: 'RUB': "symbol-narrow": "1.2-2"}}</td>
<td>
<input type="number" [(ngModel)]="product.amount" min="0"/>
</td>
<td>{{product.price * product.amount | currency: 'RUB': "symbol-
narrow": "1.2-2"}}</td>
<td>
<button class="btn btn-success text-white" style="margin: 7px;"
(click)="updateCart(i)">Save changes</button>
<button class="btn btn-secondary"
(click)="deleteCart(i)">Delete</button>
</td>
</tr>
<tr>
<td class="text-right" colspan="3">Total</td>
<td>{{cartPrice | currency: 'RUB': "symbol-narrow": "1.2-2"}}</td>
<td>
<button class="btn btn-primary text-white" (click)="sendToOrder()"
[disabled]="len === 0">Send to a new order</button>
</td>
</tr>
</tbody>
</table>
Navbar.css:
.navbar{
background-color:wheat;
}
.navbar-light .navbar-nav .nav-item{
color: #000000;
font-size: 18px;
}
.navbar-light .navbar-nav .nav-link:hover{
color:#E71E00;
}
Navbar.html:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:

lavender;">
<a routerLink="" class="navbar-brand">Furnitures Website</a>
<button class="navbar-toggler" (click)="toggleNavBar()" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [class.show]="isOpen" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/home" routerLinkActive="Active"><i
class="fa fa-home" aria-hidden="true"></i>Home</a>
</li>
<a class="nav-link" routerLink="/about"
routerLinkActive="Active"><i class="fa fa-user" aria-hidden="true"></i>About</a>
</li>
<a class="nav-link" routerLink="/newarrivals"
routerLinkActive="Active"><i class="fa fa-plane" aria-hidden="true"></i>New
Arrivals</a>
</li>
<a class="nav-link" routerLink="/products-admin"
routerLinkActive="Active" *ngIf="isAdmin">Products change</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/orders-admin"
routerLinkActive="Active" *ngIf="isAdmin">Orders change</a>
</li>
<a class="nav-link" routerLink="/products"
routerLinkActive="Active" *ngIf="isUser && !isAdmin"><i class="fa fa-product-hunt"
aria-hidden="true"></i>Products</a>
</li>
<a class="nav-link" routerLink="/ourteam" routerLinkActive="Active"><i
class="fa fa-handshake-o" aria-hidden="true"></i>Our Team</a>
</li>
<a class="nav-link" routerLink="/cart" routerLinkActive="Active"
*ngIf="isUser && !isAdmin"><i class="fa fa-shopping-cart"
aria-hidden="true"></i>Cart</a>
</li>
<a class="nav-link" routerLink="/orders" routerLinkActive="Active"
*ngIf="isUser && !isAdmin"><i class="fa fa-first-order"
aria-hidden="true"></i>Orders</a>
</li>

<a class="nav-link" routerLink="/login" routerLinkActive="Active"
*ngIf="!isUser"><i class="fa fa-user-circle" aria-hidden="true"></i>Login</a>
</li>
<a class="nav-link" routerLink="/signup" routerLinkActive="Active"
*ngIf="!isUser"><i class="fa fa-sign-in" aria-hidden="true"></i>Sign Up</a>
</li>
<a class="nav-link" style="text-overflow: clip;"
routerLink="/logout" routerLinkActive="Active" (click)="logout()"
*ngIf="isUser"><i class="fa fa-lock" aria-hidden="true"></i>Logout</a>
</li>
</ul>
</div>
</nav>
Footer.html:
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="home"><i class="fa fa-home" aria-hidden="true"></i>home</a>
<a href="about"><i class="fa fa-shopping-cart"
aria-hidden="true"></i>about</a>
<a href="newarrivals"><i class="fa fa-plane"
aria-hidden="true"></i>newarrivals</a>
<a href="products"><i class="fa fa-user"
aria-hidden="true"></i>products</a>
<a href="ourteam"><i class="fa fa-handshake-o"
aria-hidden="true"></i>ourteam</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#"> <i class="fa fa-first-order" aria-hidden="true"></i> my
order</a>
<a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> my
wishlist</a>
<a href="#"> <i class="fa fa-user" aria-hidden="true"></i> my
account</a>
<a href="#"> <i class="fa fa-star" aria-hidden="true"></i>my
favorite</a>
<a href="#"> <i class="fa fa-handshake-o" aria-hidden="true"></i> terms
of user</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="https://www.facebook.com/getting_started/"> <i class="fa fa-
facebook-f"></i> facebook</a>
<a href="https://twitter.com/home/"> <i class="fa fa-twitter-
square"></i> twitter</a>
<a href="https://www.instagram.com/"> <i class="fa fa-instagram"></i>
instagram</a>
<a href="https://www.linkedin.com/feed/"> <i class="fa
fa-linkedin"></i> linkedin</a>
<a href="https://in.pinterest.com/pin/1055812706365077993/"> <i
class="fa fa-pinterest"></i> pinterest</a>
</div>
<div class="box">
<h3>newsletter</h3>
<p>Subscribe for latest updates</p>
<form action="">
<input type="email" name="" placeholder="enter your email" id="">
<input type="submit" value="subscribe" class="btn">
</form>
</div>
</div>
</section>
<section class="credit">
created by ms. Divya | all rights reserved!
</section>
Footer.css:
.footer {
background: lavender;
}
.footer .box-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(20rem, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.0rem;
}
.footer .box-container .box h3 {

font-size: 1.4rem;
color: #025E73;
padding: 1rem 0;
}
.footer .box-container .box p {

font-size: 1.3rem;
color: #777;
padding-bottom: 1rem;
}
.footer .box-container .box a {

font-size: 1.4rem;
color: #F84C24;
padding: 1rem 0;
display: block;
}
.footer .box-container .box a:hover {

color: #025E73;
}
.footer .box-container .box a:hover i {

padding-right: 1rem;
}
.footer .box-container .box a i {

padding-right: .4rem;
color: #025E73;
}
.footer .box-container .box form input[type="email"] {

width: 90%;
padding: 1rem 1.1rem;
font-size: 1.4rem;
color: #025E73;
text-transform: none;
margin: .4rem 0;
border: 0.1rem solid #025E73;
}
.credit {
text-align: center;
font-size: 1.5rem;
color: #fff;
background: #025E73;
}
Admin.html with css:
<div>
<h3 class="text-center">Add new product</h3>
<br/>
<form #f="ngForm" (ngSubmit)="f.resetForm(addNewProduct(f))">
<input type="text" class="form-control" name="name" ngModel
placeholder="Put product name" required/>
<br/>
<input type="number" class="form-control" name="price" ngModel
placeholder="Put price" required min="0"/>
<br/>
<input type="text" class="form-control" name="description" ngModel
placeholder="Put description if you need it"/>
<br/>
<input type="file" class="form-control" name="image" ngModel required
#image/>
<br/>
<button type="submit" value="add" class="btn btn-success"
[disabled]="f.invalid">Save</button>
</form>
<br/>
<br/>
<h3 class="text-center">Update/delete products</h3>
<table class="table table-striped table-bordered table-primary">
<thead class="bg-primary text-white">
<td>Product name</td>
<td>Product price</td>
<td>Product description</td>
<td>Options</td>
</thead>
<tbody>
<tr *ngFor="let product of productsArray; index as i">
<td>
<input class="form-control" name="name"
[(ngModel)]="product.name"/>
</td>
<td>
<input type="number" class="form-control" name="price"
[(ngModel)]="product.price" min="0"/>
</td>
<td>
<input class="form-control" name="description"
[(ngModel)]="product.description"/>
</td>
<td>
<button class="btn btn-success text-white" style="margin:
7px;" (click)="updateProduct(i)">Save changes</button>
<button class="btn btn-secondary"
(click)="deleteProduct(i)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>

HTML R

Uploaded by

Copyright:

Available Formats

You might also like

HTML R

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML R

Uploaded by

Copyright:

Available Formats

about css:

.about .image img {

.about .content span {

@media screen and (max-width: 600px)

Products.html with css:

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

<div class="category mb-10">

<li><a href="#"><i class="fa fa-

<li><a href="#"><i class="fa fa-

.category:hover .productaction li:nth-child(1) {

.category:hover .productaction li:nth-child(2) {

.category:hover .productaction li:nth-child(3) {

Cart.html with css

<nav class="navbar navbar-expand-lg navbar-light" style="background-color:

<li class="nav-item active">

.footer .box-container .box h3 {

.footer .box-container .box p {

.footer .box-container .box a {

.footer .box-container .box a:hover {

.footer .box-container .box a:hover i {

.footer .box-container .box a i {

.footer .box-container .box form input[type="email"] {

Admin.html with css:

You might also like