I took the code from the Bootstrap Documentation with my existent code and it crashed it, meanwhile I put the same code in a Test.html and it works. I tried downloading the last version, put all bootstrap.min.css and all that stuff but it doesn't work, tried to put container-fluid at line 18 but the problem persists
I took the code from the Bootstrap Documentation (NavBars).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Also my login.php code (when it collide)
<?php require 'inc/cabecera.inc'; ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Portal web</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 caja col-centrar">
<form action="login.php" method="POST" role="form">
<legend>Logueate!</legend>
<div class="form-group">
<input name="email" type="text" class="form-control" id="" placeholder="Su email...">
</div>
<div class="form-group">
<input name="contrasena" type="password" class="form-control" id="" placeholder="Su contraseña...">
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
<a class="pull-right" href="registrarse.php">Registrarse</a>
<label for="" class="checkbox-inline">
<input name="recordar" type="checkbox" value="activo"> Mantener sesión iniciada.
</label>
</form>
</div>
</div>
</div>
<?php require 'inc/footer.inc'; ?>
The problem:
It's all good:
Related
How do I send HTML email so that it will look nice with Bootstrap 4? When I send mail it looks nice, but when receiver gets it it looks bad.
here's code:
https://jsfiddle.net/bluemilkyh/6m4v9pnf/1/
I'd also like to make footer form (it's about news subscription) when they fill the form and press the button it would save to my database (I have database already which is not localhost...).
code:
<!DOCTYPE html>
<html>
<head>
<title>Stanovanja Fink</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="http://localhost/stanovanjefink/index.php">Stanovanja Fink</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjeanja.php">Stanovanje Anja</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjealjaz.php">Stanovanje Aljaž</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/kontakt.php">Kontakt</a>
</li>
</ul>
</form>
</div>
</nav>
<hr>
<body>
<div class="p-3 mb-2 bg-light text-dark container text-center d-flex flex-column align-items-center">
<h2 form-inline justify-content-center>Rezervacija Stanovanje Aljaz</h2>
<br>
<br>
<label ><b>Ime: </b></label>
<input type="text" class=" form-control col-sm-6 " disabled value="" >
<label><b>Priimek: </b></label>
<input type="text" class="form-control col-sm-6 " disabled value="" ><label><b>Telefon: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>E-mail: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Prihod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Odhod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Cena: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<br>
<h3>Informacije </h3>
<p><i class="gdlr-icon fa fa-map-marker"></i><b> Lokacija:</b> Pod Lipovim trotom</p>
<p><i class="gdlr-icon fa fa-phone"></i> <b>Telefon:</b> +36 41 8813 49219 </p>
<p><i class="gdlr-icon fa fa-envelope"></i> <b>Email :</b> +36 41 88213 49912 </p>
<br>
</div>
</body>
<footer class="bg-dark text-center">
<div class="container p-4">
<form action="kontakt.php">
<div class="row d-flex justify-content-center">
<div class="col-auto">
<p class="pt-2" style="color:white;">
<b>Naroci se na novice: </b>
</p>
</div>
<div class="col-md-5 col-12">
<div class="form-outline form-white mb-4">
<input type="email" placeholder="email" name="novice" class="form-control" required>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-outline-light mb-4">
Narocite se
</button>
</div>
</div>
<section class="mb-4">
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i></a>
</section>
</form>
</div>
<div class="text-center p-3" style="background-color:black; color:gray;">
© 2020 Stanovanja Fink
</div>
</div>
</footer>`
I am guessing you are using bootstrap. Use bootstrap for e-mail instead. Web frameworks will NOT play nicely with e-mail. HTML e-mail have different rules and best practices on how to develop markup for it, than classic web sites.
Possibly related:
Look for the top answer here to get a general idea about developing for e-mail: CSS Email Template at Outlook does not display correctly
Here for basic layout: How to make a fluid width email with a max width
I wonder if someone can help me to load a "maintanence" controller before the framwork connects to DB.
that will load tpl file.
For example, when the app is under construction and I want to turn the MySQL database off, but I want to show the people who get my web a page (tpl file that is loaded by controller) "we are under construction" page and all this by loading tpl files and not requiring PHP file.
OpenCart core makes the DB connection before any controller is loaded. So if you plan to turn to maintenance mode, before anything is displayed to the user, the DB connection is already established.
It is practically impossible to separate the DB from the core since it is so tightly coupled.
The only solution would be to create a index.html file as a copy of your maintenance mode html like Paul Feakins replied in comments.
here is a clean html you can use. should work for anyone.
in your root directory create index.html and paste this code:
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Maintenance</title>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<link href="/image/catalog/cart.png" rel="icon" />
</head>
<body>
<nav id="top">
<div class="container"><div class="pull-left">
<form action="/index.html" method="post" enctype="multipart/form-data" id="form-currency">
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown"> <strong>$</strong> <span class="hidden-xs hidden-sm hidden-md">Currency</span> <i class="fa fa-caret-down"></i></button>
<ul class="dropdown-menu">
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="EUR">€ Euro</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="GBP">£ Pound Sterling</button>
</li>
<li>
<button class="currency-select btn btn-link btn-block" type="button" name="USD">$ US Dollar</button>
</li>
</ul>
</div>
<input type="hidden" name="code" value="" />
<input type="hidden" name="redirect" value="/index.html" />
</form>
</div>
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><i class="fa fa-phone"></i> <span class="hidden-xs hidden-sm hidden-md">123456789</span></li>
<li class="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">My Account</span> <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">Wish List (0)</span></li>
<li><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Shopping Cart</span></li>
<li><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">Checkout</span></li>
</ul>
</div>
</div>
</nav>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="logo"> <h1>Your Store</h1>
</div>
</div>
<div class="col-sm-5"><div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control input-lg" />
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-lg"><i class="fa fa-search"></i></button>
</span>
</div></div>
<div class="col-sm-3"><div id="cart" class="btn-group btn-block">
<button type="button" data-toggle="dropdown" data-loading-text="Loading..." class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">0 item(s) - $0.00</span></button>
<ul class="dropdown-menu pull-right">
<li>
<p class="text-center">Your shopping cart is empty!</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<nav id="menu" class="navbar">
<div class="navbar-header"><span id="category" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">Desktops
</li>
<li class="dropdown">Laptops & Notebooks
</li>
<li class="dropdown">Components
</li>
<li>Tablets</li>
<li>Software</li>
<li>Phones & PDAs</li>
<li>Cameras</li>
</ul>
</div>
</nav>
</div>
<div id="common-maintenance" class="container">
<div class="row">
<div class="col-12"><h1 style="text-align:center;">We are currently performing some scheduled maintenance. <br/>We will be back as soon as possible. Please check back soon.</h1></div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Information</h5>
<ul class="list-unstyled">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Customer Service</h5>
<ul class="list-unstyled">
<li>Contact Us</li>
<li>Returns</li>
<li>Site Map</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Extras</h5>
<ul class="list-unstyled">
<li>Brands</li>
<li>Gift Certificates</li>
<li>Affiliate</li>
<li>Specials</li>
</ul>
</div>
<div class="col-sm-3">
<h5>My Account</h5>
<ul class="list-unstyled">
<li>My Account</li>
<li>Order History</li>
<li>Wish List</li>
<li>Newsletter</li>
</ul>
</div>
</div>
<hr>
<p>Powered By OpenCart<br /> Your Store © 2019</p>
</div>
</footer>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate#opencart.com
//-->
</body></html>
so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
and me i get this :
this is my code :
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
#include('inc.navbar')
#yield('content')
</body>
</html>
navbar.blade.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below are the cdn's
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
use thses cdn's as like below.
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Fiddle
header.php code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
nav.php
<div class="navbar navbar-default" id="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand home" href="#">
<img src="images/ico.JPG" class="hidden-xs" style="height:50px;">
<img src="images/icosmall.png" class="visible-xs" height="50px" width="auto">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-search"></i>
</button>
</div> <!----end of navbar header--->
<div class="navbar-collapse collapse" id="navigation">
<div class="padding-nav">
<ul class="nav navbar-nav navbar-left">
<li>Colors</li>
<li>How-To</li>
<li>Inspiration</li>
<li>Shop</li>
<li>Contact Us</li>
</ul> <!----end of navbar-left--->
</div> <!----end of padding nav--->
<a class="btn btn-primary navbar-btn right" href="#" >
<i class="fa fa-shopping-cart"></i>
<span>Cart 0</span>
</a>
<div class="navbar-collapse collapse right">
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search"></i>
</button>
</div> <!----navbar-collapse collapse right ends here--->
<div class="collapse clearfix" id="search">
<form class="navbar-form" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search......" name="user_query" required />
<span>
<button type="submit" value="Search" name="search" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!----input-group ends here--->
</form> <!----navbar-form ends here--->
</div> <!----collapse clearfix ends here--->
</div> <!----navbar-collapse ends here--->
</div> <!----end of container--->
</div> <!----end of navbar-navbar--->
index.php
<?php
include_once 'header.php';
?>
<?php
include_once 'nav.php';
?>
<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> <!---left carousel-control ends here ---->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> <!---right carousel-control ends here ---->
</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->
<div class="advantages">
<div class="container">
<div class="same-height-row">
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<h3>FAST GLOBAL SERVICE</h3>
<p>We are know to provide best possible service ever</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-cc-paypal" aria-hidden="true"></i>
</div>
<h3>EASY AND SAFE TRANSACTION</h3>
<p>Encrypted payment gateway through PayPal</p>
</div> <!---box same-height ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
</div>
<h3>NO INTERMEDIARIES</h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
</div> <!---same-height-row ends here ---->
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->
<?php include_once 'footer.php'; ?>
this is my complete code.
This is screenshot of my browser
ScreenShot
When i click on the search button i am supposed to get a dropdown division which has a search box. But i dont get it!! I need someone who can look into the code and help me with my problem. I am currently working on project thats due on wednesday.
this is my footer.php . I edited my header.php and removed the jquery and bootstrap.js and then placed it to the footer
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Thanks for helping i fixed my issue. Now it works perfectly.
I have no knowledge of PHP at all and am in desperate need of help. I have trawled the web for working examples but none of them are working for me. I need to send the data in the form to an email. I have 3 php files: index.php, contact.php and thank-you.php. Both the index and the contact page have forms on them and after sending the user is directed to the thank-you.php page. I am using localhost (MAMP) but i have also uploaded the website to this domain. Please tell me what I am doing wrong. The following code is located in the contact.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Legal Active - Contact Us </title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="description" content="Index">
<meta name="keywords" content="personal inury specialist, accident,
accident claims, claim, personal injury, claim today,">
<meta name="author" content="Sukhvir Singh">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<!-- Animate.css -->
<link rel="stylesheet" type="text/css"
href="../../css/animate.css-master/animate.min.css">
<!-- Favicon -->
<link rel='shortcut icon' href='favicon.png' type='image/x-icon'/>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<!-- Header Navbar -->
<nav class="navbar navbar-header-custom navbar-header-bg-custom">
<ul class="navbar-header-icon nav navbar-nav pull-md-left">
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-dm-down"
href="#">
<i class="navbar-header-link__icon--lg fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="navbar-header-link__icon--lg fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item hidden-md-up">
<h5 class="navbar-header-link nav-link navbar-header-link--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
<li class="nav-item hidden-sm-down">
<h5 class="navbar-header-link nav-link navbar-header-link--lg--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link navbar-header-link--lg" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon--lg fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-custom bg-custom">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar4" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
<i class="navbar__icon fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar4">
<ul class="nav navbar-nav pull-xs-left col-xs-12">
<li class="nav-item active col-xs-12 col-md-2 offset-md-1">
<a class="nav-link" href="index.php"> HOME </a>
</li>
<li class="nav-item btn-group col-xs-12 col-md-3">
<div class="dropdown">
<button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TYPES OF CLAIMS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="road-traffic-accident.html"> ROAD TRAFFIC ACCIDENTS </a>
<a class="dropdown-item" href="Slips-Trips-and-Falls.html"> SLIPS TRIPS & FALLS </a>
<a class="dropdown-item" href="accident-at-work.html"> ACCIDENT AT WORK <span class="sr-only">(current)</span> </a>
</div>
</div>
</li>
<li class="nav-item col-xs-12 col-md-3">
<a class="nav-link" href="work-with-us.html"> WORK WITH US </a>
</li>
<li class="nav-item col-xs-12 col-md-1">
<a class="nav-link" href="#"> CONTACT </a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="nav-link__icon fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="contact">
<h3 class="contact__h3"> CONTACT US </h3>
<div class="contact__divider"> </div>
<div class="contact__text col-xs-12 col-md-5">
Please use the form to tell us what you are enquiring about and somebody from our team will call you shortly.
</div>
<div class="contact__form form col-xs-12 col-md-5 offset-md-1">
<form class="form-group" id="contact__form" action="thank-you.php" method="POST">
<input type="text" class="input form-control fullName" placeholder="Full Name" name="fullName">
<input type="tel" class="input form-control number tel" placeholder="Contact Number" name="contactNumber">
<input type="text" class="input form-control email" placeholder="Email Address" name="email">
<textarea class="input col-xs-12 message" placeholder="Your Message" name="message"></textarea>
<button type="submit" class="form__btn btn btn-secondary"> SEND </button>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-footer">
<ul class="nav navbar-nav footer__nav">
<img class="footer__nav__logo col-xs-4 col-md-4 col-lg-3 pull-xs-right pull-md-left" src="../../assets/legal-active-logo-large.png" alt="Logo"/>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Legal Active</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Magnus House, 8 Ashfield Road, Cheadle, Cheshire, SK8 1BB </li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Registered in England & Wales - Company No. 123 4567</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-12 col-lg-5 pull-xs-right"> All Rights Reserved © Legal Active </li>
</ul>
</nav>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="../../scss/bootstrap-4/js/tests/vendor/jquery.min.js"></script>
<script src="../../scss/bootstrap-4/js/tests/vendor/tether.min.js"></script>
<script src="../../scss/bootstrap-4/dist/js/bootstrap.min.js"></script>
<script src="../../js/custom-js.js"></script>
</body>
</html>
I have now removed the php code from contact.php to thank-you.php.
Here is the code located in than-you.php:
<?php
$to_mail = "sukhy87#me.com";
$mail_sent = 0;
if(isset($_POST['submit'])){
echo "the form was submitted";
$name = trim(strip_tags($_POST['fullName']));
if($name == "")
$error = true;
$email = trim(strip_tags($_POST['email']));
if($email == "")
$error = true;
$phone = trim(strip_tags($_POST['tel']));
$message = trim(strip_tags($_POST['message']));
if($error != true){
$header = 'From: "Legal Active Website" <no-replylegalactive.co.uk>'."\r\n";
$subject = "New Enquiry";
$message = "New Contact message, received from: <br /> \n ";
$message .= "<b>Name</b> ".$name."<br /> \n";
$message .= "<b>Email</b> ".$email."<br /> \n";
$message .= "<b>Phone</b> ".$phone."<br /> \n";
$message .= "<b>message</b> ".$message."<br /> \n";
if(#mail($to_mail,$subject,$message,$header))
{
echo "mail sent";
$mail_sent = 1;
}
else echo "mail not sent";
} else {
echo 'validation error';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Legal Active - Contact Us </title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="description" content="Index">
<meta name="keywords" content="personal inury specialist, accident, accident claims, claim, personal injury, claim today,">
<meta name="author" content="Sukhvir Singh">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<!-- Animate.css -->
<link rel="stylesheet" type="text/css" href="../../css/animate.css-master/animate.min.css">
<!-- Favicon -->
<link rel='shortcut icon' href='favicon.png' type='image/x-icon'/>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<!-- Header Navbar -->
<nav class="navbar navbar-header-custom navbar-header-bg-custom">
<ul class="navbar-header-icon nav navbar-nav pull-md-left">
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="navbar-header-link__icon--lg fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-header-link hidden-sm-down" href="#">
<i class="navbar-header-link__icon--lg fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item hidden-md-up">
<h5 class="navbar-header-link nav-link navbar-header-link--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
<li class="nav-item hidden-sm-down">
<h5 class="navbar-header-link nav-link navbar-header-link--lg--span"> Have a Question? </h5>
<a class="nav-link navbar-header-link navbar-header-link--lg" href="tel:01618852353"> Call us NOW
<i class="navbar-header-link__icon--lg fa fa-phone" aria-hidden="true"> </i> 0161 885 2353
</a>
</li>
</ul>
</nav>
<!-- Navbar -->
<nav class="navbar navbar-custom bg-custom">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar4" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
<i class="navbar__icon fa fa-bars" aria-hidden="true"></i>
</button>
<div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar4">
<ul class="nav navbar-nav pull-xs-left col-xs-12">
<li class="nav-item active col-xs-12 col-md-2 offset-md-1">
<a class="nav-link" href="index.php"> HOME </a>
</li>
<li class="nav-item btn-group col-xs-12 col-md-3">
<div class="dropdown">
<button class="btn dropdown-toggle nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TYPES OF CLAIMS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="road-traffic-accident.html"> ROAD TRAFFIC ACCIDENTS </a>
<a class="dropdown-item" href="Slips-Trips-and-Falls.html"> SLIPS TRIPS & FALLS </a>
<a class="dropdown-item" href="accident-at-work.html"> ACCIDENT AT WORK <span class="sr-only">(current)</span> </a>
</div>
</div>
</li>
<li class="nav-item col-xs-12 col-md-3">
<a class="nav-link" href="work-with-us.html"> WORK WITH US </a>
</li>
<li class="nav-item col-xs-12 col-md-1">
<a class="nav-link" href="contact.php"> CONTACT </a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="https://twitter.com/search?src=typd&q=legal%20active%20ltd">
<i class="nav-link__icon fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item col-xs-12">
<a class="nav-link hidden-md-up" href="#">
<i class="nav-link__icon fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="submitMessage col-xs-12">
<h5 class="submitMessage__h5 h5"> THANK YOU </h5>
<p class="submitMessage__p p"> A member of our team will be in touch with you shortly </p>
<a class="submitMessage__link link" href="index.php"> Back to homepage </a>
</div>
</div>
</div>
<!-- Footer -->
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-footer">
<ul class="nav navbar-nav footer__nav">
<img class="footer__nav__logo col-xs-4 col-md-4 col-lg-3 pull-xs-right pull-md-left" src="../../assets/legal-active-logo-large.png" alt="Logo"/>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Legal Active</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Magnus House, 8 Ashfield Road, Cheadle, Cheshire, SK8 1BB </li>
<li class="footer__nav-item nav-item col-xs-12 col-md-5 pull-xs-right"> Registered in England & Wales - Company No. 123 4567</li>
<li class="footer__nav-item nav-item col-xs-12 col-md-12 col-lg-5 pull-xs-right"> All Rights Reserved © Legal Active </li>
</ul>
</nav>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="../../scss/bootstrap-4/js/tests/vendor/jquery.min.js"></script>
<script src="../../scss/bootstrap-4/js/tests/vendor/tether.min.js"></script>
<script src="../../scss/bootstrap-4/dist/js/bootstrap.min.js"></script>
<script src="../../js/custom-js.js"></script>
</body>
</html>