sumit-022 · umeshSinghVerma · Jan 28, 2023 · Jan 28, 2023 · Jan 29, 2023 · Jan 29, 2023
diff --git a/Assets/assignment.html b/Assets/assignment.html
@@ -0,0 +1,18 @@
+<!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>GSDC-Assignment</title>
+    <style>
+        body{
+            background-image: url();
+            background-repeat: no-repeat;
+        }
+    </style>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/Assets/insta.png b/Assets/insta.png
diff --git a/Assets/linkedin.png b/Assets/linkedin.png
diff --git a/Assets/toppng.com-facebook-logo-white-white-facebook-f-logo-760x1440.png b/Assets/toppng.com-facebook-logo-white-white-facebook-f-logo-760x1440.png
diff --git a/Screenshot from 2023-01-28 23-16-27.png b/Screenshot from 2023-01-28 23-16-27.png
diff --git a/assignment.html b/assignment.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>GSDC-Assignment</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+
+
+
+    </style>
+</head>
+<body>
+    <div class="moving">
+        <div class="sq1"><img src="./Assets/square.png" alt=""></div>
+        <div class="tr1"><img src="./Assets/triangle.png" alt=""></div>
+        <div class="cr1"><img src="./Assets/cross.png" alt=""></div>
+        <div class="c1"><img src="./Assets/circle.png" alt=""></div>
+        <div class="c2"><img src="./Assets/circle.png" alt=""></div>
+        <div class="sq2"><img src="./Assets/square.png" alt=""></div>
+        <div class="tr2"><img src="./Assets/triangle.png" alt=""></div>
+    </div>
+    <div class="topcontainer">
+        <div class="leftone">
+            <div class="ball" style="display: flex; width: 100%; margin-top: 10%; margin-left: 6%;"><img src="./Assets/logo.png" alt="" style="width: 20%;"></div>
+            <h1>
+                Welcome to the <br> Gaming World
+            </h1>
+            <div style="color: rgb(185, 183, 183); width: 64%; font-size: 2rem; width: 100%;">Dive into the Awesomeness!</div>
+            <div class="btn" style="width: 100%;"><div class="button">Explore</div></div>
+        </div>
+        <div class="rightone">
+            <div class="social">
+                <img src="./Assets/toppng.com-facebook-logo-white-white-facebook-f-logo-760x1440.png" alt="" class="logos">
+                <img src="./Assets/insta.png" alt="" class="logos">
+                <img src="./Assets/linkedin.png" alt="" class="logos">
+            </div>
+            <div class="man"><img src="./Assets/contimg.png" alt=""></div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!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>
+</head>
+<body>
+    <p>
+        Umesh Singh Verma CS LCS202052 <a href="assignment.html">GSDC Assignment</a>
+    </p>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,203 @@
+body{
+    background-image: url("Assets/background.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: Arial, Helvetica, sans-serif;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.moving{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    /* display: flex; */
+    /* gap: 200px; */
+    z-index: -1;
+    margin-left: 5%;
+
+}
+.sq1{
+    position: absolute;
+    animation-name: move1;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    animation-timing-function: linear;
+    animation-delay: 2s;
+    visibility: hidden;
+    height: 30px;
+    width: 30px;
+    scale: 150%;
+
+}
+@keyframes move1 {
+    0%   {left:0vw; top:100vh;opacity: 0;visibility: visible;}
+    50%   {left:0vw; top:50vh;opacity: 1;visibility: visible;}
+    100% {left:0vw; top:0vh; opacity: 0;visibility: visible;}
+
+}
+.c1{
+    position: absolute;
+    animation-name: move2;
+    animation-timing-function: linear;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    scale: 200%;
+}
+@keyframes move2 {
+    0%   {left:14vw; top:100vh;opacity: 0;}
+    50%   {left:14vw; top:50vh;opacity: 1;}
+    100% {left:14vw; top:0vh; opacity: 0;}
+
+}
+.tr1{
+    position: absolute;
+    animation-name: move3;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    animation-timing-function: linear;
+    animation-delay: 3s;
+    visibility: hidden;
+    scale: 150%;
+}
+@keyframes move3 {
+    0%   {left:28vw; top:100vh;opacity: 0;visibility: visible;}
+    50%   {left:28vw; top:50vh;opacity: 1;visibility: visible;}
+    100% {left:28vw; top:0vh; opacity: 0;visibility: visible;}
+
+}
+.cr1{
+    position: absolute;
+    animation-name: move4;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    animation-timing-function: linear;
+    animation-delay: 1s;
+    visibility: hidden;
+    scale: 150%;
+
+}
+@keyframes move4 {
+    0%   {left:42vw; top:100vh;opacity: 0;visibility: visible;}
+    50%   {left:42vw; top:50vh;opacity: 1;visibility: visible;}
+    100% {left:42vw; top:0vh; opacity: 0;visibility: visible;}
+
+}
+.c2{
+    position: absolute;
+    animation-name: move5;
+    animation-timing-function: linear;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    scale: 150%;
+}
+@keyframes move5 {
+    0%   {left:56vw; top:100vh;opacity: 0;}
+    50%   {left:56vw; top:50vh;opacity: 1;}
+    100% {left:56vw; top:0vh; opacity: 0;}
+
+}
+.sq2{
+    position: absolute;
+    animation-name: move6;
+    animation-timing-function: linear;
+    animation-duration: 7s;
+    animation-iteration-count:infinite;
+    scale: 150%;
+}
+@keyframes move6 {
+    0%   {left:70vw; top:100vh;opacity: 0;}
+    50%   {left:70vw; top:50vh;opacity: 1;}
+    100% {left:70vw; top:0vh; opacity: 0;}
+
+}
+.tr2{
+    position: absolute;
+    animation-name: move7;
+    animation-duration: 7s;
+    animation-timing-function: linear;
+    animation-iteration-count:infinite;
+    animation-delay: 1s;
+    visibility: hidden;
+    scale: 150%;
+}
+@keyframes move7 {
+    0%   {left:84vw; top:100vh;opacity: 0;visibility: visible;}
+    50%   {left:84vw; top:50vh;opacity: 1;visibility: visible;}
+    100% {left:84vw; top:0vh; opacity: 0;visibility: visible;}
+
+}
+.topcontainer{
+    display: flex;
+    height: 90vh;
+    width: 90vw;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    /* overflow: hidden; */
+}
+.leftone{
+    width: 45%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: left;
+}
+.rightone{
+    width: 55%;
+    display: flex;
+    flex-direction: column;
+    gap: 20%;
+    height: 90%;
+}
+.social{
+    display: flex;
+    justify-content: flex-end;
+    gap: 4%;
+    height: 6%;
+    /* margin-bottom: 12%; */
+    margin-right: 20%;
+}
+.social > img{
+    height: 100%;
+}
+.man{
+    height: 93%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    /* margin-bottom: 10%; */
+}
+.man > img{
+    width: inherit;
+}
+.logos{
+    height: 18%;
+}
+h1{
+    color: white;
+    font-size: 4rem;
+    margin-top: 190px;
+    margin-bottom: 2%;
+    width: 100%;
+}
+.button{
+    color: white;
+    border: solid white 2px;
+    padding: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top:35px ;
+    width: 20%;
+    font-size: 1.2rem;
+}