Scribd
Upload
18 views19 pages

Fhjnuvb

Uploaded by

andyjohnkama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views19 pages

Fhjnuvb

Uploaded by

andyjohnkama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

<?

php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
// Retrieve form data
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$book_or_request_call = $_POST['book_or_request_call'];

// Connect to your database (replace these variables with your


actual database credentials)
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "your_database_name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Insert data into the database


$sql = "INSERT INTO entry_details (first_name, last_name, gender,
email, phone, book_or_request_call) VALUES ('$first_name',
'$last_name', '$gender', '$email', '$phone', '$book_or_request_call')";
$result = $conn->query($sql);

// Check if insertion was successful


if ($result) {
echo "Data inserted successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

// Close database connection


$conn->close();
}
<?php
//connection parameters
$conn = mysqli_connect('localhost', 'root', '', 'myb');

// Check connection
if ($conn) {
echo "connection connection";
} else {
// Use mysqli_connect_error() to get detailed error message
die("Connection failed: " . mysqli_connect_error());
}

-- phpMyAdmin SQL Dump


-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 04, 2024 at 05:48 PM
-- Server version: 10.4.32-MariaDB
-- PHP Version: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";


START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;


/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `bb123`
--

-- --------------------------------------------------------

--
-- Table structure for table `entry_details`
--

CREATE TABLE `entry_details` (


`first_name` varchar(255) NOT NULL,
`last_name` varchar(240) NOT NULL,
`gender` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`phone` bigint(10) NOT NULL,
`book_or_request_call` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;


/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

<?php
// Include file containing database connection parameters
include("connect.php");

// Check connection
if ($conn) {
echo "Connected successfully";
} else {
// Use mysqli_connect_error() to get detailed error message
die("Connection failed: " . mysqli_connect_error());
}

// Check if form is submitted


if(isset($_POST['save'])){

// Retrieve form data


$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$gender = $_POST['gender'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$book_or_request_call = $_POST['book_or_request_call'];

// SQL query to insert data into database


$sql = "INSERT INTO entry_details (first_name, last_name, gender,
email, phone, book_or_request_call)
VALUES ('$first_name', '$last_name', '$gender', '$email', '$phone',
'$book_or_request_call')";

// Execute SQL query


if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: ". $sql. "<br>". mysqli_error($conn);
}

// Close database connection


mysqli_close($conn);
} else {
echo "Please fill out the form";
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Fresh-cuts Barber shop</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-
[email protected]/css/fontawesome.min.css" integrity="sha384-
BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?
family=Kaushan+Script&display=swap" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-
scroll.polyfills.min.js"></script>

<style>
#formContainer {
text-align: center;
display: none;
margin-top: 40px; /* Increased margin */
}
#formContainer table {
border-collapse: collapse;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
#formContainer table td {
padding: 10px;
text-align: left;
}
#formContainer table td label {
font-weight: bold;
}
#formContainer table td input[type="text"],
#formContainer table td input[type="radio"] {
width: calc(100% - 150px);
}
#formContainer table td input[type="submit"] {
width: auto;
}
.banner-text a {
display: inline-block;
padding: 10px 20px; /* Added padding */
border: 2px solid black; /* Added border */
font-size: 25px; /* Increased font size */
margin-top: 20px; /* Adjusted button position */
text-decoration: none; /* Remove default underline */
color: black; /* Button text color */
transition: color 0.3s; /* Smooth color transition */
}
.banner-text a:hover {
color: white; /* Change text color on hover */
}
</style>

<script>
function showForm() {
var formContainer = document.getElementById("formContainer");
formContainer.style.display = "block";
formContainer.scrollIntoView({ behavior: 'smooth', block: 'start'
});
}
</script>
</head>
<body>
<section id="banner">
<img src="img/ogo.png" class="logo">
<div class="banner-text">
<h1>Kenya Hair Studio</h1>
<p>Style Your Hair is Style Your Life</p>
<a href="#" onclick="showForm();">Click here to fill a request
form</a>
</div>
</section>
<div id="formContainer">
<form method="post" action=''>
<table border="1">
<tr>
<td>
<label>Enter First Name</label>
</td>
<td><input type="text" name="first_name"></td>
</tr>
<tr>
<td>
<label>Enter Last Name</label>
</td>
<td><input type="text" name="last_name"></td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender"
value="female">Female
</td>
</tr>
<tr>
<td>
<label>Enter email</label>
</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>
<label>Enter Phone</label>
</td>
<td><input type="phone" name="phone"></td>
</tr>
<tr>
<td>
<label>Book or Request Call</label>
</td>
<td>
<input type="radio" name="book_or_request_call"
value="book">Book
<input type="radio" name="book_or_request_call"
value="call">Call Request
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
name="save" value="Submit" onclick="redirectToHomepage()"></td>
</tr>
</table>
</form>
</div>

<script type="text/javascript">
function redirectToHomepage() {
window.location.href = 'http://yourhomepageurl.com';
}
</script>
<script>
function redirectToHomepage() {
window.location.href = "homepage.php";
}
</script>

<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#feature">FEATURES</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#footer">CONTACT US</a></li>
</ul>
</nav>
</div>
<div id="menubtn">
<img src="img/menu.jpeg" id="menu">
</div>

<!--Features-->

<section id="feature">
<div class="title-text">
<p>FEATURES</p>
<h1>Why us?</h1>
</div>
<div class="feature-box">
<div class="features">
<h1>Experienced Staff</h1>
<div class="feature-desc">
<div class="features-icon">
<i class="fa-solid fa-shield"></i>
</div>
<div class="feature-text"></div>
<p>Our barbers are ready to serve our customers with respect and
updates on all styles.</p>
</div>
<h1>Pre Booking Online</h1>
<div class="feature-desc">
<div class="features-icon">
<i class="fa fa-shield" aria-hidden="true"></i>
</div>
<div class="feature-text"></div>
<p>Our barbers are ready to serve our customers with respect and
updates on all styles.</p>
</div>
<div class="features-img">

</div>
<h1>Affordable Cost</h1>
<div class="feature-desc">
<div class="features-icon">
<i class="fa fa-inr"></i>
</div>
<div class="feature-text"></div>
<p>Our barbers are ready to serve our customers with respect and
updates on all styles.</p>
</div>
</section>

<!--service-->
<section id="service">
<div class="title-text">
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div class="service-box">
<div class="single-service">
<img src="img/banneryy.jpeg">
<div class="overlay"></div>
<div class="service-desc"></div>
<h3>Hair styling</h3>
<hr>
<p>This styles have been tested by our barbers and they give
the best looks</p>
</div>
<div class="single-service">
<img src="img/banner.jpg">
<div class="overlay"></div>
<div class="service-desc"></div>
<h3>Beard Trim</h3>
<hr>
<p>This styles have been tested by our barbers and they give
the best looks</p>
</div>
</div>
<div class="single-service">
<img src="img/ry.webp">
<div class="overlay"></div>
<div class="service-desc"></div>
<h3>Hair cut</h3>
<hr>
<p>This styles have been tested by our barbers and they give
the best looks</p>
</div>
</div>

</div>

*{
margin: 0;
padding: 0;

}
#banner {
background: linear-
gradient(rgba(0,0,0,0.5),#009688),url(img/banner.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 130px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;

}
.banner-text h1{
font-size: 130px;
font-family: "Kaushan Script", cursive;
padding: -100px;
}
.banner-text p{
font-size: 20px;
font-family: "Kaushan Script", cursive;
}
.banner-btn {
margin: 70px auto 0;

}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color 0.5s;
}
.banner-btn a span{
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: o.5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: #000;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background: #009688;
z-index: 2;
}
nav ul li{
list-style: none;
margin: 50px 20px;

}
nav ul li a{
text-decoration: none;
color: #fff;
}
#menubtn{
width: 50px;
height: 50px;
background: #009688;
text-align: center;
position: fixed;
right: 30px;
top: 20px;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
#menubtn img{
width: 50px;
margin-top: 15px;
}

@media screen and (max-width:770px) {


.banner-text h1{
font-size: 44px;
font-family: "Kaushan Script", cursive;
}
.banner-btn a{
display: block;
margin: 220px auto;
}
}
/*--FEATURES--*/
#feature{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;

}
.title-text p{
margin: auto;
font-size: 20px;
color: #009688;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#019587,#fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10eg);
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin: auto;
display: flex;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.features{
flex-basis: 50%;
}
.features-img{
flex-basis: 50%;
margin: auto;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #009688;
}
.feature-desc{
display: flex;
align-items: center;
margin-bottom: 40;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #009688;
border: 1px solid #003
}
.feature-text p{
padding: 0 20px;
text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
margin: auto;
}
.features-img img{
width: 100%;
}
}
/*service*/
#service{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#009688);
opacity: 0;
transition: 1s;

}
.single-service:hover .overlay{
opacity: 1;

}
.service-desc{
width: 80%;
position: absolute;
bottom: 0%;
left: 50%;
opacity: 0;
transition: 1s;
transform: translate(-50%);
}
hr{
background: #03010409;
height: 2px;
border: 0;
margin: 15px auto;
width: 60%;
}

.service-desc p{
font-size: 15px;
}
.single-service:hover .service-desc{
bottom: 40%;
opacity: 1;
}
/**--footer--**/
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;

}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: 5% ;
}
.footer-left,.footer-right{
flex-basis: 45%;
padding: 10px;
margin-bottom: 20px;

}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%,-50%);
}
</div>

<script>
var menubtn = document.getElementById("menubtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right ="-250px"

menubtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right ="0";

}
else{
sideNav.style.right ="-250px"
menu.scr ="img/menu.jpeg";
}
}
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 300
});
</script>
</section>
<!--footer-->
<section id="footer">
<img src="img/cartoon-barb.jpg" class="footer-img">
<div class="title-text">
<p>CONTACT</p>
<h1>VISIT US TODAY</h1>
</div>
<div class="footer-row">
<div class="footer-left">
<h1>Opening hours</h1>
<p>Monday to Saturday -8am to 10 pm</p>
</div>
<div class="footer-right">
<h1>Get In Touch</h1>
<p># 12th floor Monti Building,Kimathi st.</p>
<p>@[email protected]</p>
<p>+254 768 086527</p>
</div>
</div>
</section>

<script>
var menubtn = document.getElementById("menubtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right ="-250px"

menubtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right ="0";
}
else{
sideNav.style.right ="-250px"
menu.scr ="img/menu.jpeg";
}
}
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 300
});
</script>

</body>
</html>

.home-btn {
margin: 70px auto 0;

}
.home-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color 0.5s;
}
.home-btn a span{
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: o.5s;
}
.home-btn a:hover span{
width: 100%;
}
.home-btn a:hover{
color: #000;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background: #009688;
z-index: 2;
}
nav ul li{
list-style: none;
margin: 50px 20px;

}
nav ul li a{
text-decoration: none;
color: #fff;
}
#menubtn{
width: 50px;
height: 50px;
background: #009688;
text-align: center;
position: fixed;
right: 30px;
top: 20px;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
#menubtn img{
width: 50px;
margin-top: 15px;
}

@media screen and (max-width:770px) {


.banner-text h1{
font-size: 44px;
font-family: "Kaushan Script", cursive;
}
.banner-btn a{
display: block;
margin: 220px auto;
}

You might also like