How to make site like Amazon in html and css - Softtalks

Search This Blog

Featured Post

Should you use React Native to build your startup’s mobile app?

Should you use React Native to build your startup’s mobile app? Flexible application improvement is a jumbled system. It requires ...

Tuesday, January 12, 2021

How to make site like Amazon in html and css

How to make  site like  Amazon in HTML and css

Index.html

amazon



<!DOCTYPE html>
<html>
<head>
<title>Amazon Book Store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style-index-page.css" rel="stylesheet" >
<!--I included this css font awesome just to show icons like amazon icon ,register icon ,login icon this is for icons nothing else doing in any of the part of my assignment .I have used it just to make more beautifully it I hope it will not affect my marks in negative way thanks. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="left-icon">
<div class="article-container">
<article></article>
<article></article>
<article></article>
</div>
</div>
<div class="left-logo">
<i class="fa fa-amazon left-color">mazon Book<p class="Book">Sotre</p></i>
</div>
<div class="search-box">
<div class="topnav">
<div class="search-container">
<form action="#">
<a type="submit" href="#">All</a>
<input type="text" placeholder="Search book.." name="search">
<button type="submit"><i class="fa fa-search " ></i></button>
</form>
</div>
</div>
</div>
<div class="box1">
<a class="fa fa-registered" href="register.html" style="text-decoration: none; color: white">Register</a>
</div>
<div class="box2">
<a style="text-decoration: none; color: white" href="Login.html" class="fa fa-address-card">login</a>
</div>
<div class="box3">
<a href="shopping cart.html" style="text-decoration: none; color: white" class="fa fa-shopping-cart">Shopping Cart</a>
</div>
</div>
<div class="navbar">
<i class="fa fa-location" >Deliver to Pakistan</i>
<a href="index.html">Home</a>
<a href="Book Catalog.html">Books Cataglog</a>
<a href="Payment by credit card.html">Payment By Credit Card</a>
<a href="order comfirm.html">Order Confirmation</a>
<a href="Book info.html">Book Information</a>
<a href="User profile.html">User Profile</a>
</div>


<div id="slider1">
<figure>
<img src="img/slider/2.jpg" alt>
<img src="img/slider/3 (2).png" alt>

<img src="img/slider/4 (2).png" alt>
<img src="img/slider/1.jpg" alt>
<img src="img/slider/6.jpg" alt>

</figure>
</div>

<div class="main-row">
<section class="row-1-box1">
<h1>Shop by Category</h1>
<div class="child-container">
<div class="child-box1">
<img src="img/Books/catagery Books/prime.jpg" alt="prime" >
</div>
<div class="child-box2">
<img src="img/Books/catagery Books/girls.jpg" alt="girls" >
</div>
</div>
<div class="child-container">
<div class="child-box1">
<img src="img/Books/catagery Books/sleeping.jpg" alt="sleeping" >
</div>
<div class="child-box2">
<img src="img/Books/catagery Books/revie.jpg" alt="review" >
</div>
</div>
<div class="child-container">
<a role="button" class="shop-now-btn" href="#">Shope Now</a>
</div>
</section>
<section class="row-1-box2">
<h1>Amazon Book Sotre Basics</h1>
<img src="img/Books/basic.jpg" alt="basic" width="80%" height="200px">
<div class="child-container">
<a role="button" class="shop-now-btn" href="#">Explore</a>
</div>
</section>
<section class="row-1-box3">
<h1>Amazon Book Store DVD Books</h1>
<img src="img/Books/dvd.jpg" alt="dvs" width="80%" height="200px" style="margin-top: -20px">
<div class="child-container">
<a role="button" class="shop-now-btn" href="#">Explore</a>
</div>
</section>
<section class="row-1-box4">
<h3>Amazon Book Store Sign in for the best Experience </h3>
<div class="child-container">
<a role="button" class="shop-now-btn" href="#" style="width: 200px;">Sign in Securely</a>
</div>
</section>
</div>
<h1 style="text-align: justify; margin-left: 15px;">Discover Amazon Book Store</h1>
<div class="container">
<div id="slides">
<input checked type="radio" name="slider" id="slide1" class="set" />
<input type="radio" name="slider" id="slide2" class="set" />
<input type="radio" name="slider" id="slide3" class="set" />
<input type="radio" name="slider" id="slide4" class="set" />
<div class="mask">
<div class="overflow">
<div class="slide">
<img src="img/Feetures images/8-l.png" alt="langaues">
<img src="img/Feetures images/60+.jpg" alt="currencoies">
<img src="img/Feetures images/payment.jpg" alt="payments">
<img src="img/Feetures images/fee.jpg" alt="fees">
<img src="img/Feetures images/tack.jpg" alt="traking">
<img src="img/Feetures images/247.jpg" alt="cutomers">
</div>
<div class="slide">
<img src="img/Feetures images/8-l.png" alt="langaues">
<img src="img/Feetures images/60+.jpg" alt="currencoies">
<img src="img/Feetures images/payment.jpg" alt="payments">
<img src="img/Feetures images/fee.jpg" alt="fees">
<img src="img/Feetures images/tack.jpg" alt="traking">
<img src="img/Feetures images/247.jpg" alt="cutomers">
</div>
<div class="slide">
<img src="img/Feetures images/8-l.png" alt="langaues">
<img src="img/Feetures images/60+.jpg" alt="currencoies">
<img src="img/Feetures images/payment.jpg" alt="payments">
<img src="img/Feetures images/fee.jpg" alt="fees">
<img src="img/Feetures images/tack.jpg" alt="traking">
<img src="img/Feetures images/247.jpg" alt="cutomers">
</div>
<div class="slide">
<img src="img/Feetures images/8-l.png" alt="langaues">
<img src="img/Feetures images/60+.jpg" alt="currencoies">
<img src="img/Feetures images/payment.jpg" alt="payments">
<img src="img/Feetures images/fee.jpg" alt="fees">
<img src="img/Feetures images/tack.jpg" alt="traking">
<img src="img/Feetures images/247.jpg" alt="cutomers">
</div>
</div>
</div>

<div id="controls" onclick="">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
</div>
<h1 style="text-align: justify; margin-left: 15px;">Discover Amazon Book Store</h1>


<!-- Footer -->
<div class="footer">
<div class="footer-container">
<div class="footer-box1">
<ul>
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">personal</a></li>
<li><a href="#">affiliate</a></li>
<li><a href="#">Banking Payments</a></li>
</ul>
</div>
<div class="footer-box2">
<ul>
<li><a href="#">Soter and COVID-19</a></li>
<li><a href="#">Discounts</a></li>
<li><a href="#">Purchase rate</a></li>
<li><a href="#">affiliate</a></li>
<li><a href="#">Banking Payments</a></li>
</ul>
</div>
<div class="footer-box3">
<ul>
<li><a href="#">Bussinuss</a></li>
<li><a href="#">payment card</a></li>
<li><a href="#">Secure Banking</a></li>
<li><a href="#">affiliate</a></li>
<li><a href="#">Banking Payments</a></li>
</ul>
</div>
<div class="footer-box4">
<ul>
<li><a href="#">Make Money with us</a></li>
<li><a href="#">Sell on our store</a></li>
<li><a href="#">personal</a></li>
<li><a href="#">affiliate</a></li>
<li><a href="#">Banking Payments</a></li>
</ul>
</div>
<i class="fa fa-amazon" style="color: white;margin-left: 100px; margin-top: 210px;margin-right: 10px;">mazon Book Store</i>
<a href="#" class="footer-button">English</a>
<a href="#" class="footer-button">US-US dollars</a>
<a href="#" class="footer-button">United States</a>


</div>
</div>

</body>
</html>

Dowonload




No comments:

Post a Comment