Skip to content

Commit

Permalink
Merge pull request #24 from superiorsd10/particle
Browse files Browse the repository at this point in the history 
Feat #17: Making Changes in UI
  • Loading branch information
@Nainish-Rai
Nainish-Rai committed Oct 5, 2022
2 parents ecdd0f8 + 4d9373b commit 3a5da11
Show file tree
Hide file tree
Showing 3 changed files with 239 additions and 0 deletions.
Binary file added particle-white/images/img.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 126 additions & 0 deletions particle-white/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!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" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&amp;display=swap" rel="stylesheet">
<title>Startpage</title>
</head>

<body>
<div class="particle-js">
<div class="wrapper">
<div class="bg"></div>
<div class="box-landscape">
<div class="box">
<img class="box-img2" src="images/img.jpg" alt="No image" />
</div>
<div class="links">
<div id="content">

<div id="links">
<section>
<h3>Daily</h3>
<ul>
<li><a href="https://www.youtube.com/">Youtube</a></li>
<li><a href="https://github.com">Github</a></li>
<li><a href="https://web.whatsapp.com/">Whatsapp</a></li>
<li><a href="https://web.telegram.org/z/">Telegram</a></li>
</ul>
</section>
<section>
<h3>Social</h3>
<ul>
<li><a href="https://twitter.com/">Twitter</a></li>
<li><a href="https://www.reddit.com/">Reddit</a></li>
<li><a href="https://Instagram.com">Instagram</a></li>
<li><a href="https://discord.com/app">Discord</a></li>
</ul>
</section>
<section>
<h3>Coding</h3>
<ul>
<li><a href="https://www.w3schools.com/">W3School</a></li>
<li><a href="https://leetcode.com">LeetCode</a></li>
<li><a href="https://hackerrank.com">HackerRank</a></li>
<li><a href="https://FreeCodeCamp.org">FreeCodeCamp</a></li>
</ul>
</section>
<section>
<h3>Google</h3>
<ul>
<li><a href="https://mail.google.com/mail/u/0/">Gmail</a></li>
<li><a href="https://drive.google.com">Drive</a></li>
<li><a href="https://maps.google.com">Maps</a></li>
<li><a href="https://github.com/Nainish-Rai">Custom</a></li>
</ul>
</section>
</div>
</div>
<form action="https://search.brave.com/search/">
<label for="q" autofocus>> find / </label>
<input type="text" placeholder="Type Here" name="q" autocomplete="off" autofocus />
</form>
</main>


</div>
</div>
</div>
</div>

<div id="tsparticles"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/2.3.4/tsparticles.bundle.min.js"></script>

<script type="text/javascript">
tsParticles.load("tsparticles", {
particles: {
move: {
enable: true,
speed: { min: 0.5, max: 2 },
},
links: {
enable: true,
opacity: 0.3,
distance: 200,
},
size: {
value: { min: 1, max: 3 },
},
opacity: {
value: { min: 0.3, max: 0.7 },
},
},
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
},
modes: {
push: {
quantity: 6,
},
repulse: {
distance: 100,
},
},
},
// background: {
// color: "#000",
// },
});
</script>

</body>

</html>
113 changes: 113 additions & 0 deletions particle-white/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
@import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro);

/* html {
max-width: 100%;
} */
body {
background-color: rgb(36, 36, 36);
font-family: "Source Code Pro", monospace;
display: flex;
align-items: center;
justify-content: center;
}

.box-landscape {
background-color: rgba(35, 35, 35, 0.902);
margin-top: 10%;
height: 800px;
width: 700px;
box-shadow: -15px 15px 20px rgb(20, 20, 20);
/* transition: all 0.2s fade-in-out; */
display: flex;
flex-direction: row;
backdrop-filter: blur(8px);
box-shadow: 0px 0px 40px rgb(0, 0, 0);
}

.links {
width: 300px;
padding-left: 20px;
margin-top: -20px;
margin-left: 60px;
color: rgba(228, 217, 255,0.9);
font-size: 20px;
font-weight: 100;
padding-top: 20px;
border-color: rgba(255, 255, 255, 0);
border-style: solid;
border-width: 2px;
}

.box-img2 {
height: 690px;
width: 380px;
padding-left: 10px;
padding-top: 15px;
}

h3 {
color: rgb(255,255,255);
/* margin: 3px; */
font-weight: 300;
padding-left: 40px;
align-items: center;
display: flex;
}

/* h3:hover {
font-weight: 900;
} */
a:hover {
color: rgb(255,255,255);
transform: scale(2);
margin-bottom: 2px;
font-weight: 500;
}

a {
padding: 0px;
text-decoration: none;
color:rgba(228, 217, 255,0.9);
}

.wrapper {
margin-top: 30px;
margin-left: 50px;
padding-left: 20px;
}

form {
font-size: 2em;
margin-bottom: 0px;
padding-top: 0px;
margin-left: -460px;
margin-top: 0px;

border: none;
color: rgb(255,255,255);
}

form input {
border: none;
background-color: rgba(240, 248, 255, 0);
color: #aaa;
font-size: 30px;
font-weight: 500;
}

form input:focus {
outline: none;
}
.bg {
height: 780px;
position: fixed;
width: 700px;
background-color: rgb(255,255,255);
margin-left: -40px;
margin-top: 30px;
box-shadow: 0px 0px 30px rgb(255,255,255 );
}

.particle-js{
z-index: 100;
}

0 comments on commit 3a5da11

Please sign in to comment.