I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
I am caught in problem due to relative position
My Other content get pushed under the showcase.
I am giving you full code please tell me what I am doing wrong.
I have given the link to google drive which cotain screenshot.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!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>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
Screenshot
https://drive.google.com/file/d/1hn4-dyx0h8BrY42zAjL4801yCZ_0YYnB/view?usp=drivesdk
To prevent overlapping of showcase on container, add position: relative; to .container.
And if you want conatiner not to overlap with .relative, then just just add height: 100vh; in .relative.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
position: relative;
background: red;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
position: relative;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav>a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0, 0, 0, 0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</div>
was such a result needed?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
a {
color: #000;
text-decoration: none;
}
.container {
max-width: 1200px;
width: 80%;
margin: auto;
}
.d-4 {
font-size: 2.6rem;
text-align: center;
font-weight: 600;
}
.lead {
font-size: 1.8rem;
font-weight: 300;
}
.relative {
display: flex; /* added */
height: 100vh; /* added */
flex-direction: column; /* added */
position: relative;
top: 0;
left: 0;
}
nav {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
font-size: 17px;
font-weight: bold;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 0;
}
nav > a {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 28px;
padding: 0 20px;
}
nav ul a {
padding: 15px;
margin: 0 5px;
color: #fff;
border-radius: 4px;
}
nav ul a:hover {
background: rgba(0,0,0,0.6);
}
.showcase {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189_1280.jpg') no-repeat center center/cover,rgba(0,0,0,0.5);
background-blend-mode: darken;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<!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>Website | Getting Started</title>
<!-- My CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="relative">
<nav>
<img height="70" src="img/logo.png" alt="Logo"> Title
<ul>
Home
Login
SignUp
Dashboard
</ul>
</nav>
<div class="showcase">
<h1 class="d-4">Welcome to my Website.</h1>
<p class="lead">
Way of heaven is here.
</p>
</div>
</div>
<div class="container">
<h1 class="text-center">Contact Us</h1>
<form id="footer" class="control">
<input class="input" type="text" id="name" placeholder="Enter your Name">
<input class="input" type="email" id="email" placeholder="Enter your E-mail">
<input class="input" type="number" id="mob" placeholder="Enter your phone No.">
<input class="input" type="textr" id="subject" placeholder="Enter your subject">
<textarea class="textarea" placeholder="Enter your message"></textarea>
</form>
</div>
</body>
</html>
You need to add position:absolute to your .container. The position property in CSS works like this:
the property-value couple position:relative tells your layout which element shall be used as a reference for its child elements which contain the property-value pair position:absolute, for their positioning.
Then, you can use the properties top, right, bottom, and left to specify the distancing of the child HTML element having the position: absolute pair from the edges of its first parent element (walking upwards in the HTML doc from the child) which has the position:relative pair.
In your CSS code, you simply set your parent element to position:relative, which does not change anything in your layout; it just tells your page that any child of the element X having position:relative, which has position:absolute must use that X for the relative positioning using the four properties top, right, bottom, and left. And yeah, obviously, as soon as you set a HTML child of a parent having position:relative to position:absolute, it will be placed above it.
I have two html pages one for navbar and other for contact form, when i try to join them both i get distorted single page. Image will be included below. I tried making section but its not helping out:/
This is for a django project so codes might b slightly different. Thanks in advance :)
html of navbar
<nav>
<div class="logo">
<a class="h4" href="{% url 'home' %}">Nihaal Nz</a>
</div>
<ul class="nav-links">
<li>About</li>
<li>Cool Cloud</li>
<li>Contact</li>
</ul>
</nav>
html of contact page
<div class="container">
<form class="shake" action="{% url 'contact' %}" role="form" method="post" id="contactForm"
name="contact-form" data-toggle="validator">
{% csrf_token %}
<h2>Let me know what you felt.</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="name" required="required">
<span class="text">First Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="email" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="subject" required="required">
<span class="text">Subject</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea name="message" required data-error="Write your message"></textarea>
<span class="text">Type your message here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
combined html code
{% load static %}
<link rel="stylesheet" href="{% static "portofolio/css/contacts.css" %}">
{% block content %}
<body>
<section>
<nav>
<div class="logo">
<a class="h4" href="{% url 'home' %}">Nihaal Nz</a>
</div>
<ul class="nav-links">
<li>About</li>
<li>Cool Cloud</li>
<li>Contact</li>
</ul>
</nav>
</section>
<div class="container">
<form class="shake" action="{% url 'contact' %}" role="form" method="post" id="contactForm"
name="contact-form" data-toggle="validator">
{% csrf_token %}
<h2>Let me know what you felt.</h2>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="name" required="required">
<span class="text">First Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox">
<input type="text" name="email" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
<div class="col">
<div class="inputBox">
<input type="text" name="subject" required="required">
<span class="text">Subject</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputBox textarea">
<textarea name="message" required data-error="Write your message"></textarea>
<span class="text">Type your message here...</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="submit" value="Send">
</div>
</div>
</div>
</body>
{% endblock %}
css of navbar
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: rgba(93, 73, 84,0.5);
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(226,226,226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
text-decoration: none;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226,226,226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.h4{
text-decoration: none;
color: rgb(226,226,226)
}
css of contact page
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #051115;
font-family: 'Poppins', sans-serif;
}
.container {
width: 80%;
padding: 20px;
}
.container h2{
width: 100%;
color: #45f3ff;
font-size: 36px;
text-align: center;
margin-bottom: 10px;
}
.container .row100{
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.container .row100 .col {
position: relative;
width: 100%;
padding: 0 10px;
margin: 30px 0 10px;
transition: 0.5s;
}
.container .row100 .inputBox{
position: relative;
width: 100%;
height: 40px;
color: #45f3ff;
}
.container .row100 .inputBox input,
.container .row100 .inputBox.textarea textarea{
position: absolute;
width: 100%;
height: 100%;
background: transparent;
box-shadow: none;
border: none;
outline: none;
font-size: 18px;
padding: 0 10px;
z-index: 1;
color: #000000;
}
.container .row100 .inputBox .text{
position: absolute;
top: 0;
left: 0;
line-height: 40px;
font-size: 18px;
padding: 0 10px;
display: block;
transition: 0.5s;
pointer-events: none;
}
.container .row100 .inputBox input:focus + .text,
.container .row100 .inputBox input:valid + .text {
top: -35px;
left: -10px;
}
.container .row100 .inputBox .line{
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 2px;
background: #45f3ff;
transition: 0.5s;
border-radius: 2px;
pointer-events: none;
}
.container .row100 .inputBox input:focus ~ .line,
.container .row100 .inputBox input:valid ~ .line{
height: 100%;
}
.container .row100 .inputBox.textarea{
position: relative;
width: 100%;
height: 100px;
padding: 10px 0;
}
.container .row100 .inputBox.textarea textarea{
height: 100%;
resize: none;
}
.container .row100 .inputBox textarea:focus + .text,
.container .row100 .inputBox textarea:valid + .text {
top: -35px;
left: -10px;
}
.container .row100 .inputBox textarea:focus ~ .line,
.container .row100 .inputBox textarea:valid ~ .line{
height: 100%;
}
input[type="submit"]{
border: none;
padding: 7px 35px;
cursor: pointer;
outline: none;
background: #45f3ff;
color: #000000;
font-size: 18px;
border-radius: 2px;
}
The display:flex on the body CSS is causing this, change it to block (or something else) and it should line up as you want:
body {
display: block;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #051115;
font-family: 'Poppins', sans-serif;
}
I have this simple html page, with css it is working good except when I scroll the page down, the input form is above the header. I would like the header to always be above the content When I scroll.
Can anyone help ?
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
When an element has position: absolute or position: fixed, it happens that it can overlap with other elements. When it happens, the container that will be rendered above will be the one that has the higher z-index value. If the z-index isn't set, then it's the lowest possible.
For this reason, you can just add:
z-index: 1;
to your sticky class:
.sticky {
position: sticky;
top: 0;
z-index: 1;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
.active {
background-color: rgb(43, 137, 226);
}
#footer-id {
background-color: blue;
}
#MyForm .contact-form {
background: #fff;
margin-top: 10%;
margin-bottom: 5%;
width: 70%;
}
#MyForm .fixed-header {
width: 100%;
margin: 0 auto;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 999;
}
#MyForm .contact-form .form-control {
border-radius: 1rem;
}
#MyForm .contact-image {
text-align: center;
}
#MyForm .contact-image img {
border-radius: 6rem;
width: 11%;
margin-top: -3%;
transform: rotate(29deg);
}
#MyForm .contact-form form {
padding: 14%;
}
#MyForm .contact-form form .row {
margin-bottom: -7%;
}
#MyForm .contact-form h3 {
margin-bottom: 8%;
/* margin-top: -10%; */
text-align: center;
color: #0062cc;
}
#MyForm .contact-form .btnContact {
width: 50%;
border: none;
border-radius: 1rem;
padding: 1.5%;
background: #dc3545;
font-weight: 600;
color: #fff;
cursor: pointer;
}
#MyForm .btnContactSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
color: #fff;
background-color: #0062cc;
border: none;
cursor: pointer;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input {
position: relative;
height: 45px;
border-radius: 30px;
min-width: 500px;
box-shadow: none;
/* border: 1px solid #eaeaea; */
padding-left: 100px;
}
.input-group label {
position: absolute;
left: 0;
height: 48px;
background: #55ccf2;
padding: 0px 25px;
border-radius: 30px;
line-height: 48px;
font-size: 18px;
color: #fff;
top: 0;
width: 100px;
font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<span id="i">
<ul class="sticky">
<li>
<a
href="#"
>Home</a
>
</li>
<li>
<a
href="#news"
>News</a
>
</li>
<li>
<a
href="#contact"
>Contact</a
>
</li>
<li>
<a
href="#about"
>About</a
>
</li>
<li>
<a
href="#test"
>Test</a
>
</li>
<ul class="nav navbar-nav pull-right">
<li class="nav">Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
Target
</li>
</ul>
</ul>
</span>
<div #con class="fixed-header">
<br />
<br />
<!-- <div class="input-group">
<input type="text">
<label>Some Text</label>
</div> -->
<div id="MyForm">
<div class="container contact-form">
<div class="contact-image">
<img src="assets/rocket_contact.png" alt="rocket_contact" />
</div>
<form
[formGroup]="productForm"
(ngSubmit)="sendMail(productForm.value)"
>
<h3>Merci de nous laisser un message</h3>
<!-- <div class="row"> -->
<div class="col-md-12">
<div class="form-group" id="your_name">
<input
formControlName="name"
type="text"
name="txtName"
class="form-control"
placeholder="Your Name *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="email"
type="text"
name="txtEmail"
class="form-control"
placeholder="Your Email *"
value=""
/>
</div>
<div class="form-group">
<input
formControlName="number"
type="text"
name="txtPhone"
class="form-control"
placeholder="Your Phone Number *"
value=""
/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
formControlName="message"
name="txtMsg"
class="form-control"
placeholder="Your Message *"
style="width: 100%; height: 150px;"
></textarea>
</div>
<div class="form-group">
<input
type="submit"
name="btnSubmit"
class="btnContact"
value="Send Message"
/>
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</body>
</html>
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>