Skip to content

Commit

Permalink
Merge pull request #474 from RadhikaMalpani1702/dev
Browse files Browse the repository at this point in the history 
Added  Cursor Trail Effect To The Website
  • Loading branch information
@ayush-t02
ayush-t02 authored Jul 9, 2024
2 parents af9879d + aa9eed1 commit a9494a1
Show file tree
Hide file tree
Showing 11 changed files with 623 additions and 4 deletions.
59 changes: 59 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles/mainstyle.css" />
<link rel="stylesheet" href="./styles/default.style.css">
Expand All @@ -23,6 +24,16 @@
<script src="./js/emoji.js"></script>
<title>Dots & Boxes Game</title>
<style>
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: darkturquoise;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
}
.sticky-button {
/* position: fixed;
top: 50%;
Expand Down Expand Up @@ -528,7 +539,55 @@ <h3 class="instructions-heading">Instructions</h3>
document.getElementById('columns').value = '';
document.getElementById('players-count').value = '';
});

</script>
<!-- Create circles with the class 'circle' -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="trail.js"></script>
</body>

<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>
Expand Down
67 changes: 64 additions & 3 deletions pages/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,72 @@
top: 400px;
}
}
</style>
<body>

.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: darkturquoise;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
}
</style>

<body>

<div class="center">
<img src="../assets/images/404pic.png" alt="404 pic" class="pic" />
<button class="btn"><a href="../index.html">Home</a></button>
</div>
</body>
<!-- Create circles with the class 'circle' -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="/trail.js"></script>
</body>
</html>

57 changes: 57 additions & 0 deletions pages/FAQs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,67 @@
.attribution a {
color: hsl(228, 45%, 44%);
}
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: darkturquoise;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
}
</style>
</head>

<body>
<!-- Create circles with the class 'circle' -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="/trail.js"></script>
<div class="bottom-background">
<video autoplay muted loop>
<source src="../assets/videos/FAQ.mp4" />
Expand Down
60 changes: 60 additions & 0 deletions pages/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>

Expand All @@ -18,12 +19,71 @@
<style>
body {
background-image: none;
overflow: hidden;
}

.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: darkturquoise;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
}
</style>

</head>

<body>
<!-- Create circles with the class 'circle' -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="/trail.js"></script>
<nav class="navbar">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
Expand Down
57 changes: 57 additions & 0 deletions pages/contributors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,67 @@
.settings a {
background-color: initial;
}
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: darkturquoise;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
}
</style>
</head>

<body>
<!-- Create circles with the class 'circle' -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script src="/trail.js"></script>
<div class="settings">
<video autoplay muted class="video" loop id="myVideo">
<source src="../assets/videos/default.mp4" type="video/mp4" />
Expand Down
Loading

0 comments on commit a9494a1

Please sign in to comment.