Skip to content
Snippets Groups Projects
Commit ba422351 authored by Suriya Ravichandran's avatar Suriya Ravichandran
Browse files

add index page

parent 40dfb61b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 283 additions and 48 deletions
assets/images/bars.svg 0 → 100644
+ 1
− 0
View file @ ba422351
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="bars"><path fill="#333333" d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"></path></svg>
\ No newline at end of file
assets/images/bg-bottom-hero.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/bg-bottom-hero.png

20.1 KiB

assets/images/bg-dot.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/bg-dot.png

14.9 KiB

assets/images/bg-round.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/bg-round.png

17 KiB

assets/images/bg-tree.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/bg-tree.png

16 KiB

assets/images/favicon.jpg 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/favicon.jpg

451 KiB

assets/images/hero.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/hero.png

11.5 KiB

assets/images/main_logo.png 0 → 100644
+ 0
− 0
View file @ ba422351
assets/images/main_logo.png

692 KiB

assets/images/times.svg 0 → 100644
+ 1
− 0
View file @ ba422351
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="times"><path fill="#333333" d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"></path></svg>
\ No newline at end of file
index.php
+ 60
− 47
View file @ ba422351
<?php
session_start();
if(isset($_SESSION['unique_id'])){
header("location: users.php");
}
?>
<?php include_once "php/headers/index_header.php";?>
<body>
<div class="wrapper">
<section class="formsignup">
<header> Gochat</header>
<form action="#" enctype="multipart/form-data">
<div class="error-txt"></div>
<div class="name-details">
<div class="field">
<label>First Name</label>
<input type="text" name="fname" placeholder="First Name" required>
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Last Name" required>
</div>
<div class="field">
<label>Email Address</label>
<input type="text" name="email" placeholder="Enter your Email" required>
</div>
<div class="field-pass">
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password" required>
<i class="fas fa-eye"></i>
</div>
<div class="field">
<label>Select your Profile</label>
<input type="file" name="image" required>
</div>
<div class="field-gochat-btn">
<input type="submit" value="GO TO CHAT">
</div>
</div>
</form>
<div class="link">Already signed up? <a href="login.php">Login now</a></div>
</section>
<!DOCTYPE html>
<!-- Developed by Suriya Ravichandran -->
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gochat</title>
<link rel="stylesheet" href="style/index.css" />
</head>
<body>
<main>
<!-- Header Start -->
<header>
<nav class="nav container">
<h2 class="nav_logo"><a href="#">Gochat</a></h2>
<ul class="menu_items">
<img src="images/times.svg" alt="timesicon" id="menu_toggle" />
<li><a href="#" class="nav_link">Home</a></li>
<li><a href="#" class="nav_link">Blog</a></li>
<li><a href="#" class="nav_link">About Us</a></li>
<li><a href="#" class="nav_link">Privacy Policy</a></li>
<li><a href="#" class="nav_link">Contact Us</a></li>
</ul>
<img src="assets/images/bars.svg" alt="timesicon" id="menu_toggle" />
</nav>
</header>
<!-- Header End -->
<!-- Hero Start -->
<section class="hero">
<div class="row container">
<div class="column">
<h2>Gochat Webapplication</h2>
<p>"Connecting hearts, one message at a time"</p>
<p>-Developed By <a href="https://www.suriyaravichandran.me/">Suriya Ravichandran</a></p>
<div class="buttons">
<a href="login.php">
<button class="btn">Login</button></a>
<a href="login.php">
<button class="btn">Contact Us</button></a>
</div>
</div>
<div class="column">
<img src="assets/images/main_logo.png" alt="heroImg" class="hero_img" />
</div>
</div>
<script src="js/index.js"></script>
<script src="js/signup.js"></script>
</body>
</html>
\ No newline at end of file
<img src="assets/images/bg-bottom-hero.png" alt="" class="curveImg" />
</section>
<!-- Hero End-->
</main>
<script>
const header = document.querySelector("header");
const menuToggler = document.querySelectorAll("#menu_toggle");
menuToggler.forEach(toggler => {
toggler.addEventListener("click", () => header.classList.toggle("showMenu"));
});
</script>
</body>
</html>
js/index.js → js/signup1.js
+ 0
− 0
View file @ ba422351
File moved
login.php
+ 1
− 1
View file @ ba422351
......@@ -20,7 +20,7 @@
</div>
</div>
</form>
<div class="link">Not yet signed up?<a href="index.php">signup now</a></div>
<div class="link">Not yet signed up?<a href="signup.php">signup now</a></div>
</section>
</div>
......
php/headers/index_header.php → php/headers/signup_header.php
+ 0
− 0
View file @ ba422351
File moved
signup.php 0 → 100644
+ 48
− 0
View file @ ba422351
<?php
session_start();
if(isset($_SESSION['unique_id'])){
header("location: users.php");
}
?>
<?php include_once "php/headers/signup_header.php";?>
<body>
<div class="wrapper">
<section class="formsignup">
<header> Gochat</header>
<form action="#" enctype="multipart/form-data">
<div class="error-txt"></div>
<div class="name-details">
<div class="field">
<label>First Name</label>
<input type="text" name="fname" placeholder="First Name" required>
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="lname" placeholder="Last Name" required>
</div>
<div class="field">
<label>Email Address</label>
<input type="text" name="email" placeholder="Enter your Email" required>
</div>
<div class="field-pass">
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password" required>
<i class="fas fa-eye"></i>
</div>
<div class="field">
<label>Select your Profile</label>
<input type="file" name="image" required>
</div>
<div class="field-gochat-btn">
<input type="submit" value="GO TO CHAT">
</div>
</div>
</form>
<div class="link">Already signed up? <a href="login.php">Login now</a></div>
</section>
</div>
<script src="js/signup1.js"></script>
<script src="js/signup.js"></script>
</body>
</html>
\ No newline at end of file
style/index.css 0 → 100644
+ 172
− 0
View file @ ba422351
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
main {
background: #6610f2;
}
.container {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 60px;
}
.nav_logo {
padding: 10px 0;
}
.menu_items {
display: flex;
list-style: none;
gap: 20px;
}
a {
color: #fff;
text-decoration: none;
}
/* Hero */
.hero {
position: relative;
min-height: 100vh;
width: 100%;
background: url(../assets/images/bg-dot.png), url(../assets/images/bg-dot.png), url(../assets/images/bg-round.png), url(../assets/images/bg-tree.png);
background-position: 10px 10px, bottom 215px right 10px, left 55% top -1%, left 45% bottom -1px;
background-repeat: no-repeat;
}
.curveImg {
position: absolute;
bottom: 0;
width: 100%;
pointer-events: none;
}
.hero .row {
display: flex;
align-items: center;
min-height: 100vh;
height: 100%;
width: 100%;
padding: 0 60px;
gap: 30px;
justify-content: space-between;
}
.hero .row h2,
.hero .row p {
color: #fff;
}
.hero .row h2 {
font-size: 36px;
margin-bottom: 16px;
}
.hero .column {
width: 50%;
}
.buttons {
display: flex;
margin-top: 25px;
gap: 10px;
}
.btn {
padding: 14px 26px;
background: #fff;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:last-child {
border: 2px solid #fff;
background: transparent;
color: #fff;
}
.btn:last-child:hover {
background-color: #fff;
color: #333;
}
.hero_img {
width: 100%;
z-index: 10;
position: relative;
}
#menu_toggle {
display: none;
}
/* Reponsive */
@media (width < 860px) {
#menu_toggle {
display: block;
}
.nav {
padding: 0 20px;
background-color: #fff;
}
.menu_items {
position: fixed;
top: 0;
width: 260px;
background-color: #fff;
height: 100%;
left: -100%;
padding: 50px 30px 30px;
flex-direction: column;
transition: all 0.5s ease;
}
.showMenu .menu_items {
left: 0;
}
a {
color: #333;
}
#menu_toggle {
width: 20px;
cursor: pointer;
}
.menu_items #menu_toggle {
position: absolute;
top: 20px;
right: 20px;
}
.hero {
padding-top: 130px;
}
.hero .row {
flex-direction: column;
padding: 0 20px;
justify-content: center;
}
.hero .row .column {
width: 100%;
}
}
@media (width < 600px) {
.hero {
padding-top: 80px;
}
.hero .row h2 {
font-size: 26px;
}
.buttons {
justify-content: center;
}
.btn {
padding: 10px 16px;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment