diff --git a/public/main.css b/public/main.css
index 0e4b42dbcaa37c58efd8dabfb73c705320579108..7f43f7dbc6fa2cf6c65cf871714137d6cf624cca 100644
--- a/public/main.css
+++ b/public/main.css
@@ -209,4 +209,103 @@ p{
+/* Listing page css */
+
+#items {
+ text-align: center;
+ padding-top: 20px;
+ padding-left: 20px;
+
+
+}
+
+#items .pro-container{
+ display: flex;
+ justify-content: space-between;
+ padding-top: 20px;
+ flex-wrap: wrap;
+}
+
+#items .pro{
+ width: 13%;
+ min-width: 250px;
+ padding: 0px 12px;
+ border: 1px solid #d4cadf;
+ border-radius: 25px;
+ cursor: pointer;
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.02 );
+ transition: 0.2s ease;
+ position: relative;
+}
+
+#items .pro:hover{
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.06 );
+
+}
+
+#items .pro .listing{
+ width: 100%;
+ border-radius: 20px;
+
+}
+
+#items .pro .des{
+ text-align: start;
+ padding: 10px 0;
+}
+
+#items .pro.des.spam{
+ color: #606063;
+ font-size: 12px;
+}
+
+
+#items .pro2{
+ width: 13%;
+ min-width: 250px;
+ padding: 0px 12px;
+ border: 1px solid #d4cadf;
+ border-radius: 25px;
+ cursor: pointer;
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.02 );
+ transition: 0.2s ease;
+ position: relative;
+}
+
+#items .pro:hover{
+ box-shadow: 20px 20px 30px rgb(0, 0,0,0.06 );
+
+}
+
+#items .pro .listing{
+ width: 100%;
+ border-radius: 20px;
+
+}
+
+#items .pro .des{
+ text-align: start;
+ padding: 10px 0;
+}
+
+#items .pro.des.spam{
+ color: #606063;
+ font-size: 12px;
+}
+
+
+
+
+
+
+
+
+@media (max-width: 799px ){
+
+}
+
+
+
+
+
diff --git a/views/about.ejs b/views/about.ejs
index abd895c769f5dd78c8cf9e879b2967c3a4bebbe5..eaa9f6082cbb2f186a9e8c39ec3e7ecd6af76429 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
diff --git a/views/correct.ejs b/views/correct.ejs
index 031fbf95631ea2559fe17c21a6109ad91995b1eb..6cd81cf48ed0239060bfe3f48a516ae13df60df7 100644
--- a/views/correct.ejs
+++ b/views/correct.ejs
@@ -3,6 +3,7 @@
<head>
<title>Correct Password and Username <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1> <%=shopName%></h1>
diff --git a/views/incorrect.ejs b/views/incorrect.ejs
index 9bcffa9e01660d83302282d0666d73d7350e9d48..215d4e97b1544b83b5bbd3f2ce72d6fa59f5fffb 100644
--- a/views/incorrect.ejs
+++ b/views/incorrect.ejs
@@ -3,6 +3,7 @@
<head>
<title>Incorrect Username or Password <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Error <%=shopName%></h1>
diff --git a/views/index.ejs b/views/index.ejs
index dff6b66197b6b965ba9b445b432ccecb434ba619..6c901b76f31608b29d055f4b9830ae50cf42f521 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
@@ -47,7 +48,7 @@
</div>
<div class = "feature-box">
- <img src = "/public/socialmedia.png" class = "f3_logo" alt="">
+ <a href="/."><img src = "/public/socialmedia.png" class = "f3_logo" alt=""></a>
<h6> Follow us </h6>
</div>
<div class = "feature-box">
diff --git a/views/itemlist.ejs b/views/itemlist.ejs
index 40c9d11711d256c981179f8f6781fa3f579f472e..3ecb1c46f53db6580c8976c4e21cb9a94e1a1622 100644
--- a/views/itemlist.ejs
+++ b/views/itemlist.ejs
@@ -3,6 +3,7 @@
<head>
<title> List on <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>List on <%=shopName%></h1>
diff --git a/views/itemlisted.ejs b/views/itemlisted.ejs
index 8e7e3a2dd9f699c8d954ee948d0933b1cb90704a..7334486413cd5a13781ed6c5bfc6b914db6aec35 100644
--- a/views/itemlisted.ejs
+++ b/views/itemlisted.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <script src="https://kit.fontawesome.com/ad1bd830b9.js" crossorigin="anonymous"></script>
</head>
<body>
@@ -18,17 +19,21 @@
</div>
</section>
- <section id = "items">
- <%listingAdded.forEach(function(list){ %>
- <ul>
- <li><%=list.title%></li>
- <li><%=list.name%></li>
- <li><%=list.price%></li>
- <li><%=list.condi%></li>
- <li><%=list.username%></li>
- <li> <img alt=" Embedded Image" src = "data:image/png;base64,<%=list.img%>"> </li>
- </ul>
- <% }) %>
+ <section id = "items" class="section-p2">
+ <%listingAdded.forEach(function(list){%>
+ <div class = "pro-container">
+ <div class = "pro">
+ <img alt=" Embedded Image" src = "data:image/png;base64,<%=list.img%>" class="listing">
+ <div class = "des">
+ <span><%=list.username%></span>
+ <h5><%=list.title%></h5>
+ <h5><%=list.condi%></h5>
+ <h4><%=list.price%></h4>
+ </div>
+ <a href="#"> <i class="fa-sharp fa-solid fa-cart-shopping fa-beat"></i></i></i></a>
+ </div>
+ </div>
+ <% })%>
</section>
diff --git a/views/loggedout.ejs b/views/loggedout.ejs
index db6ac1b688063cd8af84738dbf7e168032bfba24..615e5569e065c9869cfcaaff3bf57925991b410b 100644
--- a/views/loggedout.ejs
+++ b/views/loggedout.ejs
@@ -3,6 +3,7 @@
<head>
<title>Logged out</title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1> <%=shopName%> </h1>
diff --git a/views/login.ejs b/views/login.ejs
index d4f43f484a0db10422778b1d16bd8d3b25cd4bf6..194aa640ec27deda39f55faf4610ea526e24b147 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
diff --git a/views/register.ejs b/views/register.ejs
index 3401827b91fcf7d0a57ea8e9bf6105c77fe15b3a..fabd0ef32c645f617393e929e300bf816951edad 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -3,6 +3,7 @@
<head>
<title>Register for <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Register for <%=shopName%></h1>
diff --git a/views/registered.ejs b/views/registered.ejs
index 309930ef54c82079093111f80ec2e957c3b65aff..c2aea3a59a6fb482309923db1dbd1af2525618a0 100644
--- a/views/registered.ejs
+++ b/views/registered.ejs
@@ -3,6 +3,7 @@
<head>
<title>Berties Books</title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<p>Hello <%=newUser[1]%> <%=newUser[2]%>, you are now registered! We will send an email
diff --git a/views/search.ejs b/views/search.ejs
index 823097bcd8f30466ffc15ac98f350cdb799833b6..1491b321221cd5db8f510a99c2ee27194145ad58 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -3,6 +3,7 @@
<head>
<title>Search <%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
<h1>Search <%=shopName%></h1>
diff --git a/views/stock.ejs b/views/stock.ejs
index 52c0e6b65fa00c054b53e14b59e1055e6f3b1258..790f06fd97b6cac6db09f63be9bb6870395d721e 100644
--- a/views/stock.ejs
+++ b/views/stock.ejs
@@ -3,6 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>