WSoC-VITAP · salome-rao · Aug 29, 2021
diff --git a/OpenSource101 b/OpenSource101
diff --git a/tasks/1.png b/tasks/1.png
diff --git a/tasks/2.png b/tasks/2.png
diff --git a/tasks/3.png b/tasks/3.png
diff --git a/tasks/4.png b/tasks/4.png
diff --git a/tasks/5.jpg b/tasks/5.jpg
diff --git a/tasks/Carousel.html b/tasks/Carousel.html
@@ -0,0 +1,91 @@
+<!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>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
+    <style>
+        .container{
+        width:900px;
+       padding:30px;
+
+        }
+       body{
+        background: linear-gradient(135deg,#f4e0fc,#f1b8ea);
+        border-top: 40px solid rgb(31, 33, 65);
+       }
+
+       .background p{
+        font-family:'Times New Roman', Times, serif;
+        font-size:20px ;
+        color: rgb(231, 231, 250);
+        width:845px;
+        margin:auto;
+        text-align: center;
+        background-color: rgba(31, 31, 65, 0.644);
+        border: 2px solid rgb(35, 35, 54);
+        border-radius: 5px;  
+        margin-top:5px; 
+        padding:10px;
+    }
+    .decor
+    { margin-left: 30px;
+        margin-right: 30px;
+
+    }
+    #myslideshow
+    { border-radius: 5px;;
+        border-top: 20px solid rgb(31, 33, 65);
+        border-bottom: 20px solid rgb(31, 33, 65);
+    }
+    </style>
+</head>
+<body>
+    <div class="background">
+        <div class="decor">
+    <div class="container">
+        <div id="myslideshow" class="carousel slide" data-bs-ride="carousel" >
+            <div class="carousel-indicators">
+                <button type="button" data-bs-target="#myslideshow" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                <button type="button" data-bs-target="#myslideshow" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                <button type="button" data-bs-target="#myslideshow" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                <button type="button" data-bs-target="#myslideshow" data-bs-slide-to="3" aria-label="Slide 4"></button>
+                <button type="button" data-bs-target="#myslideshow" data-bs-slide-to="4" aria-label="Slide 5"></button>
+              </div>
+            <div class="carousel-inner" data-fli>
+              <div class="carousel-item active" >
+                  <img src="5.jpg"  height =500 class=" d-block w-100" >
+              </div>
+              <div class="carousel-item" >
+                <img src="2.png"  height =500 class=" d-block w-100" >
+            </div>
+            <div class="carousel-item" >
+                <img src="3.png"  height =500  class=" d-block w-100">
+            </div>
+            <div class="carousel-item " >
+                <img src="4.png"  height =500 class=" d-block w-100" >
+            </div>
+            <div class="carousel-item " >
+                <img src="1.png"  height =500 class=" d-block w-100" >
+            </div>
+          </div>  
+          <button class="carousel-control-prev" type="button" data-bs-target="#myslideshow" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+          </button>
+          <button class="carousel-control-next" type="button" data-bs-target="#myslideshow" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+          </button>  
+    </div>
+    </div>
+   <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero magni unde exercitationem quis illum maiores odit nulla earum ut ad incidunt itaque autem, consequatur beatae fugiat facere dolorum quos eos nam facilis quo dignissimos voluptas. Quos labore cum ea aperiam earum suscipit, quas odio voluptates adipisci architecto expedita, nostrum inventore animi reiciendis natus qui maxime quae nulla. Perferendis, repellendus incidunt a, asperiores cupiditate id labore porro, magnam hic facilis quos.
+ </p>
+ </div>
+</div>
+</body>
+</html>
diff --git a/tasks/Register.css b/tasks/Register.css
@@ -0,0 +1,115 @@
+#Register{
+    margin:auto;
+    width:500px;
+    height:500px;
+}
+body{
+    margin:0;
+    padding:0;
+}
+h1{
+ text-align: center;
+ color: #eff8f8;
+ text-shadow:  2px 2px rgb(247, 57, 57);
+ letter-spacing: 1px;
+ font-size:40px;
+}
+.decorate{
+  background-image: linear-gradient(to right, #000000, #485757);
+     background-repeat: no-repeat;
+    background-position: center;
+   background-size: cover;
+   height:100vh;
+   width:100%;
+   margin:0;
+   padding:0;
+  position:absolute;
+  overflow:hidden;
+}
+.wrap div{
+  position:absolute;
+  width:50px;
+  height:50px;
+  background-color: transparent;
+  border:6px solid rgba(243, 241, 241, 0.863);
+  animation: animate 10s linear infinite;
+  border-radius: 10%;
+}
+.wrap div:nth-child(1){
+  top:15%;
+  left:45%;
+  animation: animate 10s linear infinte;
+}
+.wrap div:nth-child(2){
+  top:50%;
+  left:35%;
+  animation: animate 7s linear infinte;
+}
+.wrap div:nth-child(3){
+  top:67%;
+  left:23%;
+  animation: animate 9s linear infinte;
+}
+.wrap div:nth-child(4){
+  top:70%;
+  left:55%;
+  animation: animate 20s linear infinte;
+}
+.wrap div:nth-child(5){
+  top:20%;
+  left:60%;
+  animation: animate 6s linear infinte;
+}
+.wrap div:nth-child(6){
+  top:40%;
+  left:20%;
+  animation: animate 12s linear infinte;
+}
+.wrap div:nth-child(7){
+  top:70%;
+  left:12%;
+  animation: animate 2s linear infinte;
+}
+.wrap div:nth-child(8){
+  top:50%;
+  left:85%;
+  animation: animate 13s linear infinte;
+}
+.wrap div:nth-child(9){
+  top:87%;
+  left:80%;
+  animation: animate 5s linear infinte;
+}
+.wrap div:nth-child(10){
+  top:5%;
+  left:10%;
+  animation: animate 6s linear infinte;
+}
+@keyframes animate{
+  0%{
+    transform: scale(0) translateY(0) rotate(0deg);
+    opacity:1;
+  }
+  100%{
+   transform: scale(1.3) translateY(-100px) rotate(360deg);
+    opacity:0;
+  }
+}
+button{width: 150px;
+       margin: auto;
+
+       padding: 10px;
+       position: absolute;
+      top:200px;
+left:400px;
+right:400px;
+      border-radius: 10px;
+       font-size: 25px;
+       color:rgb(37, 55, 85);
+       background:linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );
+       font-family:Arial, Helvetica, sans-serif ;
+}
+.register:hover{
+    background-color: black;
+    box-shadow: 0 8px 16px 0 rgba(196, 191, 191, 0.747), 0 6px 20px 0 rgba(201, 197, 197, 0.788);
+}
diff --git a/tasks/SignUpform.css b/tasks/SignUpform.css
@@ -0,0 +1,79 @@
+body{
+    background-image: linear-gradient(to right, #000000, #485757);
+background-repeat: no-repeat;
+background-position: center;
+background-size: cover;
+height:100vh;
+width:100%;
+margin:0;
+padding:0;
+}
+h3{ padding-top: 15px;
+    height:60px;
+    margin:0;
+    font-size:35px ;
+    color: rgb(0, 0, 0);
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+
+
+}
+
+#form{
+    padding:0px;
+ width:350px;
+ height:400px;
+
+ padding-bottom: 5px;
+ margin: 100px auto;
+ background-color:rgba(231, 250, 215, 0.904);
+ border: 2px solid rgb(53, 51, 51);
+ border-radius: 7px;
+ text-align: center;
+} 
+/* #form:hover{
+
+} */
+
+.item{
+    padding:10px;
+    margin:5px;
+
+}
+.item p{
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 20px;
+    color: rgb(26, 28, 48);
+    padding-left:31px;
+   text-align: left;
+   font-weight: bold;
+
+}
+.item input{
+    width: 252px;
+    height:20px;
+    border-radius: 5px;
+
+}
+.check{
+    padding:5px;
+    margin:5px;
+    font-size:15px ;
+    color: rgb(0, 0, 0);
+}
+.check input{
+    margin-bottom:0;
+ height:15px;
+ width:15px;
+
+}
+
+button{
+   border-radius: 5px;
+    width:70px;
+    height:30px;
+    background-image: linear-gradient(to right, #000000, #485757);
+color: antiquewhite;}
+button:hover{
+    width:74px;
+    height:33px;
+}
diff --git a/tasks/Signup form.html b/tasks/Signup form.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>WSOC-signup</title>
+    <link rel="stylesheet" href="SignUpform.css">
+</head>
+<body>
+    <div id="form">
+    <h3>WSOC - Model Registration</h3>
+
+         <div class="item">
+        <p>Email-Id *</p>
+        <input type="email" id=" email" required placeholder="Enter your email Id">
+      </div>
+      <div class="item"> 
+          <p>Password *</p>
+        <input type="password" id="password" required placeholder="Enter your password"> 
+    </div>
+      <button type="submit">submit</button>
+   <div class="check" > 
+    <input type="checkbox" id="ckeck" name="check">
+    <label for="check">keep me logged in</label>
+   </div>
+</div>
+</body>
+
+</html>
diff --git a/tasks/VITAP_profile.html b/tasks/VITAP_profile.html
@@ -0,0 +1,32 @@
+<!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>VIT-AP Profile</title>
+    <link rel="stylesheet" href="VIT_AP.css">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet"> -->
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@1,300&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1 align="center">VIT-AP</h1>
+    <div class="wrapper" >
+       <p>
+        VIT-AP University is a private University located in Amaravati, the capital of Andhra Pradesh, India. It is the first university located in the capital region.VIT-AP was established as the third campus of Vellore Institute of Technology.
+        VIT has been ranked among the top 20 Universities in the Country for the 4th time consecutively and in Engineering, VIT has been ranked 15th in India.
+        Computer Science at VIT Ranked among the Top 4 & Engineering Subjects ranked among the Top 8 in India.
+        VIT is one among the Top 9 Institutions in India and the only Private Institution from India.
+        5 Subjects at VIT ranked among the Top 500 in the World.
+       </p> 
+</div>
+    <footer>
+        <p id=" madeby">
+            Made by "Salome_20BCE7051"
+        </p>
+    </footer>
+
+</body>
+</html>