diff --git a/College Dashboard/index.html b/College Dashboard/index.html
new file mode 100644
index 0000000..ccce673
--- /dev/null
+++ b/College Dashboard/index.html	
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
+    <link href="styles.css" rel="stylesheet">
+
+    <title>PVG Dashboard</title>
+</head>
+
+<body>
+    <div class="container-fluid">
+        <nav class="navbar navbar-dark bg-dark">
+            <div class="container-fluid">
+                <a class="navbar-brand">Pune Vidyarthi Griha's College of Engineering and Technology, Pune</a>
+                <form class="d-flex">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                    <button class="btn btn-primary" type="submit">Search</button>
+                </form>
+            </div>
+        </nav>
+        <div class="row">
+            <div class="col-sm-2">
+                <div class="h-100">
+                    <nav class="nav flex-column">
+                        <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
+                        <a class="nav-link" href="#">Home</a>
+                        <a class="nav-link" href="#">Students</a>
+                        <a class="nav-link" href="#">Teachers</a>
+                        <a class="nav-link" href="#">Attendance</a>
+                        <a class="nav-link" href="#">Staff</a>
+                        <a class="nav-link" href="#">Department</a>
+                        <a class="nav-link" href="#">Events</a>
+                        <a class="nav-link" href="#">Settings</a>
+                    </nav>
+                </div>
+            </div>
+            <div class="col mt-5">
+                <div class="row">
+                    <div class="col-sm-4">
+                        <div class="card">
+                            <div class="card-body text-center">
+                                <h5 class="card-title fw-bold fs-2 p-1 w-50 mx-auto border bg-light">1500</h5>
+                                <p class="card-text">Total number of students for A.Y. 2021-2022</p>
+                                <a href="#" class="btn btn-primary">See details</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="card">
+                            <div class="card-body text-center">
+                                <h5 class="card-title fw-bold fs-2 p-1 w-50 mx-auto border bg-light">50</h5>
+                                <p class="card-text">Total number of teaching staff for A.Y. 2021-2022</p>
+                                <a href="#" class="btn btn-primary">See details</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="card">
+                            <div class="card-body text-center">
+                                <h5 class="card-title fw-bold fs-2 p-1 w-50 mx-auto border bg-light">40</h5>
+                                <p class="card-text">Total non-teaching staff for A.Y. 2021-2022</p>
+                                <a href="#" class="btn btn-primary">See details</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col mt-3">
+                        <div class="card">
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Placements</h5>
+                                <p class="card-text">A.Y. 2020-2021
+                                </p>
+                                    <table class="charts-css column label-align-center show-heading show-labels show-4-secondary-axes">
+                                        <tbody>
+                                            <tr class="multiple">
+                                                <th scope="row">Electrical</th>
+                                                <td style="--size: 0.63"><span class="data">68</span></td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Printing</th>
+                                                <td style="--size: 0.7"><span class="data">54</span></td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">Civil</th>
+                                                <td style="--size: 0.5">60</td>
+                                            </tr>
+                                            <tr>
+                                                <th scope="row">IT</th>
+                                                <td style="--size: 0.95">95</td>
+                                            </tr>
+                                              <tr> 
+                                                <th scope="row">CS</th> 
+                                                <td style="--size: 0.80">101</td>
+                                              </tr>
+                                        </tbody>
+                                        
+                                    </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/College Dashboard/styles.css b/College Dashboard/styles.css
new file mode 100644
index 0000000..7483bc8
--- /dev/null
+++ b/College Dashboard/styles.css	
@@ -0,0 +1,25 @@
+body, html, .container-fluid, .sidebar, .body {
+    height: 100%;
+    min-height: 100%;
+}
+
+.navbar {
+    position: relative;
+}
+
+.nav {
+    height: 100%;
+}
+
+.nav.flex-column {
+    background-color: rgb(230,230,230);
+}
+
+.col-sm {
+    width: 25vw;
+    max-width: 25%;
+}
+
+table tr {
+    height: 175px;
+}
\ No newline at end of file
diff --git a/JQuery web app/ann1.jpeg b/JQuery web app/ann1.jpeg
new file mode 100644
index 0000000..755ecd6
Binary files /dev/null and b/JQuery web app/ann1.jpeg differ
diff --git a/JQuery web app/ann2.gif b/JQuery web app/ann2.gif
new file mode 100644
index 0000000..cbdc5b9
Binary files /dev/null and b/JQuery web app/ann2.gif differ
diff --git a/JQuery web app/mobile.html b/JQuery web app/mobile.html
new file mode 100644
index 0000000..201a3bc
--- /dev/null
+++ b/JQuery web app/mobile.html	
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
+      <link rel = "stylesheet" 
+         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
+      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
+      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
+   </head>
+   
+   <body>
+      <div data-role = "page" id = "page1">
+         <div data-role = "header">
+            <h2>Artificial neural networks</h2>
+         </div>
+         
+         <div data-role = "main" >
+            <center><h1>About ANNs</h1>
+            <img src="ann1.jpeg" alt="mk" width="500" height="300"> </center>
+            <h2>What are ANNs?</h2>
+            <p>The term "Artificial neural network" refers to a biologically inspired sub-field of artificial intelligence modeled after the brain. An Artificial neural network is usually a computational network based on biological neural networks that construct the structure of the human brain. Similar to a human brain has neurons interconnected to each other, artificial neural networks also have neurons that are linked to each other in various layers of the networks. These neurons are known as nodes.</p>
+                <a href = "#page2"><center>click here to see the working of ANN</center></a></p>
+         </div>
+      </div>
+      
+      <div data-role = "page" id = "page2">
+         <div data-role = "header">
+            <h1>ANN WORKING</h1>
+         </div>
+         
+         <div role = "main" class = "ui-content">
+            <p>The typical Artificial Neural Network looks something like this</p>
+            <br>
+            <center><img src="ann2.gif" alt="mk" width="500" height="300"> </center>
+            <p><a href = "#page1"><center>Back to previous page</center></a></p>
+         </div>        
+      </div>
+   </body>
+</html>
\ No newline at end of file
diff --git a/Website designs/index.css b/Website designs/index.css
new file mode 100644
index 0000000..0b2bddb
--- /dev/null
+++ b/Website designs/index.css	
@@ -0,0 +1,236 @@
+body{
+    background-color:rgb(231, 231, 231);
+    font-size: 15px;
+}
+.container{
+    margin: 30px;
+    padding: 10px;
+    height: 640px;
+}
+/*Stylesheet*/
+.main{
+    background-color: white;
+}
+#menu a:link,#menu a:visited{
+    color: black;
+    text-decoration: none;
+    cursor:auto;
+}
+#defaultmenu a:link,#defaultmenu a:visited{
+    display: inline;
+    color: blue;
+    font-size: 16px;
+}
+/*Stylesheet 1*/
+.border{
+    border-radius: 4px;
+}
+#top{
+    background-color:rgb(45, 165, 75);
+    color: white;
+    margin: 20px;
+    padding: 3px 20px 20px;
+    line-height: 15px;
+}
+#left{
+    float: left;
+    width:25%;
+    margin-left: 10px;
+}
+#left a:link,#left a:visited{
+    width: 165px;
+    background-color: rgb(231, 231, 231);
+    text-decoration: none;
+    color: black;
+    display: block;
+    margin: 5px 0px;
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    border: 1px rgb(180, 178, 178) solid;
+}
+#left a:hover{
+    background-color: white;
+}
+#left a:first-child{
+    background-color: rgb(45, 165, 75);
+    color: white;
+    font-weight: bold;
+}
+#mid{
+    float: left;
+    width:40%;
+}
+#mid a:link,#mid a:visited{
+    color: black;
+    display: inline;
+}
+#mid a:hover{
+    text-decoration: none;
+}
+
+#right{
+    background-color:rgb(67, 128, 219);
+    color: white;
+    float: right;
+    width: 25%;
+    margin-right: 45px;
+    padding: 20px;
+    height: 50%;
+    box-sizing: border-box;
+}
+#bottom{
+    float: right;
+    background-color: rgb(231, 231, 231);
+    font-size: 13px;
+    margin: 20px 40px;
+    padding: 15px 30px;
+    border: 1px rgb(180, 178, 178) solid;
+    height: 60px;
+    clear: both;
+}
+/*Stylesheet 2*/
+#one{
+    color: white;
+    font-size: 20px;
+    padding: 0px 20px;
+    margin-bottom: 35px;
+    line-height: 20px;
+}
+.two{
+    padding: 5px 20px 20px;
+}
+.two a:link,.two a:visited{
+    color: rgb(201,41,41);
+    text-decoration: none;
+}
+.two a:hover{
+    color: rgb(201,41,41);
+    text-decoration: underline;
+}
+#three{
+    background-color: rgb(248, 210, 248);
+    color: rgb(201, 41, 41);
+    font-size: 16px;
+}
+#four{
+    color: white;
+    text-align: center;
+    padding: 10px;
+    margin-top: 10px;
+}
+#five{
+    margin: 40px;
+}
+#five a:link,#five a:visited{
+    background-color: white;
+    color: rgb(201, 41, 41);
+    text-decoration: none;
+    text-align: center;
+    padding: 7px 30px;
+    margin: 10px;
+    font-size: 18px;
+    border-radius: 20px;
+}
+#five a:hover{
+    background-color: rgb(201, 41, 41);
+    border: 1px solid white;
+    color: white;
+}
+#five a.active{
+    background-color: rgb(201, 41, 41);
+    border: 1px solid white;
+    color: white;
+}
+/* Stylesheet 3*/
+#main_page{
+    padding: 20px;
+}
+#top_link{
+    margin: 40px 0;
+}
+#top_link a:link,#top_link a:visited{
+    color: white;
+    background-color: rgb(94, 100, 100);
+    padding: 7px 30px;
+    margin: 0 3px;
+    text-decoration: none;
+
+}
+#top_link a.activelink{
+    background-color: rgb(45, 165, 75);
+    color: white;
+}
+#top_link a:hover{
+    background-color: rgb(153, 150, 150);
+}
+#link{
+    width: 80%;
+}
+#link a:link,#link a:visited{
+    color: black;
+}
+#link a:hover{
+    color: rgb(45, 165, 75);
+}
+#no-link{
+    background-color: rgb(231, 231, 231);
+    padding: 0px 10px 15px;
+    margin: 20px 0 15px;
+    border: 1px solid rgb(184, 189, 189);
+    box-sizing: border-box;
+}
+/* Stylesheet 4*/
+#div1{
+    background-color: black;
+    color: rgb(82, 206, 113);
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    padding: 20px 30px ;
+}
+#div2{
+    margin: 20px 0;
+    float: left;
+}
+#div2 a:link,#div2 a:visited{
+    color: rgb(82, 206, 113);
+    text-decoration: none;
+    line-height: 10px;
+}
+#div2 a:hover{
+    color: white;
+}
+#div2 a.active_link{
+    color: white;
+}
+#div3{
+    float: right;
+    width: 50%;
+    border: 1px solid white;
+    color: white;
+    padding: 10px 15px 20px;
+    width: 35%;
+    margin-right: 60px;
+    border-radius: 5px;
+}
+#div4{
+    clear: both;
+    line-height: 25px;
+}
+#div4 a:link,#div4 a:visited{
+    color: white;
+    padding: 0 10px 0 0;
+}
+#div4 a:hover{
+    color: rgb(82, 206, 113);
+}
+#div5{
+    color: white;
+    font-size: 13px;
+    text-align: center;
+    border: 1px solid white;
+    padding: 15px;
+    border-radius: 5px;
+    width: 80%;
+    margin: auto;
+    margin-top: 20px;
+}
\ No newline at end of file
diff --git a/Website designs/index.html b/Website designs/index.html
new file mode 100644
index 0000000..0cae234
--- /dev/null
+++ b/Website designs/index.html	
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <style>
+        .iframe_container{
+            overflow: hidden;
+            /* 16:9 aspect ratio */
+            padding-top: 56.25%;
+            position: relative;
+        }
+        .iframe_container iframe {
+        border: 0;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="iframe_container">
+        <iframe src="style.html" name="iframe_a" width="100%" style="border: none;"></iframe>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Website designs/style.html b/Website designs/style.html
new file mode 100644
index 0000000..c471255
--- /dev/null
+++ b/Website designs/style.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div class="main container">
+        <div id="menu">
+            <h1>Welcome to My Homepage</h1>
+            Use the menu to select different Stylesheets
+            <ul>
+                <li><a href="style1.html">Stylesheet1</a></li>
+                <li><a href="style2.html">Stylesheet2</a></li>
+                <li><a href="style3.html">Stylesheet3</a></li>
+                <li><a href="style4.html">Stylesheet4</a></li>
+                <li><a href="#">No Stylesheet</a></li>
+            </ul>
+        </div>
+        <div id="defaultmenu">
+            <p>
+                <h1>Same Page Different Stylesheets</h1>
+                This is a demonstration of how different stylesheets can change the layout of your html page.You can change the layout of this page by selecting<br> different stylesheets in the menu,or by selecting one of the following links:<br>
+                <a href="style1.html">Stylesheet 1</a>,
+                <a href="style2.html">Stylesheet 2</a>,
+                <a href="style3.html">Stylesheet 3</a>,
+                <a href="style4.html">Stylesheet 4</a>.
+            </p>
+            <p>
+                <h2>No Styles</h2>
+                This page uses DIV elements to group different sections of the HTML page.Click here to see how page looks like with no stylesheet:<br>
+                <a href="#">No Stylesheet</a>.
+            </p>
+            <p>
+                <h3>Side-Bar</h3>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><br>
+                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<bR> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum <br>iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio<br> dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+            </p>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Website designs/style1.html b/Website designs/style1.html
new file mode 100644
index 0000000..b5c8bbb
--- /dev/null
+++ b/Website designs/style1.html	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <link href="index.css" rel="stylesheet">
+</head>
+<body style="font-size: 18px;">
+    <div class="main container">
+        <div id="top" class="border">
+            <h1>Welcome to My Homepage</h1>
+            Use the menu to select different Stylesheets
+        </div>
+        <div id="left">
+            <ul>
+                <a href="#">Stylesheet 1</a>
+                <a href="style2.html">Stylesheet 2</a>
+                <a href="style3.html">Stylesheet 3</a>
+                <a href="style4.html">Stylesheet 4</a>
+                <a href="style.html">No Stylesheet</a>
+            </ul>
+        </div>
+        <div id="mid">
+            <h1>Same Page Different StyleSheets</h1>
+            This is demonstration of how different stylesheets can change the layout of your HTML page.
+            You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:<br>
+            <a href="#">Stylesheet1</a>,
+            <a href="style2.html">Stylesheet2</a>,
+            <a href="style3.html">Stylesheet3</a>,
+            <a href="style4.html">Stylesheet4</a>.
+            <h2>No Styles</h2>
+            This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:<br>
+            <a href="style.html">No Stylesheet</a>.
+        </div>
+        <div class="border" id="right">
+            <h2>Side Bar</h2>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        </div>
+        <div class="border" id="bottom">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+        </div>
+    </div>    
+</body>
+</html>
\ No newline at end of file
diff --git a/Website designs/style2.html b/Website designs/style2.html
new file mode 100644
index 0000000..5021c89
--- /dev/null
+++ b/Website designs/style2.html	
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <link href="index.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container" style="background-color: rgb(201, 41, 41);">
+        <div id="one">
+            <h1>Welcome to My Homepage</h1>
+            Use the menu to select different Stylesheets
+        </div>
+        <div class="main two">
+            <div style="width: 75%;">
+                <h1 style="color: rgb(201, 41, 41);">Same Page Different Stylesheets</h1>
+                This is a demonstration of how different stylesheets can change the layout of your HTML page.
+                You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:<br>
+                <a href="style1.html">Stylessheet1</a>,
+                <a href="#">Stylessheet2</a>,
+                <a href="style3.html">Stylessheet3</a>,
+                <a href="style4.html">Stylessheet4</a>.
+                <h2 style="color: rgb(201, 41, 41);">No Styles</h2>
+                This page uses DIV elements to group different sections of the HTML page.
+                Click here to see how the page looks like with no stylesheet:<br>
+                <a href="style.html">No Stylesheet</a>.
+            </div>
+        </div>
+        <div id="three" class="two">
+            <h3 style="color: rgb(201, 41, 41);">Side-Bar</h3>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        </div>
+        <div id="four">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+            <div id="five">
+                <a href="style1.html">Stylessheet1</a>
+                <a href="#" class="active">Stylessheet2</a>
+                <a href="style3.html">Stylessheet3</a>
+                <a href="style4.html">Stylessheet4</a>
+            </div>
+        </div>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/Website designs/style3.html b/Website designs/style3.html
new file mode 100644
index 0000000..7662d1e
--- /dev/null
+++ b/Website designs/style3.html	
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <link href="index.css" rel="stylesheet">
+</head>
+<body style="font-size: 17px;">
+    <div id="main_page" class="main container">
+        <h1 style="color: rgb(45, 165, 75);">Welcome to My Homepage</h1>
+        <div style="font-size: 20px;">Use the menu to select Stylesheets</div>
+        <div id="top_link">
+            <a href="style1.html">Stylesheet 1</a>
+            <a href="style2.html">Stylesheet 2</a>
+            <a href="#" class="activelink">Stylesheet 3</a>
+            <a href="style4.html">Stylesheet 4</a>
+            <a href="style.html">No Stylesheet</a>
+        </div>
+        <div id="link">
+            <h1 style="color: rgb(45, 165, 75);">Same Page Different Stylesheets</h1>
+            This is a demonstration of how different stylesheets can change the layout of your HTML page.
+            You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:<br>
+            <div style="margin-top: 7px;">
+                <a href="style1.html">Stylesheet1</a>,
+                <a href="style2.html">Stylesheet2</a>,
+                <a href="#">Stylesheet3</a>,
+                <a href="style4.html">Stylesheet4</a>,
+            </div>
+            <h2  style="color: rgb(45, 165, 75);">No Styles</h2>
+            This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:<br>
+            <a href="style.html">No Stylesheet</a>.
+        </div>
+        <div id="no-link">
+            <h2 style="color: rgb(45, 165, 75);">Side-Bar</h2>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        </div>
+        <div style="text-align: center;font-size: 14px;">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Website designs/style4.html b/Website designs/style4.html
new file mode 100644
index 0000000..4a5bb39
--- /dev/null
+++ b/Website designs/style4.html	
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS</title>
+    <link href="index.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container" id="div1">
+        <h1>Welcome to My Homepage</h1>
+        <div style="line-height:0px;">Use the menu to select different Stylesheets</div>
+        <div id="div2">
+            <ul style="line-height: 27px;">
+                <li><a href="style1.html">Stylesheet 1</a></li>
+                <li><a href="style2.html">Stylesheet 2</a></li>
+                <li><a href="style3.html">Stylesheet 3</a></li>
+                <li><a href="#" class="active_link">Stylesheet 4</a></li>
+                <li><a href="style.html">No Stylesheet</a></li>
+            </ul>
+        </div>
+        <div id="div3">
+            <h3>Side-Bar</h3>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+        </div>
+        <div id="div4">
+            <h1>Same Page Different Stylesheets</h1>
+            This is a demonstration of how different stylesheets can change the layout of your HTML page.You can change the layout of this page by selecting different stylesheets in the menu,
+            or by selecting one of the following links:<br>
+            <a href="style1.html">Stylesheet1</a>,
+            <a href="style2.html">Stylesheet2</a>,
+            <a href="style3.html">Stylesheet3</a>,
+            <a href="#">Stylesheet4</a>.
+            <h2>No Styles</h2>
+            This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:<br>
+            <a href="style.html">No Stylesheet</a>.
+        </div>
+        <div id="div5">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
