Skip to content

Commit

Permalink
changes to responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ekene001
Ekene001 committed Sep 20, 2024
1 parent 59f4ff7 commit 26d04ad
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 93 deletions.
47 changes: 24 additions & 23 deletions public/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,30 @@
<link rel="stylesheet" href="style.css">
<title>Cart</title>
</head>
<body>
<header class="bg-white shadow-md w-full px-6 py-4">
<nav class="flex justify-between lg:mx-[100px] md:mx-[20px] relative lg:items-center">
<h1 class="text-2xl text-blue-950 font-bold uppercase">Voltex Store</h1>
<ul class="hidden justify-center space-y-6 lg:space-y-0 items-center lg:flex gap-16">
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block">
<a href="cart.html">
<p class="cart-number">0</p>
<box-icon type='solid' name='cart-alt'></box-icon>
</a>
</li>

</ul>
<div class="lg:hidden flex justify-center">
<box-icon id="menu" name='menu' color="#172554" size="35px"></box-icon>
</div>
</nav>

</header>
<body class="font-Rubik overflow-hidden">
<header class="bg-white shadow-md w-full px-6 py-4">
<nav class="flex justify-between lg:mx-[100px] md:mx-[20px] relative lg:items-center">
<h1 class="text-2xl text-blue-950 font-bold uppercase">Voltex Store</h1>
<ul class="hidden justify-center space-y-6 lg:space-y-0 items-center lg:flex gap-16">
<li class="lg:text-sm font-medium block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium block">
<a href="cart.html">
<p class="cart-number">0</p>
<box-icon type='solid' name='cart-alt'></box-icon>
</a>
</li>

</ul>
<div class="lg:hidden">
<box-icon id="menu" name='menu' color="#172554" size="35px"></box-icon>

</div>
</nav>

</header>

<section class="py-[50px] px-6">
<div class="lg:mx-[100px] md:mx-[20px]">
Expand Down
16 changes: 8 additions & 8 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="font-Rubik">
<body class="font-Rubik overflow-hidden">
<header class="bg-white shadow-md w-full px-6 py-4">
<nav class="flex justify-between lg:mx-[100px] md:mx-[20px] relative lg:items-center">
<h1 class="text-2xl text-blue-950 font-bold uppercase">Voltex Store</h1>
<ul class="hidden justify-center space-y-6 lg:space-y-0 items-center lg:flex gap-16">
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block">
<li class="lg:text-sm font-medium block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium block">
<a href="cart.html">
<p class="cart-number">0</p>
<box-icon type='solid' name='cart-alt'></box-icon>
</a>
</li>

</ul>
<div class="lg:hidden relative">
<div class="lg:hidden">
<box-icon id="menu" name='menu' color="#172554" size="35px"></box-icon>
<small></small>

</div>
</nav>

Expand Down
48 changes: 24 additions & 24 deletions public/products.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,30 @@
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header class="bg-white shadow-md w-full px-6 py-4">
<nav class="flex justify-between lg:mx-[100px] md:mx-[20px] relative lg:items-center">
<h1 class="text-2xl text-blue-950 font-bold uppercase">Voltex Store</h1>
<ul class="hidden justify-center space-y-6 lg:space-y-0 items-center lg:flex gap-16">
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium lg:hover:text-blue-950 lg:hover:bg-white hover:bg-blue-950 hover:text-white block">
<a href="cart.html">
<p class="cart-number">0</p>
<box-icon type='solid' name='cart-alt'></box-icon>
</a>
</li>
</ul>
<div class="lg:hidden">
<box-icon id="menu" name='menu' color="#172554" size="35px"></box-icon>
</div>
</nav>
</header>
<body class="font-Rubik overflow-hidden">
<header class="bg-white shadow-md w-full px-6 py-4">
<nav class="flex justify-between lg:mx-[100px] md:mx-[20px] relative lg:items-center">
<h1 class="text-2xl text-blue-950 font-bold uppercase">Voltex Store</h1>
<ul class="hidden justify-center space-y-6 lg:space-y-0 items-center lg:flex gap-16">
<li class="lg:text-sm font-medium block"><a href="index.html">Home</a></li>
<li class="lg:text-sm font-medium block"><a href="products.html">Products</a></li>
<li class="lg:text-sm font-medium block"><a href="">Sign Up</a></li>
<li class="lg:text-sm font-medium block"><a href="">Contact</a></li>
<li class="lg:text-sm font-medium block">
<a href="cart.html">
<p class="cart-number">0</p>
<box-icon type='solid' name='cart-alt'></box-icon>
</a>
</li>

</ul>
<div class="lg:hidden">
<box-icon id="menu" name='menu' color="#172554" size="35px"></box-icon>

</div>
</nav>

</header>
<!-- header -->

<section class="py-[50px] px-6">
Expand Down
54 changes: 36 additions & 18 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,6 +727,10 @@ video {
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden{
overflow: hidden;
}

.rounded{
border-radius: 0.25rem;
}
Expand Down Expand Up @@ -978,27 +982,41 @@ video {
margin: 2rem 0;
}

@media only screen and (max-width:768px) {
nav ul{
@media only screen and (max-width:920px) {
nav{
flex-direction: column;
position: relative;
}

nav #menu{
display: block;
position: absolute;
top: 50px;
padding: 10px 0px 10px 50px;
left: -8%;
/* text-align: center; */
min-width: 1000px;
background-color: #f4f0ff;
top: 0px;
right: 5px;
}
}

@media only screen and (max-width:860px) {
nav ul{
position: absolute;
top: 50px;
padding: 10px 0px 10px 50px;
left: -8%;
/* text-align: center; */
min-width: 1000px;
background-color: #f4f0ff;
background-color: rgb(255, 255, 255);
display: none;
}

nav ul li{
display: block;
padding: 2% 0;
}

.showmenu{
display: block;
width: 100%;
margin-top: 5%;
}

nav ul li a{
color: #222;
}

nav ul li:hover{
color: white;
}
}

Expand Down Expand Up @@ -1165,4 +1183,4 @@ video {
--tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity));
}
}
}
2 changes: 1 addition & 1 deletion public/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const decreaseNum = () => {
}
};
document.querySelector("#menu").addEventListener("click", () => {
document.querySelector("li, ul").classList.toggle("hidden");
document.querySelector("li, ul").classList.toggle("showmenu");
});

const AddtoCart = document.querySelectorAll(".add_to_cart");
Expand Down
49 changes: 30 additions & 19 deletions src/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,38 @@
.cart_item:nth-child(2n){
margin: 2rem 0;
}
@media only screen and (max-width:768px) {
nav ul{
@media only screen and (max-width:920px) {
nav{
flex-direction: column;
position: relative;
}
nav #menu{
display: block;
position: absolute;
top: 50px;
padding: 10px 0px 10px 50px;
left: -8%;
/* text-align: center; */
min-width: 96.5vw;
background-color: #f4f0ff;
top: 0px;
right: 5px;
}

}
@media only screen and (max-width:860px) {
nav ul{
position: absolute;
top: 50px;
padding: 10px 0px 10px 50px;
left: -8%;
/* text-align: center; */
min-width: 96.5vw;
background-color: #f4f0ff;
background-color: rgb(255, 255, 255);
display: none;


}
nav ul li{
display: block;
padding: 2% 0;

}
}
.showmenu{
display: block;
width: 100%;
margin-top: 5%;
}
nav ul li a{
color: #222;
}
nav ul li:hover{
color: white;
}

}

0 comments on commit 26d04ad

Please sign in to comment.