Skip to content

modify #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vicky160898 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

modify #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions middal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h2>Browser Extension</h2><br>
<img src="https://cdn.modesens.com/static/img/20211109downloadright.png">
</div>
</div>
<p>When you follow our links to visit a brand or retailer’s website or make a purchase, ModeSens may earn a
<p id="para">When you follow our links to visit a brand or retailer’s website or make a purchase, ModeSens may earn a
commission.</p>
<div id="footer"></div>
</body>
Expand All @@ -128,4 +128,4 @@ <h2>Browser Extension</h2><br>

// console.log(footers)
</script>
<script src="index.js"></script>
<script src="./scripts/index.js"></script>
20 changes: 1 addition & 19 deletions middal/menspage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,24 +95,6 @@ <h2>Community Posts</h2>
<img src="https://cdn.modesens.com/umedia/14180s?w=400&">
</div>
<button id="btn5">VIEW ALL</button>
<div id="footer">
<div id="inside">
<h2>Download the</h2>
<h2>ModeSens App</h2><br>
<p>A seamless experience that takes your style
to the next level.</p>
<button>DOWNLOAD NOW</button>
<img src="https://cdn.modesens.com/static/img/20220707appdownload_en.png">
</div>
<div id="inside1">
<h2>Install the ModeSens</h2><br>
<h2>Browser Extension</h2><br>
<p>Get timely, accurate product information
every time you browse.</p>
<button>INSTALL NOW</button>
<img src="https://cdn.modesens.com/static/img/20211109downloadright.png">
</div>
</div>
<p>When you follow our links to visit a brand or retailer’s website or make a purchase, ModeSens may earn a
commission.</p>
<div id="footer"></div>
Expand All @@ -133,4 +115,4 @@ <h2>Browser Extension</h2><br>
document.getElementById('footer').innerHTML = footers;

</script>
<script src="index.js"></script>
<script src="./scripts/index.js"></script>
30 changes: 27 additions & 3 deletions middal/scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,23 @@ appendData = (data) => {
img.setAttribute("id", "pic")
img.src = el.image;

let btn8= document.createElement("button");
btn8.setAttribute("id","btn8")
btn8.innerText="Quick View";

//img.append(btn8);

let title = document.createElement("h3");
title.innerText = el.title;

let btn = document.createElement("button");
btn.setAttribute("id", "btn")
btn.addEventListener("click",function(){
window.location.href="mens.html";
})
btn.innerText = "SHOP NOW";

div.append(img, title, btn, icon);
div.append(img, btn8,title, btn, icon);

document.getElementById("big").append(div);
})
Expand Down Expand Up @@ -129,14 +138,18 @@ appendDt = (dt) => {
img.setAttribute("id", "pic1")
img.src = el.image;

let btn9= document.createElement("button");
btn9.setAttribute("id","btn9")
btn9.innerText="Quick View";

let title = document.createElement("h4");
title.innerText = el.title;

let price = document.createElement("h4");
price.innerText = `$ ${el.price}`;


div.append(img, title, price, icon);
div.append(img, btn9, title, price, icon);

document.getElementById("box").append(div);
})
Expand Down Expand Up @@ -203,4 +216,15 @@ function Toggle2(x) {
document.getElementById("btn6").style.color = "red";

}
}
}

document.getElementById("btn1").addEventListener("click",function(){
window.location.href="mens.html";
})

document.getElementById("btn5").addEventListener("click",function(){
window.location.href="mens.html";
})
document.getElementById("btn2").addEventListener("click",function(){
window.location.href="mens.html";
})
2 changes: 1 addition & 1 deletion middal/scripts/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ function navbar(){
return ` <a href="index.html"><img src="https://cdn.modesens.com/static/img/20190228newlogo-black.svg" alt=""></a>
<div class="menu">
<ul>
<li class="active"> <a href="#">WOMEN</a>
<li class="active"> <a href="index.html">WOMEN</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Shop All</a></li>
Expand Down
107 changes: 87 additions & 20 deletions middal/style/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
padding: 0px;
}

#image {
display: block;
width: 90vw;
margin: auto;
}

div {
margin: 20px auto;
/* width: 90vw; */
Expand All @@ -13,7 +19,7 @@ div {
#right {
position: absolute;
top: 42%;
font-size: 40px;
font-size: 60px;
color: white;
/* rgb, hexa,rgba */
background-color: rgba(100, 100, 100, 0.4);
Expand All @@ -40,13 +46,13 @@ body {
#text {
margin-top: 50px;
text-align: center;
line-height:30px;
line-height: 30px;
}

h3 {
color: #947F7F;
word-spacing: 2px;
font-size:20px;
font-size: 20px;
margin-top: 15px;
}

Expand Down Expand Up @@ -85,6 +91,30 @@ h3 {
#pic {
width: 100%;
height: 400px;
position: relative;
}
#btn8 {
position: absolute;
opacity: 0;
top:58%;
left: 14%;
padding:12px 78px;
font-size: 22px;
border: 1px solid;
}
#pic:hover {
opacity: 0.9;
}
#btn8:hover {
background-color:white;
background: transparent;
/* transition: .8s; */
opacity:1;
color: #FFFFFF;
/* color: red; */
border: 1px solid black;
font-weight: bold;

}

#box {
Expand All @@ -104,6 +134,30 @@ h3 {
#pic1 {
width: 100%;
height: 400px;
position: relative;
}
#btn9 {
position: absolute;
opacity: 0;
top:55%;
left: 5%;
padding:12px 60px;
font-size:18px;
border: 1px solid;
}
#pic1:hover {
opacity: 0.9;
}
#btn9:hover {
background-color:white;
background: transparent;
/* transition: .8s; */
opacity:1;
color: #FFFFFF;
/* color: red; */
border: 1px solid black;
font-weight: bold;

}

#btn {
Expand Down Expand Up @@ -214,7 +268,7 @@ h4 {
#btn5 {
display: block;
margin: auto;
margin-top:40px;
margin-top: 40px;
width: 100px;
padding: 10px;
background-color: #FFFFFF;
Expand All @@ -241,73 +295,86 @@ h4 {
font-size: 25px;
z-index: 1;
}

#bott {
width: 100vw;
background-color: #F8F7F6;
display: flex;
text-align: center;
margin-top: 40px;
}

#inside {
width:18vw;
width: 18vw;
display: flex;
flex-direction: column;
margin: 40px auto;
}

#inside1 {
width:30vw;
width: 30vw;
display: flex;
flex-direction: column;
margin: 40px auto;
}
#inside > button {

#inside>button {
display: block;
margin: auto;
width: 12vw;
padding: 10px;
color: white;
background-color: black;
}
#inside1 > button {

#inside1>button {
display: block;
margin:auto;
margin: auto;
width: 12vw;
padding: 10px;
color: white;
background-color: black;
}
#inside > h2 {
margin-top:2px;

#inside>h2 {
margin-top: 2px;
}
#inside1 > h2 {
margin-top:2px;

#inside1>h2 {
margin-top: 2px;
}

p {
margin:15px auto;
text-align: center;
font-size: 18px;
margin: 30px auto;
text-align: center;
font-size: 20px;
}

#post {
width: 80vw;
margin: 30px auto;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
#post > img {

#post>img {
width: 210px;
height: 45vh;
}

#b {
display: flex;
width: 84vw;
text-align: center;
}

#b1 {
width:34vw;
width: 34vw;
border-bottom: 1px rgb(146, 134, 134) solid;
}

#b2 {
width:34vw;
width: 34vw;
border-bottom: 1px rgb(146, 134, 134) solid;
}
Loading