Notes

import React from 'react';
import './Home.css';

function Home() {
const navigationLinks = [
{ text: 'Home', link: '#' },
{ text: 'Book categories', link: '#' },
{ text: 'Notifications', link: '#' },
{ text: 'Contact Us', link: '#' },
{ text: 'Login/Signup', link: '#' },
];

function topFunction() {
window.scrollTo(0, 0);
}


css home
body {
display: flex;
flex-direction: column;
margin: 0;
}

.nav {
display: flex;
background: rgb(207, 102, 102);
align-items: center;
height: 70px;
padding: 0 20px;
}

.book {
margin-left: 20px;
margin-right: auto;
font-style: normal;
font-weight: normal;
font-size: 25px;
line-height: 20px;
align-items: center;
text-align: center;
color: #000000;
}

.cart {
margin-right: 20px;
font-family: Righteous;
font-size: 35px;
text-align: center;
color: #000000;
}

.cart:hover {
color: rgb(44, 44, 44);
}

.nav2 {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background: black;
color: white;
margin-top: 0;
padding: 15px;
font-size: 20px;
text-align: center;
line-height: 100%;
margin-bottom: 20px;
}

.navContent {
margin-left: 20px;
margin-right: 20px;
}

.nav_a {
color: white;
margin-left: 20px;
}

.nav_a:hover {
color: lightcoral;
}

.top {
background: black;
color: white;
font-family: sans-serif;
line-height: 40px;
font-size: 20px;
text-align: center;
outline: none;
width: 100%;
border: none;
margin-top: 20px;
border-radius: 0;
}

.top:hover {
background: rgb(44, 44, 44);
}

.info {
background: grey;
padding: 20px;
}

input {
font-size: 14px;
height: 20px;
width: auto;
color: #696e79;
box-sizing: content-box;
padding: 10px;
margin-left: 60px;
border: 1px solid #f5f5f6;
border-radius: 50px 0 0 50px;
outline: none;
}

.go {
height: 20px;
margin-right: 60px;
border: none;
box-sizing: content-box;
font-weight: bold;
background: #000000;
color: white;
font-family: sans-serif;
outline: none;
border-radius: 0 50px 50px 0;
padding: 10px;
}

.go:hover {
background: rgb(44, 44, 44);
}

.footer {
width: 170px;
list-style-type: none;
}

.foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style-type: none;
padding: 0;
margin: 0;
font-family: sans-serif;
}

.connect {
background: darkgray;
text-align: center;
font-family: sans-serif;
padding: 20px;
font-size: 20px;
}

.showingProducts {
font-family: sans-serif;
padding: 10px;
padding-top: 0;
font-size: 20px;
margin-left: 30px;
color: rgb(151, 151, 151);
}

.stock {
font-size: 20px;
color: grey;
text-align: left;
padding: 10px;
width: 100%;
}

.nav3 {
display: flex;
justify-content: space-between;
align-items: center;
}

.productpage1 {
width: 50%;
}

.productpage {
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
}

.p1_1 {
height: 500px;
width: 500px;
margin: 20px;
margin-bottom: 0;
border-radius: 50px;
}

.p1_2 {
height: 100px;
width: 100px;
margin: 10px;
border-radius: 20px;
transition: 0.2s ease;
}

.p1_2:hover {
opacity: 0.3;
}

.p1_3 {
height: 100px;
width: 100px;
border-radius: 20px;
margin: 10px;
transition: 0.2s ease;
}

.p1_3:hover {
opacity: 0.3;
}

.minipro {
display: flex;
align-items: center;
margin: 10px;
}

p {
font-family: sans-serif;
}

.final {
display: flex;
align-items: center;
background-color: rgb(238, 238, 238);
margin: 30px;
margin-bottom: 10px;
margin-top: 10px;
}

.description {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
width: 50%;
margin-right: 20px;
}

.exclusive {
font-weight: bold;
font-family: sans-serif;
font-size: 75px;
margin: 10px;
}

.check {
margin: 10px;
font-size: 30px;
}

.shopnow {
font-family: sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
background: rgb(226, 120, 120);
border-radius: 10px;
padding: 20px;
border: none;
font-size: x-large;
outline: none;
margin: 10px;
margin-top: 20px;
font-size: 45px;
}

.shopnow:hover {
background: lightpink;
}

.header1 {
margin-left: 20px;
padding: 50px;
}

.imgpng {
height: 700px;
width: 800px;
}

return (
<div className="container">
<nav className="nav">
<div className="book">BOOKHIVE</div>
<form action="https://www.google.com/search" method="GET">
<input type="text" name="q" placeholder="search" />
<button className="go" type="submit" value="gsearch">
GO
</button>
</form>
<a className="cart" href="cart.html">
cart
</a>
</nav>
<div className="nav2">
{navigationLinks.map((link, index) => (
<div className="navContent" key={index}>
<a className="nav_a" href={link.link}>
{link.text}
</a>
</div>
))}
</div>
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="carousel-item active">
<img className="d-block w-100" src="image-url-1" alt="First slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="image-url-2" alt="Second slide" />
</div>
<div className="carousel-item">
<img className="d-block w-100" src="image-url-3" alt="Third slide" />
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role-="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
<div className="topButton">
<button className="top" onClick={topFunction}>
Back to top
</button>
</div>
<div className="row product-row">
<div className="col-sm-4">
<div className="card product-card">
<img className="card-img-top" src="product-image-url-1" alt="Product 1" />
<div className="card-body">
<h5 className="card-title">Product Title 1</h5>
<p className="card-text">Product description for product 1.</p>
<a href="#" className="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div className="col-sm-4">
<div className="card product-card">
<img className="card-img-top" src="product-image-url-2" alt="Product 2" />
<div className="card-body">
<h5 className="card-title">Product Title 2</h5>
<p className="card-text">Product description for product 2.</p>
<a href="#" className="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div className="col-sm-4">
<div className="card product-card">
<img className="card-img-top" src="product-image-url-3" alt="Product 3" />
<div className="card-body">
<h5 className="card-title">Product Title 3</h5>
<p className="card-text">Product description for product 3.</p>
<a href="#" className="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
<div className="info">
<div className="foot">
<ul className="footer">
<li>
<b>Mail us:</b>
</li>
<li>[email protected]</li>
</ul>
<ul className="footer">
<li>
<b>Careers:</b>
</li>
<li>Information about careers.</li>
</ul>
<ul className="footer">
<li>
<b>Policy:</b>
</li>
<li>Our policy is very heretically banal with profound but fastidious pointers. So do not be polemical about it.</li>
</ul>
<ul className="footer">
<li>
<b>Owners:</b>
</li>
<li>Alok</li>
<li>Ahesh</li>
<li>Aditi</li>
<li>A prasad</li>
<li>Aditya</li>
</ul>
<ul className="footer">
<li>© 2023, bookhive.com, Inc. or its affiliates</li>
</ul>
</div>
</div>
<div className="connect">connect with us</div>
<div className="iconAlign">
<a href="https://www.instagram.com/your-instagram-profile">
<img src="instagram-icon.png" className="icon" alt="Instagram" />
</a>
<a href="https://www.facebook.com/your-facebook-profile">
<img src="facebook-icon.png" className="icon" alt="Facebook" />
</a>
<a href="https://twitter.com/your-twitter-profile">
<img src="twitter-icon.png" className="icon" alt="Twitter" />
</a>
</div>
</div>
);
}

export default Home;