Skip to content

Commit

Permalink
changed the css of the pages and added contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Satashee
Satashee committed Oct 23, 2024
1 parent f0f7b97 commit fe9b890
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 115 deletions.
19 changes: 19 additions & 0 deletions contact.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.contact .heading{
font-size: 50px;
color:rgb(134, 134, 134);
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
}
.input-group-1{
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.input-group-2{
margin: 40px;
display: flex;
align-items: center;
justify-content: center;
}
46 changes: 46 additions & 0 deletions contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="contact.css">
</head>

<body>
<nav class="nav">
<h1><a class="logo">VOICE.py</a></h1>
<div class="nav-right">
<h1><a href="">Home</a></h1>
<h1><a href="">Features</a></h1>
<h1><a href="contact.html">Contact</a></h1>
<h1><a href="">About</a></h1>
<h1><a href="faq.html">FAQ</a></h1>
</div>
</nav>
<section class="contact" id="contact">
<h2 class="heading">Contact Us </h2>
<form action="">
<div class="input-group-1">
<div class="input-box">
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email">
</div>
<div class="input-box">
<input type="number" placeholder="Phone Number">
<input type="text" placeholder="Subject">
</div>
</div>
<div class="input-group-2">
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
<input type="submit" value="Send message" class="btn">

</div>
</form>

</section>
</body>

</html>
19 changes: 10 additions & 9 deletions faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@
<body>

<!-- nav bar -->
<nav class="nave">
<ul>
<li><a class="logo">VOICE.py</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="">Features</a></li>
<li><a href="">About</a></li>
<li><a href="faq.html">FAQ</a></li> <!-- Link to the FAQ page -->
</ul>
</nav>
<nav class="nav">
<h1><a class="logo">VOICE.py</a></h1>
<div class="nav-right">
<h1><a href="">Home</a></h1>
<h1><a href="">Features</a></h1>
<h1><a href="contact.html">Contact</a></h1>
<h1><a href="">About</a></h1>
<h1><a href="faq.html">FAQ</a></h1>
</div>
</nav>
<!-- nav bar end -->

<section class="faq" id="faq">
Expand Down
113 changes: 58 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@
<link rel="stylesheet" href="./style.css">
<style>
.circle {
height: 24px;
width: 24px;
border-radius: 50%;
position: fixed;
background-color: black; /* Default color of circles */
pointer-events: none; /* Prevent interaction with circles */
z-index: 9999;
transition: transform 0.1s ease-out;
height: 24px;
width: 24px;
border-radius: 50%;
position: fixed;
background-color: black;
/* Default color of circles */
pointer-events: none;
/* Prevent interaction with circles */
z-index: 9999;
transition: transform 0.1s ease-out;
}
</style>
</style>
</head>

<body>
Expand Down Expand Up @@ -48,73 +50,74 @@
<div class="circle"></div>
<script>
// Store the mouse coordinates
const coords = { x: 0, y: 0 };
const coords = { x: 0, y: 0 };

// Select all circles (you can add more circles to HTML as needed)
const circles = document.querySelectorAll(".circle");
// Select all circles (you can add more circles to HTML as needed)
const circles = document.querySelectorAll(".circle");

// Customize the colors for the circles (optional)
const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
// Customize the colors for the circles (optional)
const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];

// Initialize circle positions
circles.forEach((circle, index) => {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length]; // Assign colors
});
// Initialize circle positions
circles.forEach((circle, index) => {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length]; // Assign colors
});

// Update mouse coordinates on move
window.addEventListener("mousemove", (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
});
// Update mouse coordinates on move
window.addEventListener("mousemove", (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
});

// Animation loop for circles
function animateCircles() {
let x = coords.x;
let y = coords.y;
// Animation loop for circles
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach((circle, index) => {
circle.style.left = `${x - 12}px`; // Offset for center alignment
circle.style.top = `${y - 12}px`;
circles.forEach((circle, index) => {
circle.style.left = `${x - 12}px`; // Offset for center alignment
circle.style.top = `${y - 12}px`;

circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Shrink effect
circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Shrink effect

circle.x = x;
circle.y = y;
circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}
requestAnimationFrame(animateCircles);
}

// Start animation
animateCircles();
// Start animation
animateCircles();

</script>

<!-- nav bar -->
<nav class="nave">
<ul>
<li><a class="logo">VOICE.py</a></li>
<li><a href="">Home</a></li>
<li><a href="">Features</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
<nav class="nav">
<h1><a class="logo">VOICE.py</a></h1>
<div class="nav-right">
<h1><a href="">Home</a></h1>
<h1><a href="">Features</a></h1>
<h1><a href="contact.html">Contact</a></h1>
<h1><a href="">About</a></h1>
<h1><a href="faq.html">FAQ</a></h1>
</div>
</nav>
<!-- nav bar end -->

<div class="A">
<!-- <div class="A">
<h3>🚧 NOTICE: THIS SITE IS UNDER MAINTENANCE 🚧</h3>
</div>
</div> -->

<div class="B">
<p>Welcome to VOICE.py! Our assistant is currently being updated for better performance.</p>
<p>Welcome to VOICE.py!</p>
<p>Our assistant is currently being updated for better performance.</p>
<p>Stay tuned for exciting new features!</p>
</div>

Expand Down
Loading

0 comments on commit fe9b890

Please sign in to comment.