diff --git a/index.html b/index.html
index ad0c495..6342fc0 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,10 @@ <h2>CSS Objects Series</h2>
   <p>Objects made with css:</p>
   <ol type="A">
     <li><a href="apple-logo.html">Apple Logo</a>, <a href="audi-logo.html">Audi Logo</a></li>
-    <li></li>
-    <li>____________________</li>
-    <li>____________________</li>
+    <li><a href = "instagram-logo.html">Instagram Logo</a></li>
     <li>____________________</li>
+    <li><a href = "youtube-logo.html">Youtube Logo</a></li>
+    <li><a href = "jio-logo.html">Jio Logo</a></li>
     <li><a href="facebook-logo.html">Facebook Logo (white background)</a>, <a href="facebook-logo-color.html">Facebook Logo (with background)</a></li>
     <li><a href="github-logo.html">Github Logo</a></li>
     <li>____________________</li>
diff --git a/instagram-logo.html b/instagram-logo.html
new file mode 100644
index 0000000..c4808af
--- /dev/null
+++ b/instagram-logo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Instagram logo</title>
+
+    <style>
+    .outer-body
+    {
+    
+       height:140px;
+      width:140px;
+      display:inline-block;
+      border-radius:22%;
+      padding:20px;
+      position:relative;
+    background-image: linear-gradient(to bottom right, rgba(0,0,255,0.5), rgba(255,0,0,0.6), rgb(252, 204, 99) );
+    
+    
+    }
+    
+    
+      .middle-body
+      {
+        display:inline-block;
+        border: 10px solid white;
+        height:110px;
+        width:110px;
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+       background-image: linear-gradient(to bottom right, rgba(0,0,255,0.5), rgba(255,0,0,0.4), rgb(252, 204, 99) );
+        border-radius:20%;
+        
+      }
+      
+      .inner-circle
+      {
+      border-radius:3px;
+        display:inline-block;
+        background-image: linear-gradient(to bottom right, rgba(0,0,255,0.4), rgba(255,0,0,0.4), rgb(252, 204, 99) );
+        border: 10px solid white;
+                
+        height:60px;
+        width:60px;
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+        border-radius: 50% 50% 50% 50%;
+        
+        
+      }
+      
+      .inner-corner-circle
+      {
+        height:18px;
+        width:18px;
+        background-color:white;
+        position:absolute;
+        display:inline-block;
+        right:7%;
+        top:7%;
+        
+        border-radius:50% 50% 50% 50%;
+        
+      }
+    </style>
+</head>
+<body>
+  <div class  = "outer-body">
+    
+      <div class = "middle-body">
+      
+          <div class = "inner-corner-circle"></div>
+        
+          <div class="inner-circle"> </div>
+    </div>
+   </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/jio-logo.html b/jio-logo.html
new file mode 100644
index 0000000..98f2df8
--- /dev/null
+++ b/jio-logo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Jio Logo</title>
+<style>
+.jio{
+font-size:100px;
+font-weight:bolder;
+color:white;
+position:absolute;
+font-family:Sans-serif;
+margin:0;
+top:50%;
+left:50%;
+transform:translate(-50%,-50%);
+}
+
+.box
+{
+height:120px;
+width:120px;
+position:relative;
+padding:50px;
+background-color:#FF0000;
+border-radius:50% 50% 50% 50%;
+
+}
+
+</style>
+
+</head>
+<body>
+
+<div class = "box">
+	<div class = "jio">
+    Jio
+    
+    </div>
+
+
+</div>
+
+</body>
+</html>
diff --git a/youtube-logo.html b/youtube-logo.html
new file mode 100644
index 0000000..bfb5d8a
--- /dev/null
+++ b/youtube-logo.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Youtube Logo</title>
+<style>
+.arrow-right {
+  width: 0; 
+  height: 0; 
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  
+  border-left: 60px solid white;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+}
+
+.box
+{
+height:80px;
+width:130px;
+position:relative;
+padding:50px;
+background-color:#FF0000;
+border-radius:20% 20% 20% 20%;
+
+}
+
+</style>
+
+</head>
+<body>
+
+<div class = "box">
+	<div class = "arrow-right">
+    
+    
+    </div>
+
+
+</div>
+
+</body>
+</html>
