Scribd
Upload
2 views13 pages

Hera Is The HTML CODE

The document contains HTML and CSS code for an online shopping website, specifically for Myntra, featuring sections for navigation, product images, and a footer. The HTML structure includes a header with navigation links, a search bar, and sections displaying promotional and product images. The CSS styles define the layout, fonts, and visual elements of the webpage, ensuring a responsive and visually appealing design.

Uploaded by

singhprakash7277016715
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views13 pages

Hera Is The HTML CODE

The document contains HTML and CSS code for an online shopping website, specifically for Myntra, featuring sections for navigation, product images, and a footer. The HTML structure includes a header with navigation links, a search bar, and sections displaying promotional and product images. The CSS styles define the layout, fonts, and visual elements of the webpage, ensuring a responsive and visually appealing design.

Uploaded by

singhprakash7277016715
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

 Hera is the HTML CODE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYA
AACqaXHeAAAKSElEQVR42u1ZeVRU5xUviolNoh6RRRZxw7iTtLhhbWNd0kStptG
4YDEpiXWJG4laqcbdiFalxgU1Vot41CSiEgQVNARRCCqgIqjsKiCCgMMww+y/
3vsOY8MZmPcGNfrH+51zz3AO8+537+/
+7v2+782vZMiQIUOGDBkyZMiQIUPGE0Kn0/
U3mUzHABSTHSXzelKfAFobjcaNdT4zyIa/
iLnbUfKzABiqkq7jctAMPMq8BEIl2cim+qysrPQkQrOMahUuzVyH/
N3RIJiIkMUvVPIqlSqAA7ux4r9Y6+yM1Y6O2ODujJwDm0HQkv3BVp+lpaXOlGiBM
icTu7p0Yp+CxQyfCQb9b8kLkXxFRcVgAJqMVWFY4+iMqCG9kL+gO86M7oT1rs64c
3wvCBU2tINdfHx8S1JUsqa0CDu6umG3RxdkuK5BQvtPEezoYSbBZDAYxj/X5G/
fvu1IlSgpjb6MDU6euOQaBOPaIcBWb8Fuznodmzu6CO1AUk4F0EKC32ZqtToEBgM
O9u+Ob3q3g6LfHNR4fC9YoXsoNjl1xpX520BQkvV8XgQ0p0C/
01cqsc2tL1JcFwsBmoJ9OfnHljG9G/
YP8IJJp2HZrhcj9cGDByNZ4ednTkR4D0coPmgLpU8g+35sBe47BRJKTwrEXgFg/
zykPwmEk0OnI7r91MfBGdcJCqhncWM64vy8CSDoyfo05vPMmTOvkqzvlMadQGhnJ
1S83xbVTEC/Bey7nqW7rsBuzwEwafVM7LJfNPm4uLg2LP2CPTHY4zwASo8T/
ydg+QgLAkz/9kZYPw88vHyWK3YBgF1D0q+url7P0t/
fxxMFoxw4ecGUg6ZbEEBGxPvhxwlB5kH7+i9FAAe6hZnf02Eg7rrvqReUYeE4TtrCK
pb3wqG3eoJBVQ5oYJ70IHI0lxYGIMG3LnkzAb+f1CABCo8I7HLxQWXSTSY2mv08
8+rn5OT0YsaT/vYlTeU5FkHp/v4hJ9ygpfh1QVbochDKyVr/fJ7U1taeVt/
Nw6HeLpx0fQKGD2ffDVqu+1Yc8X7PTOyoZz74aM8/
ri54gH1uQ8zSr2faiYGNEgBqhYhh3WBQKbhvV5pJLSoqGg5C7IQ/
onCMgyUBo73Zd6MW6fIB8nadZBVkAmj2zKqfl5fXH4DpzDvzkO22ucFgaodu4GQbt
ftBPXF5eQAICjIH8mtP1b9YdSURZwc4csKWNsEJNZ4nGiXgocdhHOz2J7MKpj6z6r
NMq2/cwTH3vzQajKp3GCdq1RKn9IJRXQ29Xr/
h3r17o0CInzwMleM54YZN9WaYVRUkuX6GrPWHWQU5AJo/
9epnZ2cPBOHU8Fkocv/
aajCmrwZbJUAd3Ac3ty0GoYZOfNeVWem4OsKZErVCwLDNVtfkdjziNcasAv+nXn2l
UvmdOu8+Ytz9eUHrBGyfLKqC3MUDYdJrwchcOJmTtE7A+4tE173iuhS5O75nFVx7
mjuCXWpqqhcAfcKEpSj1OCAaiHHnF6IEGEO8UXIsBLX38lH4XntxAj6azL5FLdb3U
xC4vd5+atWvqqraqq9S4VSnjyQFYYyN5iRFrWLTCJSEzOcERa12ywyousWIq8B9KS
qTb7MKYp6GCuxWrlz5Cm1Z5emLdpsPPVZN1T0GUCuBbb8VJyGkL8r9PCURoP/
hIDRTf+I1RGdB8oQ1IBhpaHd84lMf7dHTQEjo/7mk6mumpUDAt/
6iBOiXeXFyksxUfg+60FxJMaR0/Sf4kkaFW/
2kBNjTje+Hstg0uo+vlbS4fm8+BCTvECVA/
XF7ScnXzOsHhjFTISkGPhekLdjJbVAEwK7J8o+MjHQDoLvkt4EcR0pa3FSkhoDyW1
aTN/
2rF5QSq68JXwEz1L5nJcWRPGgZGFRA3ybLv7i4eA4IaW+slrRo7ejzYNDQjAMjbHSj
BOgWd5Ysf2NOKugIfg2ASbc2S1Ist902QXG9UDhsNVn+NTU1Z/
mlQ7H7fyQtqtuZy31XERQU5AvAgAshVuTvIk3+s/qCkZ6ePp/iuWxMr+K1JNmNz/
ZxG9xqym5gFxAQ0IoeVmUHHpK0mKpDFEx31VAoFAfoeWe6Miej7GbDBGzqY4v8
OYnawMBA98zMzJWCrAdLa4Obb28HQ6vV9rBZ/levXhVuF4WjD0qT/
5RkMOjIPIKef5UOT4vAODzJcvov7yZ9+hfngE6hR8nnyzNmzHiDyNDqtuVIiqmgSyg
MNbWg4/Z8mw8/
JSUl6wwqDUq7SiPAcLKEmb5Nz7bg9hk6dKgXtUM1rn9jQYBmfgdJyau/
eBeMwsLCd9knWbuHDx9GmR5ooOp0UkJckSg9+hPfDcJsbQN7GmTHlUn5kpJX+8Q
CehPKysqCWD111pZIDIdODewa0qTtT58cydXL9fHxaVGXQMvo6Gg/
EDQzrkjbErck8Vyy+W7wEp2iMtQR0qSm35PHizwKCwtrxwvV2csbN258C4ARF7fWI
6BmSjvx4TfnNyCnIBID6whlsApcaUe4Ycx4JCm2ys8TQNDS/
HjJFgL47WyZaluG+PDzPgOoDSgvLw/h1vl5G5E509vjU1BXAKGDIBCwpa/koy/
FUB4cHNzGXL26z9eSk5PnCSrwTxGNT/
HXeDAePXrU2RYC+AdJhWZLpnj19xeAvxsREeFRX2bC37/
evn37SAAGpISadwDxm1+gr1B9Oof8QyCyvk97BweHDqTQW8YsBVQdo6wXaFIiCN
yeNv1Q24YlTfu69cn/
TgILnANdIcjTEoIK6He+IzBogLAxpADrBCgnOsCQeZEHasHs2bNfs+xdoR1anTp16k
NB28tvWIuRVWImoJtNCmCGDdEljTrmq6npZjU0Gk3W3LlzWzcyZITB5efn9ya3FIrT
+JZodQZo9i8BwXTt2rWxTGAjPplsN2qvaNQYoB4a32ic2i8yBH+5ubnONs0AGj5hUO
ih8oq2TN4zCoYTxeD3+OfOnRtsEahlxdrGxsZ+AsDI26JmjkfD296qcYBBz9X6mgexm
dRGSHiFiaWj7n1TrhKqPqcb3p4TylhNaUKMNqBFeHj4aO5dmvAW931DVAkIBqrSx/
xdkS3Gru47brdu3doolOPCbtT4OdZ/
4bGZFK2t5UNPwsCBA1ubJ78YsXv37v0znzdM2Uqof3euvvw/uQwGKWWVuD/
L3nXJz8//
CgTjhXJo12SCZ4KpTMOVr0lLS5vJ8pa4vwrbIlkH2o6+BJ8aijOgPbCEJB8Ew/
UfwaisrIwZO3asC68vwa+5FZyoWONZCdAaoT9yF9rVmdBH3GO98SXqkuUskR6wZ
2Ji4jyaB9kAdNzHhG937NgxhCe8jU7t6gjz2Ldv3ziqymkmksmgS05qSkrKXK6opOQt1
eXk7+/
f786dO7tI7pQ5tDSbculXrOBp06a5i8hflASuSGcyL7KOZO1E+lNKwA5MLvts2bJlF/
pszz1tkbx0n/xcKzJOlv11ZaJ5mIv4lOzc3nzG514SdSjus5nZZ501f0o+m7M/
i1hlyJAhQ4YMGTJkyJAhQ0Z9/A/MGjKdMt/y6AAAAABJRU5ErkJggg=="
sizes="64x64"/>
<title>Online Shopping for Women, Men, Kids Fashion & Lifestyle - Myntra</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="utils.css" rel="stylesheet" type="text/css" />
</head>

<body>
<header class="containerHeader">
<nav class="flex space-between">
<div class="left flex items-center">
<img src="home1.png"/>
<ul class="flex items-center justify-center uppercase semibold">
<li>Men</li>
<li>Women</li>
<li>Kids</li>
<li>Home and Living</li>
<li>Beauty</li>
<li>Studio</li>
</ul>
</div>
<div class="right flex items-center">
<input class="search" placeholder="Search for products, brands and more"
class="desktop-searchBar" value="" data-reactid="904">
<div class="rightBox">
<div class="profile mx-2">Profile</div>
<div class="wishlist mx-2">WishList</div>
<div class="bag mx-2">Bag</div>
</div>
</div>
</nav>
</header>
<section class="container section1">
<img class="homeImg" src="home.png"/>
<img class="homeImg"src="https://images.bewakoof.com/uploads/grid/app/desktop-
header-1-1711691501.jpg"/>
<img class="homeImg"
src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/7/1e599d37-1ed6-4e39-9057-ffb4065173b51651897264796-
Unbelievable-Deals.jpg"/>
</section>
<section class="container section1 flex flex-wrap">
<img class="itemImg"
src="https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/2/5d1b7ad3-c3ed-4ef9-a654-18231743d3cd1651484798059-Anouk-
Inddus.jpg"/>
<img class="itemImg"
src="https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/2/f7575784-edbf-411f-acc0-51891ea7f4331651484798329-Inddus-
_Varanga.jpg"/>
<img class="itemImg"
src="https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/2/ce40419d-6408-404e-9320-96e41aee1b791651484798300-Hrx-
_Puma_-_More.jpg"/>
<img class="itemImg"
src="https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/2/44192c45-7393-4ede-a926-11f30b0b92a51651484798036-All.jpg"/>
<img class="itemImg"
src="https://assets.myntassets.com/f_webp,w_140,c_limit,fl_progressive,dpr_2.0/assets/
images/2022/5/2/764761e7-c505-459e-92a2-6c4387f9e2511651484798319-
Hush_Puppies-_Arrow.jpg"/>
<img class="itemImg" src="https://images.bewakoof.com/t640/men-s-black-super-
loose-acid-wash-t-shirt-620449-1705390376-1.jpg"/>
<img class="itemImg" src="https://images.bewakoof.com/t640/men-s-black-batman-
poster-graphic-printed-oversized-t-shirt-555314-1672229529-1.jpg"/>
</section>

<section class="tall">

</section>
<footer>
Copyright &copy; myntra.com | All rights reserved
</footer>
<script src="script.js"></script>
</body>

</html>

 Hera is the CSS CODE

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header{
position: sticky;
top: 0;
background: white;
height: 66px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.rightBox{
display: flex;
margin: 12px;
}

.left img{
width: 60px;
height: 50px;
}

.container{
padding: 0 10vw;
}

.containerHeader{
padding: 0 10vw;
}

nav{
font-size: 12px;
padding-top: 14px;
}

nav ul li{
list-style: none;
padding: 0 12px;
}

.section1{
background: #f2f2f2;
}

.search{
width: 34vw;
padding: 7px 17px;
border: 0.5px solid grey;
background: #f7f8fd;
border-radius: 5px;
}

.homeImg{
width: 80vw;
margin: 12px 0;
}

.itemImg{
width: 10vw;
margin: 6px 12px;
}

footer{
padding: 23px;
text-align: center;
box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
}

.tall{
min-height: 40vh;
}

@media (max-width: 450px) {


.search {
width: 72vw;
}
}

@media (max-width: 1550px) {

nav ul li {
list-style: none;
padding: 0 4px;
font-size: 10px;
}
.containerHeader {
padding: 0 2vw;
}

header{
height:122px;
}

nav{
flex-direction: column;
align-items: center;
}

.right{
flex-direction: column;
}

.rightBox{
display: flex;
margin: 12px;
}
}

 Hera is the UTILS CSS CODE

.flex{
display:flex;
}
.items-center{
align-items:center;
}

.justify-center{
justify-content: center;
}

.space-between{
justify-content: space-between;
}

.uppercase{
text-transform: uppercase;
}

.semibold{
font-weight: bolder;
}

.mx-2{
margin-left: 12px;
margin-right: 12px;
}

.my-2{
margin: 12px 0;
}

.flex-wrap{
flex-wrap: wrap;
}

 Hera is the JAVASCRIPT CODE

// Get all the product image elements


const productImages = document.querySelectorAll('.itemImg');

// Get the cart element


const cartElement = document.querySelector('.cart');

// Keep track of the products in the cart


let cartItems = [];

productImages.forEach((img, index) => {


// Create a new card element
const card = document.createElement('div');
card.classList.add('card');

// Create a new price tag element


const priceTag = document.createElement('div');
priceTag.classList.add('price-tag');
// Set the price tag content based on the product image
switch (index) {
case 0:
priceTag.textContent = 'MIN. 50% OFF';
break;
case 1:
priceTag.textContent = 'MIN. 60% OFF';
break;
case 2:
priceTag.textContent = '50-80% OFF';
break;
case 3:
priceTag.textContent = 'UNDER ₹1499-1999';
break;
case 4:
priceTag.textContent = 'UP TO 70% OFF';
break;
case 5:
priceTag.textContent = 'Oversized T-Shirts Ft. Ishaan Khatter';
break;
case 6:
priceTag.textContent = 'Oversized T-Shirts Ft. Ishaan Khatter';
break;
default:
priceTag.textContent = '';
}
// Create a new button element for the card
const button = document.createElement('button');
button.classList.add('card-button');
button.textContent = 'Add to Cart';

// Add an event listener to the button


button.addEventListener('click', () => {
// Add the product to the cart
const product = {
image: img.src,
priceTag: priceTag.textContent
};
cartItems.push(product);
updateCartUI();
});

// Append the price tag and button to the card


card.appendChild(priceTag);
card.appendChild(button);

// Insert the card after the image


img.parentNode.insertBefore(card, img.nextSibling);
});

// Function to update the cart UI


function updateCartUI() {
// Clear the cart element
cartElement.innerHTML = '';
// Add the products in the cart to the cart element
cartItems.forEach(item => {
const cartItem = document.createElement('div');
cartItem.classList.add('cart-item');

const image = document.createElement('img');


image.src = item.image;
image.classList.add('cart-image');

const priceTag = document.createElement('div');


priceTag.textContent = item.priceTag;
priceTag.classList.add('cart-price-tag');

cartItem.appendChild(image);
cartItem.appendChild(priceTag);
cartElement.appendChild(cartItem);
});
}

You might also like