I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>
Related
my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?
signin html:
{% extends "accounts/_base.html" %}
{% block title %}
Sign In
{% endblock %}
{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">Sign In</h2>
<div class="form-group">
<div class="fieldWrapper">
{{ form.username.errors }}
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password.label_tag }}
{{ form.password }}
</div>
</div>
<label for="signIn" class="sr-only">Click</label>
<button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>
</form>
<form class="form-signin" action="{% url 'signup' %}">
<button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}
base html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<!-- head -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
<!-- body -->
<div class="container" id="elem_cont">
{% if message is not none %}
<div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% block control %}
{% endblock %}
</div>
<div class="container" id="elem_disp">
{% block disp %}
{% endblock %}
</div>
<div class="container" id="elem_misc">
{% block misc %}
{% endblock %}
</div>
<!-- footer -->
<nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
<div class="container" id="elem_foot">
<footer class="navbar" id="footer">
<hr>
{% block botm_cont %}
{% endblock %}
<p>© 2019 madlogos</p>
</footer>
</div>
</nav>
</body>
</html>
This is a styling issue for css.
You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:
form.form-signin {
max-width: 64ch;
margin: auto;
}
64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.
margin: auto will automatically handle the distances between the form and its containing div.
Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.
I am working on a one page website, and try to disect each section to different html file, and now the base.html that contain css, js file don't want to load. Instead, it returns "Invalid block tag on line 21: 'static', expected 'endblock'. Did you forget to register or load this tag?" comment on some of the {% include "page.html" %}.
I've tried add {% load static %} {% load staticfiles %} on each {% include "page.html" %}, still don't help with the css, js from the base.html.
Any thoughts to solve this issue? Thank you in advance
Here are my codes:
Here is my base.html
<!DOCTYPE html>
{% load staticfiles %}
{% load fontawesome %}
{% load static %}
<html lang="en">
<head>
{% fontawesome_stylesheet %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Website</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'https://fonts.googleapis.com/css?family=Montserrat:400,700' %}" rel="stylesheet"
type="text/css">
<link href='{% static "https://fonts.googleapis.com/css?family=Kaushan+Script" %}' rel='stylesheet' type='text/css'>
<link href='{% static "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" %}'
rel='stylesheet' type='text/css'>
<link href='{% static "https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" %}' rel='stylesheet'
type='text/css'>
<!-- Custom styles for this template -->
<link href="{% static 'css/agency.min.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}
{% endblock %}
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Plugin JavaScript -->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Contact form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.js'%}"></script>
<script src="{% static 'js/contact_me.js' %}"></script>
<!-- Custom scripts for this template -->
<script src="{% static 'js/agency.min.js' %}"></script>
</body>
</html>
and here is one of the page I am going to use for djago view.
{% extends '00_base.html' %}
{% block content %}
{% include "001_navigation.html" %}
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome Text!</div>
<div class="intro-heading text-uppercase">Sub Welcome Text</div>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
</div>
</div>
</header>
{% include "02_services.html" %}
{% include "03_portfolio.html" %}
{% include "04_about.html" %}
{% include "05_team.html" %}
{% include "06_clients.html" %}
{% include "07_contact.html" %}
{% include "08_footer.html" %}
{% include "09_modals.html" %}
{% endblock %}
Here is one of the "include page.html". It returns "Invalid block tag on {% static 'img/portfolio/01-thumbnail.jpg' %}: 'static', expected 'endblock'. Did you forget to register or load this tag?"
{% extends '00_base.html' %}
{% block content %}
<!-- Portfolio Grid -->
<section class="bg-light" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolio1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="{% static 'img/portfolio/01-thumbnail.jpg' %}" alt="">
</a>
<div class="portfolio-caption">
<h4>Item</h4>
<p class="text-muted">Item text</p>
</div>
</div>
{%endblock%}
Templates in settings:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['web/web2/templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'templates', 'web2', 'static', 'public'),'/www/static/'
)
STATIC_ROOT = os.path.join(BASE_DIR, 'public', 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'public', 'media')
in last html file you forgot to add {% endblock %}.
{% block content %}
.
. Html contents
.
{% endblock %}
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<i class="icon-angle-down infinite animated fadeInDown"></i>
</div>
</section>
You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
before extending i have checked all connections and file paths but after extending my child codes vanises
base.html
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
</div>
</body>
</html>
skills.html
{% extends 'app/base.html' %}
{% block content %}
<p>skills</p>
<p>skills</p>
<p>skills</p>
{% endblock %}
Your base.html file should still include a block section
<!DOCTYPE html>
{% load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}" />
<title>allgood.com</title>
<link href="{% static "/css/base.css" %}" rel="stylesheet"
type="text/css"/>
</head>
<body>
<div class="header">
<span class="name">allgood</span>
<button class="btn1 ">Resume</button>
<button class="btn2 ">resume</button>
<span class="profileimage"><img src="{%static '/images/profile1.png'
%}" style="width:40px;height:40px"></span>
{% block content %}
{% endblock %}
</div>
</body>
</html>
So i'm making a blog in Jekyll based on a start bootstrap theme (also following a course on Udemy) I've made the post layout etc, and everything works fine until i add a second post that messes up everything.
Post layout with only one post (remove the /remove-this/second-image/ to get the first and second link to see the layout with one post, left link, and the layout with two posts, right link sry I didn't have sufficient reputation ^^)
I would like to know how to fix this problem
Thanks for helping
here is the code used for the post layout (I also made a GitHub repository):
{% include post_header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
includes:
post_header.html:
{% for post in site.posts %}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title> {{ post.title }} </title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
{% include nav.html %}
<!-- Post Header -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ post.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ post.title }}</h1>
<h2 class="subheading">{{ post.description }}</h2>
<span class="meta">Publié par {{ post.author }} on {{ post.date | date_to_string }}</span>
</div>
</div>
</div>
</div>
</header>
{% endfor %}
footer.html:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="https://twitter.com/Bonny_AG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/BonnyAG" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright ©BonnyAG 2015, All content made by BonnyAG for this blog, please ask permission before using the content in other websites.</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="{{ site.url }}/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{{ site.url }}/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ site.url }}/js/clean-blog.min.js"></script>
</body>
</html>
So after digging in a little deeper i found that what caused the error was that i had a header for static pages and one for blog posts and that was causing the error. So here is the code fix
Post layout:
{% include header.html %}
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
</div>
</div>
</div>
</article>
{% include footer.html %}
header.html:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>{{ page.title }}</title>
<!-- Bootstrap Core CSS -->
<link href="{{ site.url }}/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ site.url }}/css/clean-blog.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% include nav.html %}
<body>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{{ site.url }}/img/{{ page.coverImg }}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if page.author %}
<div class="post-heading">
<h1>{{ page.title }}</h1>
<h2 class="subheading">{{ page.description }}</h2>
<span class="meta">Publié par {{ page.author }} on {{ page.date | date_to_string }}</span>
</div>
{% else %}
<div class="site-heading">
<h1>{{ page.header }}</h1>
<hr class="small">
<span class="subheading">{{ page.description }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</header>