file admin_page.php
<?php
include 'config.php';
session_start();
$admin_id = $_SESSION['admin_id'];
if(!isset($admin_id)){
header('location:login.php');
}
?>
<!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">
<title>admin page</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title"> <span>admin</span> profile page </h1>
<section class="profile-container">
<?php
$select_profile = $conn->prepare("SELECT * FROM `users` WHERE id = ?");
$select_profile->execute([$admin_id]);
$fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
?>
<div class="profile">
<img src="uploaded_img/<?= $fetch_profile['image']; ?>" alt="">
<h3><?= $fetch_profile['name']; ?></h3>
<a href="admin_profile_update.php" class="btn">update profile</a>
<a href="logout.php" class="delete-btn">logout</a>
<div class="flex-btn">
<a href="login.php" class="option-btn">login</a>
<a href="register.php" class="option-btn">register</a>
</div>
</div>
</section>
</body>
</html>
file admin_profile_update.php
<?php
include 'config.php';
session_start();
$admin_id = $_SESSION['admin_id'];
if(!isset($admin_id)){
header('location:login.php');
};
if(isset($_POST['update'])){
$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$update_profile = $conn->prepare("UPDATE `users` SET name = ?, email = ? WHERE id = ?");
$update_profile->execute([$name, $email, $admin_id]);
$old_image = $_POST['old_image'];
$image = $_FILES['image']['name'];
$image_tmp_name = $_FILES['image']['tmp_name'];
$image_size = $_FILES['image']['size'];
$image_folder = 'uploaded_img/'.$image;
if(!empty($image)){
if($image_size > 2000000){
$message[] = 'image size is too large';
}else{
$update_image = $conn->prepare("UPDATE `users` SET image = ? WHERE id = ?");
$update_image->execute([$image, $admin_id]);
if($update_image){
move_uploaded_file($image_tmp_name, $image_folder);
unlink('uploaded_img/'.$old_image);
$message[] = 'image has been updated!';
}
}
}
$old_pass = $_POST['old_pass'];
$previous_pass = md5($_POST['previous_pass']);
$previous_pass = filter_var($previous_pass, FILTER_SANITIZE_STRING);
$new_pass = md5($_POST['new_pass']);
$new_pass = filter_var($new_pass, FILTER_SANITIZE_STRING);
$confirm_pass = md5($_POST['confirm_pass']);
$confirm_pass = filter_var($confirm_pass, FILTER_SANITIZE_STRING);
if(!empty($previous_pass) || !empty($new_pass) || !empty($confirm_pass)){
if($previous_pass != $old_pass){
$message[] = 'old password not matched!';
}elseif($new_pass != $confirm_pass){
$message[] = 'confirm password not matched!';
}else{
$update_password = $conn->prepare("UPDATE `users` SET password = ? WHERE id = ?");
$update_password->execute([$confirm_pass, $admin_id]);
$message[] = 'password has been updated!';
}
}
}
?>
<!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">
<title>admin profile update</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if(isset($message)){
foreach($message as $message){
echo '
<div class="message">
<span>'.$message.'</span>
<i class="fas fa-times" onclick="this.parentElement.remove();"></i>
</div>
';
}
}
?>
<h1 class="title"> update <span>admin</span> profile </h1>
<section class="update-profile-container">
<?php
$select_profile = $conn->prepare("SELECT * FROM `users` WHERE id = ?");
$select_profile->execute([$admin_id]);
$fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
?>
<form action="" method="post" enctype="multipart/form-data">
<img src="uploaded_img/<?= $fetch_profile['image']; ?>" alt="">
<div class="flex">
<div class="inputBox">
<span>username : </span>
<input type="text" name="name" required class="box" placeholder="enter your name" value="<?= $fetch_profile['name']; ?>">
<span>email : </span>
<input type="email" name="email" required class="box" placeholder="enter your email" value="<?= $fetch_profile['email']; ?>">
<span>profile pic : </span>
<input type="hidden" name="old_image" value="<?= $fetch_profile['image']; ?>">
<input type="file" name="image" class="box" accept="image/jpg, image/jpeg, image/png">
</div>
<div class="inputBox">
<input type="hidden" name="old_pass" value="<?= $fetch_profile['password']; ?>">
<span>old password :</span>
<input type="password" class="box" name="previous_pass" placeholder="enter previous password" >
<span>new password :</span>
<input type="password" class="box" name="new_pass" placeholder="enter new password" >
<span>confirm password :</span>
<input type="password" class="box" name="confirm_pass" placeholder="confirm new password" >
</div>
</div>
<div class="flex-btn">
<input type="submit" value="update profile" name="update" class="btn">
<a href="admin_page.php" class="option-btn">go back</a>
</div>
</form>
</section>
</body>
</html>
file config.php
<?php
$db_name = "mysql:host=localhost;dbname=user_form";
$username = "root";
$password = "";
$conn = new PDO($db_name, $username, $password);
?>
file login.php
<?php
include 'config.php';
session_start();
if(isset($_POST['submit'])){
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$pass = md5($_POST['pass']);
$pass = filter_var($pass, FILTER_SANITIZE_STRING);
$select = $conn->prepare("SELECT * FROM `users` WHERE email = ? AND password = ?");
$select->execute([$email, $pass]);
$row = $select->fetch(PDO::FETCH_ASSOC);
if($select->rowCount() > 0){
if($row['user_type'] == 'admin'){
$_SESSION['admin_id'] = $row['id'];
header('location:admin_page.php');
}elseif($row['user_type'] == 'user'){
$_SESSION['user_id'] = $row['id'];
header('location:user_page.php');
}else{
$message[] = 'no user found!';
}
}else{
$message[] = 'incorrect email or password!';
}
}
?>
<!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">
<title>login</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if(isset($message)){
foreach($message as $message){
echo '
<div class="message">
<span>'.$message.'</span>
<i class="fas fa-times" onclick="this.parentElement.remove();"></i>
</div>
';
}
}
?>
<section class="form-container">
<form action="" method="post" enctype="multipart/form-data">
<h3>login now</h3>
<input type="email" required placeholder="enter your email" class="box" name="email">
<input type="password" required placeholder="enter your password" class="box" name="pass">
<p>don't have an account? <a href="register.php">register now</a></p>
<input type="submit" value="login now" class="btn" name="submit">
</form>
</section>
</body>
</html>
file logout.php
<?php
include 'config.php';
session_start();
session_unset();
session_destroy();
header('location:login.php');
?>
file register.php
<?php
include 'config.php';
if(isset($_POST['submit'])){
$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$pass = md5($_POST['pass']);
$pass = filter_var($pass, FILTER_SANITIZE_STRING);
$cpass = md5($_POST['cpass']);
$cpass = filter_var($cpass, FILTER_SANITIZE_STRING);
$image = $_FILES['image']['name'];
$image_tmp_name = $_FILES['image']['tmp_name'];
$image_size = $_FILES['image']['size'];
$image_folder = 'uploaded_img/'.$image;
$select = $conn->prepare("SELECT * FROM `users` WHERE email = ?");
$select->execute([$email]);
if($select->rowCount() > 0){
$message[] = 'user already exist!';
}else{
if($pass != $cpass){
$message[] = 'confirm password not matched!';
}elseif($image_size > 2000000){
$message[] = 'image size is too large!';
}else{
$insert = $conn->prepare("INSERT INTO `users`(name, email, password, image) VALUES(?,?,?,?)");
$insert->execute([$name, $email, $cpass, $image]);
if($insert){
move_uploaded_file($image_tmp_name, $image_folder);
$message[] = 'registered succesfully!';
header('location:login.php');
}
}
}
}
?>
<!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">
<title>register</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if(isset($message)){
foreach($message as $message){
echo '
<div class="message">
<span>'.$message.'</span>
<i class="fas fa-times" onclick="this.parentElement.remove();"></i>
</div>
';
}
}
?>
<section class="form-container">
<form action="" method="post" enctype="multipart/form-data">
<h3>register now</h3>
<input type="text" required placeholder="enter your username" class="box" name="name">
<input type="email" required placeholder="enter your email" class="box" name="email">
<input type="password" required placeholder="enter your password" class="box" name="pass">
<input type="password" required placeholder="confirm your password" class="box" name="cpass">
<input type="file" name="image" required class="box" accept="image/jpg, image/png, image/jpeg">
<p>already have an account? <a href="login.php">login now</a></p>
<input type="submit" value="register now" class="btn" name="submit">
</form>
</section>
</body>
</html>
file user_page.php
<?php
include 'config.php';
session_start();
$user_id = $_SESSION['user_id'];
if(!isset($user_id)){
header('location:login.php');
}
?>
<!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">
<title>user page</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title"> <span>user</span> profile page </h1>
<section class="profile-container">
<?php
$select_profile = $conn->prepare("SELECT * FROM `users` WHERE id = ?");
$select_profile->execute([$user_id]);
$fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
?>
<div class="profile">
<img src="uploaded_img/<?= $fetch_profile['image']; ?>" alt="">
<h3><?= $fetch_profile['name']; ?></h3>
<a href="user_profile_update.php" class="btn">update profile</a>
<a href="logout.php" class="delete-btn">logout</a>
<div class="flex-btn">
<a href="login.php" class="option-btn">login</a>
<a href="register.php" class="option-btn">register</a>
</div>
</div>
</section>
</body>
</html>
file user_profile_update.php
<?php
include 'config.php';
session_start();
$user_id = $_SESSION['user_id'];
if(!isset($user_id)){
header('location:login.php');
};
if(isset($_POST['update'])){
$name = $_POST['name'];
$name = filter_var($name, FILTER_SANITIZE_STRING);
$email = $_POST['email'];
$email = filter_var($email, FILTER_SANITIZE_STRING);
$update_profile = $conn->prepare("UPDATE `users` SET name = ?, email = ? WHERE id = ?");
$update_profile->execute([$name, $email, $user_id]);
$old_image = $_POST['old_image'];
$image = $_FILES['image']['name'];
$image_tmp_name = $_FILES['image']['tmp_name'];
$image_size = $_FILES['image']['size'];
$image_folder = 'uploaded_img/'.$image;
if(!empty($image)){
if($image_size > 2000000){
$message[] = 'image size is too large';
}else{
$update_image = $conn->prepare("UPDATE `users` SET image = ? WHERE id = ?");
$update_image->execute([$image, $user_id]);
if($update_image){
move_uploaded_file($image_tmp_name, $image_folder);
unlink('uploaded_img/'.$old_image);
$message[] = 'image has been updated!';
}
}
}
$old_pass = $_POST['old_pass'];
$previous_pass = md5($_POST['previous_pass']);
$previous_pass = filter_var($previous_pass, FILTER_SANITIZE_STRING);
$new_pass = md5($_POST['new_pass']);
$new_pass = filter_var($new_pass, FILTER_SANITIZE_STRING);
$confirm_pass = md5($_POST['confirm_pass']);
$confirm_pass = filter_var($confirm_pass, FILTER_SANITIZE_STRING);
if(!empty($previous_pass) || !empty($new_pass) || !empty($confirm_pass)){
if($previous_pass != $old_pass){
$message[] = 'old password not matched!';
}elseif($new_pass != $confirm_pass){
$message[] = 'confirm password not matched!';
}else{
$update_password = $conn->prepare("UPDATE `users` SET password = ? WHERE id = ?");
$update_password->execute([$confirm_pass, $user_id]);
$message[] = 'password has been updated!';
}
}
}
?>
<!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">
<title>user profile update</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
if(isset($message)){
foreach($message as $message){
echo '
<div class="message">
<span>'.$message.'</span>
<i class="fas fa-times" onclick="this.parentElement.remove();"></i>
</div>
';
}
}
?>
<h1 class="title"> update <span>user</span> profile </h1>
<section class="update-profile-container">
<?php
$select_profile = $conn->prepare("SELECT * FROM `users` WHERE id = ?");
$select_profile->execute([$user_id]);
$fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
?>
<form action="" method="post" enctype="multipart/form-data">
<img src="uploaded_img/<?= $fetch_profile['image']; ?>" alt="">
<div class="flex">
<div class="inputBox">
<span>username : </span>
<input type="text" name="name" required class="box" placeholder="enter your name" value="<?= $fetch_profile['name']; ?>">
<span>email : </span>
<input type="email" name="email" required class="box" placeholder="enter your email" value="<?= $fetch_profile['email']; ?>">
<span>profile pic : </span>
<input type="hidden" name="old_image" value="<?= $fetch_profile['image']; ?>">
<input type="file" name="image" class="box" accept="image/jpg, image/jpeg, image/png">
</div>
<div class="inputBox">
<input type="hidden" name="old_pass" value="<?= $fetch_profile['password']; ?>">
<span>old password :</span>
<input type="password" class="box" name="previous_pass" placeholder="enter previous password" >
<span>new password :</span>
<input type="password" class="box" name="new_pass" placeholder="enter new password" >
<span>confirm password :</span>
<input type="password" class="box" name="confirm_pass" placeholder="confirm new password" >
</div>
</div>
<div class="flex-btn">
<input type="submit" value="update profile" name="update" class="btn">
<a href="user_page.php" class="option-btn">go back</a>
</div>
</form>
</section>
</body>
</html>
file style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
:root{
--red:#EE3623;
}
*{
font-family: 'Roboto', sans-serif;
margin:0; padding: 0;
box-sizing: border-box;
border:none; outline: none;
text-decoration: none;
text-transform: capitalize;
font-weight: 400;
transition:.2s linear;
}
*::selection{
background:var(--red);
color:#fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
.nav-toggle{
transform: translateX(-30rem);
}
.btn{
height:3.5rem;
width: 15rem;
background: var(--red);
color:#fff;
border-radius: .5rem;
font-size: 1.7rem;
cursor: pointer;
margin:1rem 0;
box-shadow: 0 .3rem .5rem var(--red);
opacity: .7;
}
.btn:hover{
opacity: 1;
}
.heading{
text-align: center;
padding:.5rem 1rem;
padding-top: 2rem;
font-size: 3.5rem;
color:var(--red);
text-transform: uppercase;
}
.title{
text-align: center;
padding:0rem 1rem;
font-size: 2.5rem;
color:#666;
font-weight: 300;
}
header .menu{
position: fixed;
top:1.5rem; right:2rem;
font-size: 3.5rem;
color:var(--red);
background:#fff;
box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
padding:.3rem 1.4rem;
cursor: pointer;
z-index: 1000;
overflow: hidden;
}
header .navbar{
height: 100vh;
width:30rem;
position: fixed;
top:0; right:0;
background:#111;
display: none;
}
header .navbar ul{
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
height:100%;
list-style: none;
}
header .navbar ul li{
margin:1.4rem;
animation:fadeIn .2s linear backwards;
animation-delay: calc(.3s * var(--i));
}
@keyframes fadeIn{
0%{
transform: translateY(-8rem);
opacity: 0;
}
}
header .navbar ul li a{
font-size: 3rem;
color:#fff;
}
header .navbar ul li a:hover{
color:var(--red);
}
.fa-times{
transform:rotate(180deg) skew(-180deg);
}
.home{
position: relative;
min-height: 100vh;
z-index: 0;
}
.home .video-container video{
position: absolute;
top:0; left: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.home .content{
min-height: 100vh;
width: 45rem;
background:rgba(255,255,255,.1);
backdrop-filter: blur(.5rem);
text-align: center;
padding:2rem 3rem;
}
.home .content h1{
font-size: 4rem;
padding-top: 4vh;
color:#fff;
text-transform: uppercase;
}
.home .content h3{
font-size: 3rem;
color:#eee;
font-weight: lighter;
}
.home .content .form-container form{
width: 100%;
background:#fff;
padding: 1rem 2rem;
margin-top: 1.5rem;
border-radius: 1rem;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.home .content .form-container form h3{
font-size: 2.5rem;
padding:2rem 1rem;
color:#333;
font-weight: 400;
text-transform: uppercase;
}
.home .content .form-container form span{
font-size: 2rem;
display: block;
padding:1.4rem 0;
color:var(--red);
text-align: left;
}
.home .content .form-container form input{
height:3.5rem;
width: 100%;
padding:0 1rem;
font-size: 1.5rem;
background:#eee;
}
.home .content .form-container form .btn{
width: 15rem;
background-color: var(--red);
margin:1.5rem 0;
}
.feature{
background: #2C3A47;
}
.feature .title{
color:#eee;
}
.feature .card-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
}
.feature .card-container .card{
height:45rem;
width:30rem;
margin:2rem 1rem;
position: relative;
overflow: hidden;
}
.feature .card-container .card img{
height:100%;
width:100%;
object-fit: cover;
}
.feature .card-container .card .info{
height:100%;
width: 100%;
position: absolute;
bottom:-100%; left: 0;
background:linear-gradient(transparent, #000);
padding: 0 2rem;
padding-top: 85%;
}
.feature .card-container .card:hover .info{
bottom:0%;
}
.feature .card-container .card .info h3{
font-size: 3rem;
color:#fff;
}
.feature .card-container .card .info .stars i{
font-size: 1.5rem;
color:var(--red);
padding:1rem 0;
}
.feature .card-container .card .info p{
font-size: 1.5rem;
color:#eee;
}
.feature .card-container .card .info .btn{
box-shadow: none;
}
.about .row{
display: flex;
align-items: center;
justify-content: center;
width: 80%;
margin:2rem auto;
padding:2rem;
}
.about .row .image img{
height:60vh;
width:40vw;
}
.about .row .content h3{
font-size: 3rem;
color:var(--red);
}
.about .row .content p{
font-size: 1.7rem;
color:#666;
padding:1rem 0;
}
.about .box-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.about .box-container .box{
margin:2rem;
height:15rem;
width:25rem;
border-radius: 1rem;
background:var(--red);
text-align: center;
color: #fff;
}
.about .box-container .box i{
font-size: 5rem;
margin:2rem 0;
}
.about .box-container .box h3{
font-size: 2rem;
}
.gallery{
background:#f9f9f9;
}
.gallery .box-container{
padding:4rem 0;
}
.gallery .box-container .box{
width:75%;
margin:4rem auto;
border-radius: .5rem;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
display: flex;
align-items: center;
overflow: hidden;
background:#fff;
}
.gallery .box-container .box .image{
height: 25rem;
width:50%;
}
.gallery .box-container .box .image img{
height: 100%;
width:100%;
object-fit: cover;
}
.gallery .box-container .box .content{
height: 100%;
width:50%;
padding:2rem;
}
.gallery .box-container .box:nth-child(even){
flex-flow: row-reverse;
}
.gallery .box-container .box:nth-child(even) .content{
text-align: right;
}
.gallery .box-container .box .content h3{
color:var(--red);
font-size: 3rem;
}
.gallery .box-container .box .content p{
color:#666;
font-size: 1.5rem;
padding:1rem 0;
}
.review .box-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
}
.review .box-container .box{
width: 30rem;
text-align: center;
padding: 0 2rem;
margin:4rem 1.5rem;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.review .box-container .box i{
font-size: 6rem;
margin-top: -3rem;
color:var(--red);
opacity: .4;
}
.review .box-container .box p{
color:#666;
font-size: 1.3rem;
padding:2rem 0;
}
.review .box-container .box .user{
display: flex;
align-items: center;
text-align: left;
padding:.5rem 0;
border-top: .1rem solid #3334;
}
.review .box-container .box .user img{
height:4rem;
width:4rem;
border-radius: 50%;
object-fit: cover;
margin:.8rem 1rem;
}
.review .box-container .box .user .info h3{
color:var(--red);
font-size: 1.8rem;
}
.review .box-container .box .user .info span{
color:#666;
font-size: 1.5rem;
}
.newsletter{
background:var(--red);
padding:3rem;
}
.newsletter .box{
width: 100%;
padding:2rem;
text-align: center;
border-radius: 1rem;
background:#f9f9f9;
}
.newsletter .box h1{
color:var(--red);
font-size: 4rem;
}
.newsletter .box p{
color:#666;
font-size: 1.8rem;
}
.newsletter .box form{
background:#eee;
width:60%;
margin:2rem auto;
padding:.5rem 0;
height:5rem;
border-radius: 5rem;
}
.newsletter .box form input[type="email"]{
width: 71%;
background:none;
padding:.5rem;
font-size: 1.5rem;
}
.newsletter .box form .btn{
height:90%;
width: 26%;
border-radius: 5rem;
margin:.1rem 0;
box-shadow: none;
}
.contact{
background: #2C3A47;
}
.contact .title{
color:#eee;
}
.contact form{
width:80%;
text-align: center;
padding:4rem 0;
margin:0 auto;
}
.contact form .inputBox{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .inputBox input{
width: 49%;
height:4rem
}
.contact form input, textarea{
padding:0 1rem;
font-size: 1.7rem;
margin:1rem 0;
color:#333;
}
.contact form textarea{
padding:1rem;
height:20rem;
resize: none;
width: 100%;
}
.contact form .btn{
box-shadow: none;
color:#fff;
opacity: 1;
}
.contact form .btn:hover{
opacity: .8;
}
.footer{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
}
.footer .box{
width:30rem;
margin:2rem;
text-align: center;
}
.footer .box:nth-child(1){
text-align: left;
}
.footer .box h3{
font-size: 3rem;
color:var(--red);
padding:1rem 0;
}
.footer .box p{
color:#666;
font-size: 1.5rem;
}
.footer .box a{
color:#666;
font-size: 2rem;
display: block;
padding:.2rem 0;
}
.footer .box a:hover{
text-decoration: underline;
}
.footer .credit{
width: 85%;
padding-top: 1rem;
font-size: 2rem;
color:#666;
text-align: center;
border-top: .2rem solid #3333;
}
.footer .credit span{
color:var(--red);
}
/* media queries */
@media (max-width:500px){
html{
font-size: 50%;
}
.home .content{
width: 100%;
}
.contact form{
width: 90%;
}
.contact form .inputBox input{
width: 100%;
}
}
@media (max-width:768px){
html{
font-size: 55%;
}
.about .row{
flex-flow: column;
width:90%;
}
.about .row .image img{
width: 90vw;
}
.gallery .box-container .box{
flex-flow: column;
width: 90%;
}
.gallery .box-container .box:nth-child(even){
flex-flow: column;
}
.gallery .box-container .box .image{
width: 100%;
}
.gallery .box-container .box .content{
width: 100%;
}
.gallery .box-container .box:nth-child(even) .content{
text-align: left;
}
.newsletter .box form{
width: 100%;
}
}
file js.js
$(document).ready(function(){
$('.menu').click(function(){
$('.navbar').toggle();
$('.menu .fa-bars').toggleClass('fa-times');
$('section').toggleClass('nav-toggle');
});
$(window).on('load scroll',function(){
$('.navbar').hide();
$('.menu .fa-bars').removeClass('fa-times');
$('section').removeClass('nav-toggle');
});
});