change

Birkbeck2 · Dec 23, 2023 · a1cd037 · a1cd037
1 parent dfb84b6
commit a1cd037
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 10 deletions.
diff --git a/about.html b/about.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -43,7 +44,12 @@ <h1> About Us</h1>
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/antioxidants.html b/antioxidants.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -38,7 +39,12 @@
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/carbonhydrate.html b/carbonhydrate.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -45,7 +46,12 @@
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/contact.html b/contact.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -30,9 +31,6 @@
             </nav>
         </header>
         <main>
-
-        </main>
-        <footer>
             <h1>Contact Form</h1>
             <div class="formcontainer">
                 <form method="post" action="#">
@@ -55,6 +53,14 @@ <h1>Contact Form</h1>
                     <button type="submit">Submit</button>
                 </form>
             </div>
+        </main>
+        <footer>
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/food.html b/food.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -67,7 +68,12 @@
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -33,11 +34,16 @@
             <div class="mainpic">
                 <img src="img/collage.jpg" alt="food collage image">
                 <div class="maintitle">Discover Food Ingredient Now!</div>
-                <button class="picbtn"><a href="food.html">Explore</a></button>
+                <a href="food.html"><button class="picbtn">Explore</button></a>
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/protein.html b/protein.html
@@ -5,6 +5,7 @@
         <meta charset="UTF-8">
         <title>Kunrong's Website</title>
         <link rel="stylesheet" href="style.css">
+        <script src="https://kit.fontawesome.com/72bafd2989.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <header>
@@ -41,7 +42,12 @@
             </div>
         </main>
         <footer>
-
+            <div class="footercontainer">
+                <a href="contact.html"><button class="navbtn">Email</button></a>
+                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+                <a href="#"><i class="fa-brands fa-instagram"></i></a>
+                <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/style.css b/style.css
@@ -127,6 +127,7 @@ li a:hover{
     background-color: rgb(21, 255, 130);
     border: 1px solid rgb(21, 255, 130);
     color: #ffffff;
+    transition: 0.5s;
 }
 
 .category img{
@@ -283,6 +284,26 @@ input[type=text], input[type=email], textarea{
     background-color:rgb(255, 255, 255);
   }
 
+  .footercontainer{
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    color: rgb(0, 0, 0);
+    text-align: center;
+    padding: 30px;
+  }
+
+i{
+    color: black;
+    padding: 0 10px;
+    font-size: 20px;
+}
+
+.footercontainer button{
+    color:black;
+    background-color: #ffffff;
+}
+
 @media only screen and (min-width:768px) and (max-width:1023px){
     .mainpic{
         font-size: 27px;