If you're not logged in and don't have the id, the header should include "Inloggen" en "Aanmelden", if one is logged in and has the id, it should show "Uitloggen" which means "Logout". I'm echoing the HTML code, but I also want to run a PHP if else statement in the HTML code.
Header.php:
<?php
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])){
<li>Inloggen </li>
<li>Aanmelden </li>
}
else{
<li>Uitloggen </li>
?>
</nav>
</div>
</header>
<div class="container">';
?>
Insert this code in your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../Campingmaasvallei/images/logocamping2.png">
<link rel="stylesheet" href="../Campingmaasvallei/css/reset.css">
<link rel="stylesheet" href="../Campingmaasvallei/css/style.css">
<title>Camping Maasvallei</title>
</head>
<body class="body-login">
<header>
</div>
<div class="container-header">
<img id="logo" src="../Campingmaasvallei/images/logocamping2.png">
<nav>
<li>Home</li>
<li>Omgeving</li>
<?php if (!isset($_SESSION['id'])): ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php else:?>
<li>Uitloggen </li>
<?php endif;?>
</nav>
</div>
</header>
<div class="container">'
Try this :
<?php if (!isset($_SESSION['id'])){ ?>
<li>Inloggen </li>
<li>Aanmelden </li>
<?php }else{ ?>
<li>Uitloggen </li>
<?php } ?>
Related
I created a header.php and footer.php to lessen code repetition. Now the problem i am having is that when i go in Inspect element I see that the head tag which includes the meta tags etc.. are being displayed twice.
I am using the include function in php to display the header.php and footer.php
How can I prevent it from being displayed more than once?
This is my Header.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">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>El Tabata</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header class="nav-down">
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">El Tabata</h1>
</div>
<div class="nav-ul nav-center ">
<ul >
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>
</header>
This is my Footer.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">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>El Tabata</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
<script src="https://kit.fontawesome.com/b3c12f2bf7.js" crossorigin="anonymous"></script>
</head>
<body>
<footer>
<div class=" container footer-dist">
<div class="footer-left">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div class="footer-center">
<h3>El Tabata</h3>
<p class="footer-links">
Home
|
About
|
People
|
Menu
|
Contact
|
Reservations
</p>
<p class="footer-names">© 2021 | Anthony Mifsud | Leon Zammit | Luke Portanier | CIS1054-SEM2-A-2021</p>
</div>
<div class="footer-right">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div>
</footer>
this behavior is normal, you have declared two different web pages, one in the header and one in the footer.
The browser removes the second doctype from the response to respect the W3C standards.
You can create a template.php page which contains the html structure of an HTML document (Doctype and meta tags) and include the header and footer files limited to the content of your body.
index.php or template.php
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<your meta balise>
</head>
<body>
<?php
include('header.php')
inlcude('footer.php')
?>
</body>
</html>
header.php
<header class="nav-down">
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">El Tabata</h1>
</div>
<div class="nav-ul nav-center ">
<ul >
<li style="--animation-order: 1;">Home</li>
<li style="--animation-order: 2;">About</li>
<li style="--animation-order: 3;">People</li>
<li style="--animation-order: 4;">Menu</li>
<li style="--animation-order: 5;">Contact</li>
<li style="--animation-order: 6;">Reservations</li>
</ul>
</div>
<div class="icon">
<img src="heart.svg" alt="favorites">
</div>
</nav>
</header>
footer.php
<footer>
<div class=" container footer-dist">
<div class="footer-left">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div class="footer-center">
<h3>El Tabata</h3>
<p class="footer-links">
Home
|
About
|
People
|
Menu
|
Contact
|
Reservations
</p>
<p class="footer-names">© 2021 | Anthony Mifsud | Leon Zammit | Luke Portanier | CIS1054-SEM2-A-2021</p>
</div>
<div class="footer-right">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div>
</footer>
Hope it was usefull to you
I'll start off with saying that I am brand new to PhP, but am trying to use it to set load my header from 1 file into all of my website pages. I have successfully accomplished this and with that have also been able to set a .active class to whichever page is currently active.
My question is, if there is anyway I can make the active page not reload when it is clicked in the navbar out of personal preference. I have so far accomplished this by just setting the href link to "#" but I can't really do that if I am loading the same header from every file. Is there some way else I can do this possibly with PhP in my header.php file? Please let me know, be kind, again I'm brand new, here is my code...
INDEX.PHP
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Stylesheets/header.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<?php $page = 'home'; include('header.php'); ?>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
APPLY.PHP
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Apply</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming, Apply, Application, Staff">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Stylesheets/default.css">
<link rel="stylesheet" href="Stylesheets/header.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<?php $page = 'apply'; include('header.php'); ?>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
HEADER.PHP
<nav id="header-nav" class="navbar-nav">
<div class="container grid-container">
<a class="<?php echo ($page == 'home') ? "active" : ""; ?> navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="<?php echo ($page == 'apply') ? "active" : ""; ?> navlink" href="./apply.php"><i class="fas fa-user"></i> Apply</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<a class="navlink" href="https://discord.gg/ZnN3f4P" target="_blank"><i class="fab fa-discord"></i> Discord</a>
<a class="navlink" href="https://www.youtube.com/channel/UCFvs3IZNgziCe0WARpJpYVw" target="_blank"><i class="fab fa-youtube"></i> YouTube</a>
</div>
</nav>
<img class="heading-banner mx-auto d-block" src="./Images/banner.png" alt="Infamous banner">
</header>
This way you can add many pages you want by using
array('page'=>'IDENTIFIER','title'=>'TITLE','link'=>'link','icon'=>'icon') separated by comma.
Header.php
<nav id="header-nav" class="navbar-nav">
<div class="container grid-container">
<?php
$pages=array(
array('page'=>'home','title'=>'Home','link'=>'./home.php','icon'=>'fas fa-home'),
array('page'=>'apply','title'=>'Apply','link'=>'./apply.php','icon'=>'fa-user'),
array('page'=>'other','title'=>'Other page','link'=>'./other_page.php','icon'=>'fa-user'),
array('page'=>'youtube','title'=>'Watch video','link'=>'https://www.youtube.com/channel/UCFvs3IZNgziCe0WARpJpYVw','icon'=>'fab fa-youtube','newtarget'=>1)
);
foreach($pages as $pg){
echo $pg['page']==$page?
'<a class="navlink active"><i class="'.$pg['icon'].'"></i> '.$pg['title'].'</a>':
'<a class="navlink" href="'.$pg['link'].'" '(.isset($pg['newtarget'])?' target="_blank"':'').'><i class="'.$pg['icon'].'"></i> '.$pg['title'].'</a>';
}
?>
</div>
</nav>
<img class="heading-banner mx-auto d-block" src="./Images/banner.png" alt="Infamous banner" />
</header>
If you want you can add a cursor style to navlink class, this way, even without a href your will have a nice cursor.
This question already has answers here:
PHP parse/syntax errors; and how to solve them
(20 answers)
Closed 3 years ago.
I've been working on an e-commerce app and I took out all the HTML in my index page and created a function called component() like this:
function component($productName,$productPrice,$productImage){
$element = "
<div class=\"col-md-3 col-sm-6 my-3 my-md-0\">
<form action=\"index.php\" method=\"POST\">
<div class=\"card shadow\">
<div>
<img src=\"$productImage\" alt=\"image1\" class=\"img-fluid card-img-top\">
</div>
<div class=\"card-body\">
<h5 class=\"card-title text-sm-center\">$productName</h5>
<h6 class=\"text-sm-center\">
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"fas fa-star\"></i>
<i class=\"far fa-star\"></i>
</h6>
<p class=\"card-text text-sm-center\">
Some Quick example text to build on the card
</p>
<h5 class=\"text-sm-center\">
<small><s class=\"text-secondary\">$519</s></small>
<span class=\"price\">$productPrice</span>
</h5>
<button class=\"btn btn-warning\" type=\"submit\" name=\"add\">Add to Cart<i class=\"fas fa-shopping-cart\"></i></button>
</div>
</div>
</form>
</div>
";
echo $element;
}
?>
Now, im trying to access the HTML content of component in my index.php like this:
<?php require "component.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart</title>
<link rel="stylesheet" href="./dist/css/all.min.css">
<link rel="stylesheet" href="./dist/css/style.css">
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!--<link rel="stylesheet" href="./dist/css/fa.5.11.2.css">-->
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<?php
component(productName:"Product 1", productPrice:599, productImage:"./upload/product1.png" );
?>
</div>
</div>
<script src=".dist/js/jquery.min.js"></script>
<script src=".dist/js/popper.min.js"></script>
<script src=".dist/js/bootstrap.min.js"></script>
</body>
</html>
And I am getting this error:
Error Message : Parse error: syntax error, unexpected ':', expecting ',' or ')' in C:\xampp\htdocs\shopping\index.php on line 24
Please, I need help to proceed.
Thanks
Use below mentioned HTML.
<?php require "component.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopping Cart</title>
<link rel="stylesheet" href="./dist/css/all.min.css">
<link rel="stylesheet" href="./dist/css/style.css">
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!--<link rel="stylesheet" href="./dist/css/fa.5.11.2.css">-->
</head>
<body>
<div class="container">
<div class="row text-center py-5">
<?php
component("Product 1", 599,"./upload/product1.png" );
?>
</div>
</div>
<script src=".dist/js/jquery.min.js"></script>
<script src=".dist/js/popper.min.js"></script>
<script src=".dist/js/bootstrap.min.js"></script>
</body>
</html>
You need to change just below mentioned calling function.
component("Product 1", 599,"./upload/product1.png" );
We set up our website and it displays fine in localhost but displays
this
when it's uploaded online. There are no errors in the console and the files are arranged fine. Honestly, I don't know where the problem is, I just assumed its within the code since everything else below include 'templates/header.php' is not displayed.
Here is a sample of my code for index.php
<?php
session_start();
include 'templates/header.php';
include 'library/announcements.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Resources for the Blind, Inc. Website 2017">
<meta name="author" content="Platinum Phenomena">
<title>Resources for the Blind, Inc.</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
</script>
<script>window.jQuery || document.write('<script src="js/minified/jquery-1.11.0.min.js"><\/script>')
</script>
try{
if( !file_exists("library/announcements.php") )
{ throw new Exception("Unable to include resources announcements"); }
else{ require_once("library/announcements.php"); }
}catch(Exception $e){
echo $e->getMessage();
exit;
}
?>
<header id="header" role="banner">
<div class="main-nav">
<div class="container">
<div class="header-top">
<div class="pull-right social-icons">
<img src="images/fb.png">
<img style="width:40px; height:40px;" src="images/yt.png">
<img src="images/ig.png">
<img src="images/twitter.png">
</div>
</div>
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<img class="img-responsive" src="images/logo.jpg" height="8" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">
Home
</li>
<li class="scroll">
Activities
</li>
<li class="scroll">
About Us
</li>
<li class="scroll">
Partners
</li>
<li class="scroll">
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
Please include files after the head section in your case and try like below given
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Resources for the Blind, Inc. Website 2017">
<meta name="author" content="Platinum Phenomena">
<title>Resources for the Blind, Inc.</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="script.js"></script>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
</script>
<script>window.jQuery || document.write('<script src="js/minified/jquery-1.11.0.min.js"><\/script>')
</script>
</head>
<body>
<?php
try{
if( !file_exists("templates/header.php") )
{ throw new Exception("Unable to include resources header"); }
else{ require_once("templates/header.php"); }
}catch(Exception $e){
echo $e->getMessage();
exit;
}
try{
if( !file_exists("library/announcements.php") )
{ throw new Exception("Unable to include resources announcements"); }
else{ require_once("library/announcements.php"); }
}catch(Exception $e){
echo $e->getMessage();
exit;
}
?>
</body>
</html>
I found out that it was a problem with connecting to the database. I forgot to check the db configurations. If someone else encounters this problem, please let me know. Thank you so much to everyone who tried to help! Much appreciated.
Website contains common elements such as header,navigation bar and footer. How should i re-write html pages so that static HTML elements common to my pages are sourced from the same PHP scripts? Can show me some examples?
Example of my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title>Home</title>
</head>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
</body>
</html>
Call this header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title>Home</title>
</head>
Call this footer.php
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
In your PHP pages:
<?php include_once 'header.php'; ?>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<?php include_once 'footer.php'; ?>
</body>
</html>
You can define an index.php file and include different parts different files like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="example" />
<meta name="keywords" content="HTML5 PHP" />
<meta name="author" content="Detonizer" />
<title><?php include 'title.php'; ?></title>
</head>
<body>
<nav>
<p class="menu">page1</p>
<p class="menu">page2</p>
<p class="menu">page3</p>
<p class="menu">page4</p>
<p class="menu">page5</p>
<p class="menu">page6</p>
</nav>
<section id="content">
<?php include 'content.php'; ?>
</section>
<footer class="footC" >
<p class="e1">Example1</p>
<p class="e2">Example2</p>
<p class="e3">Example3</p>
</footer>
</body>
</html>