diff --git a/360i.html b/360i.html
new file mode 100644
index 0000000..42f84be
--- /dev/null
+++ b/360i.html
@@ -0,0 +1,111 @@
+<html>
+<head>
+	
+	<h1>360 i</h1>
+<h2>
+<div id="box">
+	<div class = "box" id = "LogIn"><a href="main.html">LOG IN</a></div></h2>
+	<h3>Lorem ipsum dolor sit amet, 
+		consectetur adipiscing elit, sed do eiusmod tempor incididunt 
+		ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+		quis nostrud exercitation</h3>
+
+
+<div class="img">
+<img src="image/background.jpg"  style= "widht:100%; height:100%"; position:absolute;top:0 z-index: -1;>
+
+	<style>
+	
+	
+	h1 {
+		
+		position: absolute;
+		text-align: center;
+		font-size: 24px;
+		font-family: "Helvetica";
+		font-weight: medium;
+		letter-spacing: 2px;
+		padding: 130px 0px 0px 260px;
+		color: rgb(255, 1255, 255);
+
+	}
+
+	h2{position: absolute;
+		text-align: center;
+		font-size: 14px;
+		font-family: "Helvetica";
+		font-weight: lighter;
+		text-decoration: none;
+		padding: 600px 0px 20px 170px;
+		color: rgb(255,255,255);
+		margin: auto;
+		letter-spacing: 3px;
+	}
+	
+h3{position: absolute;
+		text-align: center;
+		font-size: 10px;
+		font-family: "Helvetica";
+		font-weight: lighter;
+		text-decoration: none;
+		padding: 200px 0px 20px 220px;
+		color: rgb(3, 196, 173);
+		margin: auto;
+		letter-spacing: 1px;
+		margin-top: 20px;
+    margin-bottom: 100px;
+    margin-right: 600px;
+    margin-left: 0px;
+	}
+
+	a:link {text-decoration: : none;
+		color: rgb(255,255,255);
+	}
+	
+	a:hover, a:active {
+    color: rgb(196, 3, 176);
+    text-decoration: none;
+}
+	
+
+
+	#LogIn {
+
+		
+	position:center;
+	 width: 100% ;
+ 	 height:2%;
+	margin:auto;
+  padding: 10px;
+  padding-right:80px;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  box-shadow: rgba(0,0,0,0.1);
+
+}
+
+ 
+		
+	</<style>
+	</head>
+<body>
+
+
+
+
+
+
+
+
+
+	</body>
+
+
+
+	
+
+	
+	
+
+
+</html>
\ No newline at end of file
diff --git a/image/background.jpg b/image/background.jpg
new file mode 100644
index 0000000..5652e5d
Binary files /dev/null and b/image/background.jpg differ
diff --git a/image/background2.jpg b/image/background2.jpg
new file mode 100644
index 0000000..a4c1350
Binary files /dev/null and b/image/background2.jpg differ
diff --git a/image/background3.jpg b/image/background3.jpg
new file mode 100644
index 0000000..422692e
Binary files /dev/null and b/image/background3.jpg differ
diff --git a/image/logo.png b/image/logo.png
new file mode 100644
index 0000000..a58de03
Binary files /dev/null and b/image/logo.png differ
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..a58de03
Binary files /dev/null and b/logo.png differ
diff --git a/main.html b/main.html
new file mode 100644
index 0000000..76947e2
--- /dev/null
+++ b/main.html
@@ -0,0 +1,134 @@
+<html>
+<head>
+	
+	<h1>360i</h1>
+<h2>
+<div id="box">
+	<div class = "box" id = "LogIn"><a href="main.html">LOG IN</a></div>
+	</h2>
+	<h3>Lorem ipsum dolor sit amet, 
+		consectetur adipiscing elit, sed do eiusmod tempor incididunt 
+		ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+		quis nostrud exercitation</h3>
+
+	<div id="category1">
+	<h4>Category1</h4></div>
+
+
+<div class="img">
+<img src="image/background3.jpg"  style= "widht:100%; height:100%"; position:absolute;top:0 z-index: -1;>
+	<style>
+	
+	
+	h1 {
+		
+		position: absolute;
+		text-align: center;
+		font-size: 24px;
+		font-family: "Helvetica";
+		font-weight: medium;
+		letter-spacing: 2px;
+		padding: 130px 0px 0px 260px;
+		color: rgb(255,255,255);
+		margin: auto;
+		overflow: visible;
+	}
+
+	h2{position: absolute;
+		text-align: center;
+		font-size: 14px;
+		font-family: "Helvetica";
+		font-weight: lighter;
+		text-decoration: none;
+		padding: 600px 0px 20px 170px;
+		color: rgb(255,255,255);
+		margin: auto;
+		letter-spacing: 3px;
+	}
+	
+h3{position: absolute;
+		text-align: center;
+		font-size: 10px;
+		font-family: "Helvetica";
+		font-weight: lighter;
+		text-decoration: none;
+		padding: 200px 0px 20px 220px;
+		color: rgb(3, 196, 173);
+		margin: auto;
+		letter-spacing: 1px;
+		margin-top: 20px;
+    margin-bottom: 100px;
+    margin-right: 600px;
+    margin-left: 0px;
+	}
+
+	a:link {text-decoration: : none;
+		color: rgb(255,255,255);
+	}
+	
+	a:hover, a:active {
+    color: rgb(196, 3, 176);
+    text-decoration: none;
+}
+	
+
+
+	#LogIn {
+
+		
+	position: relative;
+	 width: 1100px ;
+ 	 height: 1000px;
+		margin-top: 20px;
+    margin-bottom: 100px;
+   
+	padding: 100px 0px 0px 130px;
+	
+
+  
+  background-color: rgba(255,255,255, 0.1);
+  border-radius: 10px;
+  
+}
+
+
+h4 { position: absolute;
+		text-align: center;
+		font-family: "Helvetica";
+		font-size: 18px;
+		font-weight: lighter;
+		text-decoration: none;
+		padding: 19px 0px 0px 48px;
+		color: rgb(72, 11, 130);
+		margin: auto;
+		letter-spacing: 3px;
+		}
+ 
+
+ #category1 {position: absolute;
+	 width: 200px ;
+ 	 height: 60px;
+	margin-top: 800px;
+	margin-left: 350px;
+    
+   
+	padding: 0px 0px 0px 0px;
+	
+
+  
+  background-color: rgba(255,255,255,0.3);
+  border-radius: 10px;}
+		
+	</<style>
+	</head>
+<body>
+	
+
+
+
+
+
+
+
+
+	</body>
\ No newline at end of file
