Skip to content

Commit

Permalink
Added vibrant color elements, border at the top and changed main hea…
Browse files Browse the repository at this point in the history 
…ding's font style to make it more chaotic (#107)

* bubbles added

* final done

* css
  • Loading branch information
@MimanshaKaur
MimanshaKaur authored Oct 14, 2024
1 parent 34562fb commit 46f2086
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 33 deletions.
Binary file added assets/logo/chaosweb_topborder-removebg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
181 changes: 152 additions & 29 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,136 @@
}
/* search bar css*/

/*bubbles*/
.bubbles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transform: translateZ(0);
}

.bubbles li{
position: absolute;
list-style: none;
display: block;
border-radius: 50% 50%;
background-color: rgb(255, 252, 61);
bottom: -100px;
animation: bubbles 5s infinite;
transition-timing-function: linear;
}
.bubbles li:nth-child(1)
{
width: 80px;
height: 80px;
left: 80%;
background-color: yellow;
border-radius: 10%;
animation-delay: 1s;
animation-duration: 4s;
}
.bubbles li:nth-child(2)
{
width: 60px;
height: 60px;
left: 60%;
animation-delay: 0s;
animation-duration: 5s;
background-color: rgb(226, 46, 76);
}
.bubbles li:nth-child(3)
{
width: 40px;
height: 40px;
left: 40%;
animation-delay: 1s;
animation-duration: 6s;
background-color: rgb(255, 91, 228);
border-radius: 10%;
}
.bubbles li:nth-child(4)
{
width: 50px;
height: 50px;
left: 20%;
animation-delay: 1s;
animation-duration: 3s;
background-color: rgb(0, 255, 85);
border-radius: 50%;
}
.bubbles li:nth-child(5)
{
width: 100px;
height: 100px;
left: 100%;
animation-delay: 2s;
animation-duration: 7s;
background-color: red;
border-radius: 10%;
}
.bubbles li:nth-child(6)
{
width: 80px;
height: 80px;
left: -2%;
background-color: rgb(70, 255, 255);
animation-delay: 1s;
animation-duration: 5s;
}
.bubbles li:nth-child(7)
{
width: 30px;
height: 30px;
left: 30%;
animation-delay: 0s;
animation-duration: 6s;
background-color: green;
border-radius: 10%;
}
.bubbles li:nth-child(8)
{
width: 50px;
height: 50px;
left: 50%;
animation-delay: 2s;
animation-duration: 7s;
background-color: rgb(70, 110, 255);
}
.bubbles li:nth-child(9)
{
width: 70px;
height: 70px;
left: 70%;
animation-delay: 1s;
animation-duration: 8s;
background-color: rgb(255, 0, 43);
border-radius: 10%;
}
.bubbles li:nth-child(10)
{
width: 90px;
height: 90px;
left: 90%;
animation-delay: 1s;
animation-duration: 6s;
background-color: rgb(0, 255, 153);
border-radius: 50% 50%;
}
/* animation for bubbles*/
@keyframes bubbles{
0%{
-webkit-transform: translateY(1080px);
transform: translateY(1080px);
}
100%{
-webkit-transform: translateY(-1080px) rotate(630deg);
transform: translateY(-1080px) rotate(630deg);
}
}

.search-container {
top: 10px; /* Adjust top position as needed */
right: 10px; /* Keep it on the right side */
Expand Down Expand Up @@ -82,23 +212,23 @@ input[type="text"].disturbing {
}

@keyframes colorChange {
0% { background-color: #FF5733; }
10% { background-color: #33FF57; }
20% { background-color: #3357FF; }
30% { background-color: #F3FF33; }
40% { background-color: #FF33A1; }
50% { background-color: #8E44AD; }
60% { background-color: #F39C12; }
70% { background-color: #D35400; }
80% { background-color: #1ABC9C; }
90% { background-color: #3498DB; }
100% { background-color: #FF5733; }
0% { background-color: #FF5733; }
10% { background-color: #33FF57; }
20% { background-color: #3357FF; }
30% { background-color: #F3FF33; }
40% { background-color: #FF33A1; }
50% { background-color: #8E44AD; }
60% { background-color: #F39C12; }
70% { background-color: #D35400; }
80% { background-color: #1ABC9C; }
90% { background-color: #3498DB; }
100% { background-color: #FF5733; }
}
input[type="text"]:hover {
animation: colorChange 1s infinite; /* Change color on hover */
}

.suggestions {
.suggestions {
position: absolute;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.9);
Expand Down Expand Up @@ -142,34 +272,30 @@ input[type="text"]:hover {
.suggestions.active {
animation: colorChange 3s infinite; /* Change colors every 3 seconds */
}

#results-list {
#results-list {
margin-top: 10px;
list-style: none;
}

#results-list li {
}
#results-list li {
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 5px;
font-size: 18px;
display: none; /* Hide by default */
}

#results-list li.active {
}
#results-list li.active {
display: block; /* Show the matched results */
}
body {
}
body
{
font-family: 'Oswald', sans-serif;
height: 100vh;
background-attachment: fixed;
background: linear-gradient(-45deg, #0d00ff, #ab1fce, #fd0098, #000000);
background: linear-gradient(-45deg, #010108, #26142b, #3d0125, #000000);
background-size: 400% 400%;
animation: gradient 15s ease infinite;

}

@keyframes gradient {
Expand All @@ -182,7 +308,6 @@ body {
100% {
background-position: 0% 50%;
}

}

@keyframes noise {
Expand All @@ -208,7 +333,6 @@ body {
}

.nav{
display: flex;
justify-content: center;
align-items: center;
}
Expand All @@ -219,12 +343,11 @@ body {
height: 190px;
width: 190px;
}

#chaos-header {
font-size: 3rem;
font-weight: 700;
letter-spacing: 1.5px;
color: #5d0d7e;
color: #ecf31a;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
/* Subtle shadow for depth */
text-align: center;
Expand Down
32 changes: 28 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,20 @@
<link rel="shortcut icon" href="./assets/logo/favicon.ico" type="image/x-icon">

</head>
<body>
<body style="z-index: 1;">
<!--adding squares in background-->
<ul class="bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--ALL SVGs taken from https://undraw.co/-->
<!-- preloader -->
<div class="container">
Expand Down Expand Up @@ -59,13 +72,24 @@
</div>
</div>
</div>
<div style="display: flex;">
<img src="./assets/logo/chaosweb_topborder-removebg.png" alt="top-border">
<img src="./assets/logo/chaosweb_topborder-removebg.png" alt="top-border">
</div>
<nav class="nav">
<img src="./assets/logo/ChaosWeb.jpg" alt="ChaosWeb Logo" id="chaos-logo">
<h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
<center>
<div class="search-container">
<img style=" width:15%; height: 15%;" src="./assets/logo/ChaosWeb.jpg" alt="ChaosWeb Logo" id="chaos-logo">
<h1>
<span style="font-size: 80px; color: yellow;">ChaosWeb</span>
<span style="font-size: 50px; color: rgb(255, 114, 255);"> - The</span>
<span style="font-size: 80px; color: rgb(77, 255, 41); " > Disorderly</span>
<span style="font-size: 30px; color:aqua"> UI</span>
<span style="font-size: 60px; color:rgb(255, 88, 11)"> Experiment</span>
</h1>
<input type="text" id="search-bar" placeholder="Search Animals..." oninput="playAnimalSound(); showSuggestions()">
<div id="suggestions" class="suggestions-container"></div>
</div>
</div></center>
<audio id="elephant" src="sfx/tiger.mp3"></audio>
<audio id="tiger" src="sfx/rooster.mp3"></audio>
<audio id="cat" src="sfx/elephant1.mp3"></audio>
Expand Down

0 comments on commit 46f2086

Please sign in to comment.