Scribd
Upload
4 views

Assesment Web Dev

The document is an HTML template for a web development assessment featuring a responsive layout using Bootstrap. It includes a navigation bar, a carousel for images, product cards for items on sale, and pagination for navigation. Additionally, there is a promotional section at the bottom offering a discount for sign-ups.

Uploaded by

singlalakshay212
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Assesment Web Dev

The document is an HTML template for a web development assessment featuring a responsive layout using Bootstrap. It includes a navigation bar, a carousel for images, product cards for items on sale, and pagination for navigation. Additionally, there is a promotional section at the bottom offering a discount for sign-ups.

Uploaded by

singlalakshay212
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Assesment Web Dev

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min
.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65Vohhpu
uCOmLASjC" crossorigin="anonymous">
</head>

<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light " style="background-
color: blanchedalmond;">
<div class="container-fluid">
<a class="navbar-brand text-bold" href="#">Guza</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Products</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" tabindex="-1" aria-
disabled="true">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" tabindex="-1" aria-
disabled="true">blog</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" tabindex="-1" aria-
disabled="true">Elements</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success"
type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-
ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img

src="https://images-eu.ssl-images-amazon.com/images/G/31/img24/Media/
BAU/PC_Hero_2x-toys_1._CB582765723_.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img

src="https://images-eu.ssl-images-amazon.com/images/G/31/img23/Softlines_
JWL_SH_GW_Assets/2024/BAU_BTF/Nov/Unrec/Shoes/1/30001._CB542120021_.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img

src="https://images-eu.ssl-images-amazon.com/images/G/31/img21/MA2025/
GW/BAU/Unrec/PC/934044815._CB551384116_.jpg"
class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">

<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="#">Filter
by</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
catagories
</a>
</li>
<li class="nav-item dropdown a">
<a class="nav-link dropdown-toggle active" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
color
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Blue</a></li>
<li><a class="dropdown-item" href="#">Red</a></li>
<li><a class="dropdown-item" href="#">Green</a></li>
<li><a class="dropdown-item" href="#">Black</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Size
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Brand
</a>
</li>

<li style="padding-left: 550px;">


<a class="nav-link dropdown-toggle active" href="#"
id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Brand
</a>

</li>

</ul>
</div>
</div>
</nav>
<div class="row">

<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/71mmZUZ6JbL._AC_UL480_FMwebp_QL6
5_.jpg" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt colour</h5>
<p></p>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>

</div>
<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/71L5tMOOQfL._AC_UL480_FMwebp_QL6
5_.jpg" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/81hT3vrPh8L._AC_UL480_FMwebp_QL6
5_.jpg" style="height: 360px;" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/71browsizeL._AC_UL480_FMwebp_QL6
5_.jpg" style="height: 360px;" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
</div>
<div class="row">

<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/51kzT4eIorL._AC_UL480_FMwebp_QL6
5_.jpg" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt colour</h5>
<p></p>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>

</div>
<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/41FdjlvGuBL._AC_UL480_FMwebp_QL6
5_.jpg" style="height: 360px;" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img
src="https://m.media-amazon.com/images/I/81vMin8VvuL._AC_UL480_FMwebp_QL6
5_.jpg" style="height: 360px;" class="card-img-top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="https://m.media-amazon.com/images/I/71tgdT-
y2nL._AC_UL480_FMwebp_QL65_.jpg" style="height: 360px;" class="card-img-
top"
alt="">
<div class="card-body">
<h5>Lace Shirt cut 2</h5>
<p class="text-color">16$</p>
<a href="#" class="btn btn-primary">select</a>
</div>
</div>
</div>
</div>

</div>

</div>

<div class="d-flex justify-content-center mt-5">


<nav>
<ul class="pagination">
<li class="page-item active">
<a class="page-link rounded-circle bg-dark border-dark
text-white" href="#">1</a>
</li>
<li class="page-item"><a class="page-link text-dark"
href="#">2</a></li>
<li class="page-item"><a class="page-link text-dark"
href="#">3</a></li>
<li class="page-item"><a class="page-link text-dark"
href="#">4</a></li>
<li class="page-item">
<a class="page-link rounded-circle text-dark border-0"
href="#" aria-label="Next">
➝
</a>
</li>
</ul>
</nav>
</div>

<div class="bg-dark container" style="display: flex; width: 1200px;">


<div>
<p class="text-light" style="width: 500px;">get an 20% off on sign
up</p>
</div>
<div>
<p class="text-light
">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi
numquam, necessitatibus beatae commodi aliquid minima repellat fuga?
Error velit at deserunt dignissimos voluptates, nesciunt quis
voluptatibus quia mollitia incidunt voluptas tempore sit corrupti esse
aspernatur ut excepturi explicabo dolore atque eius harum modi quisquam.
Repudiandae quam consectetur ipsa eum eligendi fugit alias quod. Ad,
repellendus dolore totam laborum accusamus impedit.</p>
</div>
</div>

</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundl
e.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>

</html>

Output :-

You might also like