Skip to content
GitLab
Commit 0a3846a2 authored by Yash Saravgi's avatar Yash Saravgi
Browse files

Improve Shopping page design

parent 14fd67b3
Hide whitespace changes
Inline Side-by-side
public/stylesheets/homepage.css
View file @ 0a3846a2
......@@ -54,6 +54,7 @@ li.dropdown {
.dropdown:hover .dropdown-content {
display: block;
position: relative;
}
......
public/stylesheets/products.css
View file @ 0a3846a2
......@@ -7,7 +7,7 @@
}
html {
font-size: 120%;
font-size: 20px;
}
nav {
......@@ -23,7 +23,7 @@ nav {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 1vw;
font-size: 20px;
line-height: 50px;
}
......@@ -59,7 +59,6 @@ label {
}
.title_name {
font-size: 1.5rem;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
......@@ -88,6 +87,7 @@ label {
}
.topnavcomp {
padding: 0 10px;
background-color: white;
width: 100%;
cursor: pointer;
......@@ -207,8 +207,8 @@ a {
font-size: 15px;
line-height: 20px;
color: black;
margin: 0px 0px 5px 5px;
border: 5px solid black;
margin: 15px;
list-style: none;
}
.left_bottom {
......@@ -223,12 +223,10 @@ a {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
font-size: 15px;
line-height: 20px;
color: black;
margin: 0px 0px 5px 5px;
border: 5px solid black;
margin: 15px;
}
.dropbtn {
......@@ -274,6 +272,7 @@ a {
.dropdown:hover .dropdown-content {
display: block;
position: relative;
}
.active {
color: white;
......@@ -322,23 +321,22 @@ a {
}
.box {
border: 3px solid black;
width: 19%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
aspect-ratio: 1/1.35;
padding: 5px 5px;
padding: 5px 5px 10px;
background-color: white;
display: -webkit-box;
margin: 5px 10px;
/* display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
display: flex; */
/* -webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
flex-direction: column; */
/* -webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 5px;
gap: 5px; */
}
#logo {
......@@ -361,7 +359,7 @@ a {
#menu_label {
display: none;
font-size: 15px;
font-size: 1.4em;
float: right;
line-height: 50px;
}
......@@ -417,19 +415,20 @@ a {
text-align: center;
}
#menu:checked ~ ul ul.ul {
position: fixed;
position: relative;
z-index: -2;
display: block;
z-index: 9;
top: 0;
right: 0;
}
#menu:checked ~ ul ul#ul2 {
position: fixed;
position: relative;
z-index: -2;
display: block;
z-index: 9;
right: 0;
top: 203px;
top: 0;
}
.dropdown-content {
width: 100vw;
......@@ -474,51 +473,33 @@ a {
}
}
@media (max-width: 1515px) {
html {
font-size: 120%;
}
@media only screen and (min-width: 1150px) {
.box {
width: 23%;
flex: 0 1 30%;
}
}
@media (max-width: 1118px) {
html {
font-size: 1.5vw;
}
@media only screen and (max-width: 1149px) and (min-width: 750px) {
.box {
width: 30%;
}
#nav_title {
font-size: 1.5vw;
flex: 0 1 38%;
}
}
@media (max-width: 917px) {
html {
font-size: 2vw;
@media only screen and (min-width: 556px) and (max-width: 750px) {
.box {
flex: 0 1 45%;
}
}
@media (max-width: 610px) {
html {
font-size: 4vw;
}
@media only screen and (min-width: 410px) and (max-width: 556px) {
.box {
width: 47%;
}
#nav_title {
font-size: 3vw;
flex: 0 1 70%;
}
}
@media (max-width: 410px) {
html {
font-size: 8vw;
}
@media only screen and (max-width: 410px) {
.box {
width: 95%;
flex: 0 1 85%;
}
}
/*# sourceMappingURL=home.css.map */
views/about.ejs
View file @ 0a3846a2
......@@ -59,7 +59,7 @@
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 1vw;
font-size: 20px;
line-height: 50px;
}
......@@ -99,6 +99,7 @@
.dropdown:hover .dropdown-content {
display: block;
position: relative;
}
.active {
color: white;
......@@ -128,7 +129,7 @@
#menu_label {
display: none;
font-size: 15px;
font-size: 1.4em;
float: right;
line-height: 50px;
}
......@@ -165,19 +166,20 @@
text-align: center;
}
#menu:checked ~ ul ul.ul {
position: fixed;
position: relative;
z-index: -2;
display: block;
z-index: 9;
top: 0;
right: 0;
}
#menu:checked ~ ul ul#ul2 {
position: fixed;
position: relative;
z-index: -2;
display: block;
z-index: 9;
right: 0;
top: 190px;
top: 0;
}
.dropdown-content {
width: 100vw;
......@@ -372,17 +374,11 @@
by the middle agents,which are then sold to the markets in an excessive
price ranges.They don't get good return on sales.
</p>
<ul>
<li>
Retail – B2C just Like Dedicated Online Vegetable store in Main cities
of India.
</li>
<p>
Retail – B2C just Like Dedicated Online Vegetable store in Main cities of India.
<br />
<li>
Online Farmers(wholesale) – B2B: Online Portal Where farmers can submit
their Agri Produce for Sale.
</li>
</ul>
Online Farmers(wholesale) – B2B: Online Portal Where farmers can submit their Agri Produce for Sale.
</p>
<div class="footer">
&copy;kisanmarket<br /><br />
<i class="fab fa-facebook" style="font-size: 24px; color: darkblue"></i>
......
views/homepage.ejs
View file @ 0a3846a2
......@@ -44,7 +44,7 @@
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 1vw;
font-size: 20px;
line-height: 50px;
}
......@@ -84,6 +84,7 @@
.dropdown:hover .dropdown-content {
display: block;
position: relative;
}
.active {
color: white;
......@@ -119,6 +120,7 @@
}
@media (max-width: 700px) {
#menu_label {
font-size: 1.4em;
display: block;
}
.ul {
......@@ -150,19 +152,21 @@
text-align: center;
}
#menu:checked ~ ul ul.ul {
position: fixed;
position: relative;
z-index: -2;
margin: 0;
display: block;
z-index: 9;
right: 0;
top: 0;
}
#menu:checked ~ ul ul#ul2 {
position: fixed;
position: relative;
z-index: -2;
display: block;
z-index: 9;
right: 0;
top: 190px;
top: 0;
}
.dropdown-content {
width: 100vw;
......@@ -245,8 +249,15 @@
/* Slideshow container */
.slideshow-container {
position: relative;
margin: 0 25px;
display: none;
}
@media only screen and (min-width: 910px) {
.slideshow-container {
display: block;
position: relative;
margin: 20px 15px;
}
}
/* Caption text */
......
views/product.ejs
View file @ 0a3846a2
......@@ -431,18 +431,18 @@
border-radius: 10px;
aspect-ratio: 1/1;">
</div>
<div style="display:flex; flex-direction:row; justify-content:space-around;height: 50px;">
<div style="display:flex; flex-direction:column; height:100%;justify-content:space-between">
<div style="font-size: 0.70rem ; font-weight: 600;">${contents.names[ind]}</div>
<div style="font-size: 0.55rem;">Updated On : ${contents.dates[ind]}</div>
<div style="font-size:0.6rem;">Price :${contents.price[ind]}</div></div>
<div style="display:flex; flex-direction:column; gap: 10%; justify-content:space-between;">
<button style="width:100%;font-size: 0.5rem; float: right; padding :1%;border-radius:8px; background: linear-gradient(
<div>
<div>
<div style="font-size: 1em ; padding: 0 0 5px 5px; font-weight: 600;">${contents.names[ind]}</div>
<div style="font-size: 0.8em; padding: 0 0 5px 5px;">Updated On : ${contents.dates[ind]}</div>
<div style="font-size:0.8em; padding: 0 0 5px 5px;">Price :${contents.price[ind]}</div></div>
<div>
<button style="width:100%; font-size: 0.8em; float: right; padding :1%; margin-bottom: 5px; border-radius:8px; background: linear-gradient(
to top left,
rgb(155, 250, 176),
rgb(133, 245, 235)
);">Add to Cart🛒</button>
<button style="width:100%;font-size: 0.5rem; float: right;border-radius:8px; padding :0.2vw; background: linear-gradient(
);">Add to Cart 🛒</button>
<button style="width:100%;font-size: 0.8em; float: right;border-radius:8px; padding :0.2vw; background: linear-gradient(
to top left,
rgb(155, 250, 176),
rgb(133, 245, 235)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment