I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>
yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)
Related
Hello I have a project for my studies which is to display data on a dashboard that will be more or less modifiable by the user according to his needs.
I'm trying to open a modal window but it doesn't work and i can't figure out where my mistake came from.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelector(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
Adding to the earlier answer, the modal window doesn't close on clicking the close button. It only closes by clicking outside of it. This should solve it all: remove the modal-trigger class in the overlay class. It should be <div class="overlay"> not <div class="overlay modal-trigger"> and for demonstration, I changed the background colour
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: purple;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#" class="modal-trigger">
<i class='bx bx-customize'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
</body>
</html>
It should be working now, remember that querySelector() only grab the first match, you should use querySelectorAll() method instead, that is iterable and grabs all elements that match.
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
btn = body.querySelector("#btn");
btn.addEventListener("click", () => {
sidebar.classList.toggle("active");
})
const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))
function toggleModal() {
modalContainer.classList.toggle("active")
}
body {
height: 100vh;
background: var(--body-color);
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
background: var(--primary-color);
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px
}
.sidebar .logo_content .logo {
color: #FFF;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #FFF;
top: 6px;
left: 50%;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar li {
position: relative;
height: 50px;
width: 100%;
margin: 0 0px;
list-style: none;
line-height: 50px;
}
.sidebar li a {
color: #FFF;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar li a:hover {
color: #11101d;
background: #FFF;
}
.sidebar li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .menu-bar {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home {
position: relative;
height: 100vh;
left: 78px;
width: calc(100% - 78px);
background: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.active~.home {
left: 240px;
width: calc(100% - 78px);
}
.modal-container {
display: none;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
}
.modal-container.active {
display: flex;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #333333d3;
}
.modal {
width: 95%;
border-radius: 5px;
max-width: 500px;
min-width: 300px;
padding: 30px;
background: #FFF;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
padding: 8px 10px;
border: none;
border-radius: 5px;
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: #ff365e;
color: #FFF;
}
.modal h1 {
margin-top: 0px;
font-family: Montserrat, sans-serif;
font-weight: 500;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bx1-c-plus-plus'></i>
<div class="logo_name">SailVision</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="menu-bar">
<ul class="dash_list">
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°1</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-windows'></i>
<span class="links_name">Dashboard n°2</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-plus'></i>
<span class="links_name">Ajouter</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-customize modal-trigger'></i>
<span class="links_name">Template</span>
</a>
</li>
</ul>
<div class="bottom_content">
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Paramètre</span>
</a>
</li>
</div>
</div>
</div>
<div class="home">
<div class="template">Template n°1</div>
</div>
<div class="modal-container">
<div class="overlay modal-trigger">
<div class="modal">
<button class="close-modal modal-trigger">X</button>
<h1>Choix des templates</h1>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
</body>
I have a problem when it comes to making a transition for a design that I am taking as a basis for a project.
The problem is that, when I press the register button, it should show the registration section by means of a scroll to the left and it does not do so.
I want to know how I could fix the problem and know if it is any error in the id .
const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active.log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active.sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active.overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active.overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.container.right-panel-active.overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.container.right-panel-active.overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>
const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.right-panel-active .log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.right-panel-active .sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.right-panel-active .overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.right-panel-active .overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.right-panel-active .overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>
I edited in CSS.
I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.
Try width: 100vw; in the body element(or the element that have background color)
I have created a simple hardcoded popup with an unstyled Mailchimp form. But when I deploy it to a WordPress webpage through the "Insert Headers and Footers" plugin it does not work. When I test the code on an online HTML editor, then it works. I am trying to find out what is the problem, I presume that there is somewhere on the server-side something that is blocking the link to be clicked.
code for the popup:
<script>
var element = document.getElementById("wrapper");
var t=setTimeout(openPopUp,3000);
function openPopUp() {
element = document.getElementById("wrapper");
element.style.visibility = "visible";
element.style.opacity = "1";
}
/* Get all elements with class="close" */
function zatvori() {
var x = document.getElementById("wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<!DOCTYPE html>
<html lang="de-CH">
<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>Newsletter XXX</title>
<style>
* {
box-sizing: border-box;
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
line-height: 1.2;
}
#wrapper {
position: relative;
height: 950px;
max-width: 100%;
overflow: hidden;
background-size: cover;
background-position: right;
background-repeat: no-repeat;
display: block;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 430px;
height: 950px;
opacity: 0.5;
-webkit-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
-moz-box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
box-shadow: 5px 0px 25px 0px rgba(255,255,255,1);
}
.content {
position: absolute;
width: 435px;
height: auto;
padding: 28px 25px;
background-color: #82BB28;
z-index: 1;
}
/* Style the close button (span) */
.close {
cursor: pointer;
color:white;
float: right;
position: absolute;
top: 5%;
right: 2%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: red;}
div .text-1 p {
text-transform: uppercase;
font-weight: normal;
font-size: 18px;
margin: 0;
line-height: 1.1;
text-transform: uppercase;
color: #000;
}
.text-spacing {
letter-spacing: 1px;
}
.text-2 p {
margin: 40px 0 30px 0;
text-transform: uppercase;
font-size: 19px;
font-weight: bold;
letter-spacing: 1px;
}
.text-3 {
font-size: 12px;
color: #A1A199;
}
.email-btn {
display: flex;
justify-content: space-between;
}
/* Full-width input fields */
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Set a style for button */
.button-form {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.button-form:hover {
opacity:1;
}
#ad-email {
height: 36px;
width: 65%;
padding: 0px 14px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 3px;
font-size: 12px;
color: #332c2c;
}
/*placeholder*/
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 10px;
color: #ababab;
}
::-moz-placeholder {
/* Firefox 19+ */
font-size: 10px;
color: #ababab;
}
:-ms-input-placeholder {
/* IE 10+ */
font-size: 10px;
color: #ababab;
}
:-moz-placeholder {
/* Firefox 18- */
font-size: 10px;
color: #ababab;
}
#send {
width: 29%;
height: 36px;
background-color: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight: bold;
font-size: 10px;
color: #000000;
cursor: pointer;
transition: all 0.3s;
}
#send:hover {
background-color: #332c2c;
color: #fff;
}
.accept {
position: relative;
margin: 14px 0 35px 0;
}
#check {
position: absolute;
top: 0;
left:0;
opacity: 0;
}
.accept label {
display: flex;
cursor: pointer;
font-size: 10px;
line-height: 12px;
}
.checkbox-box {
display: inline-block;
width: 12px;
height: 12px;
background-color: #fff;
border: 1px solid #332c2c;
}
#check:checked+label>.checkbox-box {
background-color: #332c2c;
}
.checkbox-label {
margin-left: 5px;
width: calc(100% - 18px);
line-height: 14px;
}
.checkbox-label a {
color: #000;
display: block;
}
.profit-1 {
font-size: 20px;
line-height: 25px;
}
ul.benefits {
column-count: 2;
margin-left: 15px;
padding: 0;
}
li {
width: 95%;
font-size: 10px;
line-height: 14px;
}
#media all and (max-width: 434px) {
.content {
width: 100%;
}
}
#media all and (max-width: 387px) {
.text-1 p, .text-2 p {
font-size: 20px;
}
}
#media all and (max-width: 379px) {
.content {
padding: 20px;
}
.text-2 p {
margin: 20px 0 30px 0;
}
#inputs {
position: relative;
padding-bottom: 15px;
}
#ad-email {
width: 100%;
}
#send {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.checkbox-label a {
display: inline;
}
.profit {
margin-top: 20px;
}
ul.benefits {
column-count: 1;
}
li {
width: 100%;
}
}
#media all and (max-width: 324px) {
.profit-1 {
font-size: 16px;
line-height: 20px;
}
.text-1 p {
text-align: center;
}
.text-2 p {
margin: 15px 0 20px 0;
text-align: center;
}
#send {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<!-- width - 655 x height -450-->
<div id="wrapper">
<div id="mc_embed_signup">
<form action="https://ozg.us3.list-manage.com/subscribe/post?u=da98377a6d05e2f01558d3e04&id=67aaab10f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mask"></div>
<div class="content">
<div class="text-1">
<p>OZG - DER SPEZIALIST FÜR KOMPLETTAUSSTATTUNG IM<span class="close" onclick="zatvori()">X</span></p>
<p class="text-spacing"> GESUNDHEITSWESEN</p>
</div>
<div class="text-2">
<p>Haben Sie eine Anfrage oder möchten einen persönlichen Beratungstermin buchen?</p>
</div>
<!--
<div id="inputs">
<div class="email-btn">
<input type="email" name="#" placeholder="Adres e-mail" id="ad-email" required />
<input type="submit" name="#" id="send" value="ZAPISUJĘ →">
</div>
</div>
-->
<!--New code-->
<div id="mc_embed_signup_scroll">
<div class="indicates-required"><span class="asterisk">*</span>zeigt erforderlich an</div>
<div class="mc-field-group email-btn text-3">
<input type="email" value="" name="EMAIL" placeholder="Email Address *" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="FNAME" placeholder="Name" class="" id="mce-FNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="LNAME" placeholder="Vorname" class="" id="mce-LNAME">
</div>
<div class="mc-field-group text-3">
<input type="text" value="" name="UNTERNEHME" placeholder="Unternehmen" class="" id="mce-UNTERNEHME">
</div>
<div class="mc-field-group">
<textarea rows="4" cols="50" name="NACHRICHT" class="text-3" form="usrform" id="mce-NACHRICHT" placeholder="Nachricht">Nachricht
</textarea>
</div>
<div class="accept">
<input type="checkbox" name="#" value="true" id="check" required>
<label for="check"><span class="checkbox-box"></span><span class="checkbox-label">Ja, ich möchte aktuelle News und Aktionen erhalten
</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da98377a6d05e2f01558d3e04_67aaab10f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button-form"></div>
</div>
</div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</body>
</html>
So the endpoint does not go to Mailchimp, instead goes to wp-admin/admin-ajax.php
Any help is much appreciated.
Ive added some flip animations (javascirpt) to my grid of images. This has required me to add some extra css to style up the "back" div. The grid of images is now sitting behind the div.instagram element and in front of the footer element. When in responds down all of the divs layer on top of each other.
$(document).ready(function() {
$(".success").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#wanttoplay").hide();
$(".success").show();
});
$(".successcollab").hide();
$("form").submit(function(e) {
e.preventDefault();
$("#collaborate").hide();
$(".successcollab").show();
});
$(document).on("click", ".flip-container", function() {
$(this).toggleClass('hover');
});
});
#font-face {
font-family: Geomanist-Regular;
src: url('fonts/Geomanist-Regular.otf');
}
#font-face {
font-family: Geomanist-Bold;
src: url('fonts/Geomanist-Bold.otf');
}
#header {
background-color: #000;
margin-bottom: 70px;
}
#header a {
color: #fff;
transition: color 0.5s;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
#header a span {
color: #ffffff;
border-bottom: 2px solid;
padding-bottom: 10px;
border-color: transparent;
transition: border-bottom 0.5s;
}
#header a span:hover {
color: #7ed321;
border-color: #7ed321;
}
#header .selected a span {
color: #7ED321;
}
#header img {
width: 40px;
margin-right: 10px;
display: inline-block;
vertical-align: top;
margin-top: -15px;
}
#header li {
margin-left: 30px;
font-size: 20px;
}
.navbar {
padding-top: 25px;
padding-bottom: 20px;
}
.navbar-header a {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.navbar-brand {
font-size: 30px;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
border-bottom: none;
}
.navbar-inverse {
background-color: #000000;
}
.bottom {
padding-bottom: 20px;
}
.homepage-main {
min-height: 570px;
background-image: url('/images/mainimage.jpg');
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.vertical-text-main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
}
.wheredoweplay {
padding-top: 30px;
padding-bottom: 20px;
}
.wanttocollaborate {
padding-top: 30px;
}
.wanttoplay {
padding-top: 30px;
padding-bottom: 20px;
}
.instagram {
padding-top: 20px;
padding-bottom: 40px;
}
.instagram h2 {
padding-bottom: 20px;
}
.container2 {
position: relative;
filter: grayscale(0%);
transition: filter 1s;
}
.container2:hover {
filter: grayscale(100%);
}
.center {
position: absolute;
left: 0;
top: 88%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
.center:hover {
cursor: pointer;
color: #7ED321;
}
h3.centersmall {
position: absolute;
left: 0;
top: 76%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
}
h3.centersmall:hover {
cursor: pointer;
color: #7ED321;
}
img.playerpics {
width: 100%;
height: auto;
margin-bottom: 30px;
}
.alextext {
background-color: #000000;
margin-bottom: 30px;
color: #ffffff;
text-align: center;
padding-top: 30%;
padding-bottom: 23.5%;
padding-left: 30px;
padding-right: 30px;
}
.readmore {
cursor: pointer;
}
img.theclubpics {
margin-top: 20px;
}
div.vertical-container {
height: 570px;
position: relative;
}
div.vertical-text-para {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
}
form.formpadding {
padding-top: 20px;
}
.formmaxwidth input {
max-width: 400px;
display: inline-block;
}
textarea.form-control {
height: auto;
color: #000;
display: inline-block;
max-width: 400px;
border-color: #eee;
border-radius: 0px;
padding-top: 15px;
padding-left: 20px;
padding-bottom: 15px;
}
.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
ul.navtheclub li {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 18px;
display: inline-block;
padding-right: 40px;
padding-top: 40px;
}
.breadcrumb .active {
color: #000000;
}
.textcenter {
text-align: center;
}
.signoff p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
}
.caption p {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
font-weight: 400;
color: #999;
}
ol.breadcrumb {
background-color: #ffffff;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 13px;
padding-left: 0px;
}
h1 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 50px;
}
h2 {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 32px;
padding-top: 20px;
}
body {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
padding-top: 70px;
color: #000;
}
p {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
font-size: 18px;
line-height: 28px;
}
.smalltext {
font-size: 11px;
}
a.link {
color: #CBCBCB;
font-family: 'Geomanist-Bold', helvetica, sans-serif;
transition: color 0.5s;
border-bottom: 2px solid;
border-color: transparent;
transition: border-bottom 0.5s;
}
a.link:hover {
color: #7ED321;
text-decoration: none;
border-color: #7ed321;
}
button.enterDetails {
font-family: 'Geomanist-Bold', helvetica, sans-serif;
font-size: 16px;
border-radius: 0px;
background-color: #7ED321;
vertical-align: middle;
border: 0px;
min-width: 190px;
height: 48px;
transition: background-color 0.5s;
}
button.enterDetails:hover {
background-color: #7DC42E;
}
button.enterDetails:focus {
outline: 0;
}
button.enterDetails img {
padding-left: 3px;
transform: translate(0px, 0);
transition: all 0.5s;
}
button.enterDetails:hover img {
transform: translate(10px, 0);
}
.form-group input {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
textarea {
font-family: 'Geomanist-Regular', helvetica, sans-serif;
border: 1px solid #eee;
color: #000;
height: 48px;
padding: 0 20px;
min-width: 240px;
border-radius: 0px;
}
input.form-control:focus {
border-color: #7DC42E;
box-shadow: none;
}
input#formGroupExampleInput {
padding-bottom: 48px;
}
.btn-secondary {
padding-left: 10px;
}
.btn-secondary img {
padding-left: 5px;
cursor: pointer;
transform: translate(0px, 0);
transition: all 0.5s;
}
.btn-secondary:hover img {
transform: translate(10px, 0);
}
.btn-secondary a {
color: #000000;
border-bottom: none;
font-size: 16px;
transition: color 0.5s;
text-decoration: none;
}
.btn-secondary a:hover {
color: #7DC42E;
}
.success {
padding-top: 60px;
padding-bottom: 60px;
}
.successcollab {
padding-top: 60px;
padding-bottom: 60px;
}
.left-image {
min-height: 570px;
background-image: url('../images/nextmatch_image.jpg');
background-repeat: no-repeat;
padding-bottom: 40px;
}
.right-image {
min-height: 570px;
background-image: url('../images/theplayers_image.jpg');
background-repeat: no-repeat;
margin-bottom: 40px;
}
#homepage-title {
color: #ffffff;
}
p.shaded {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 400px;
padding-right: 40px;
}
p#second-para {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 450px;
padding-right: 40px;
}
h2#white-text {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 410px;
padding-right: 40px;
}
.vertical-text-main.white {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -25%);
color: #ffffff;
text-align: center;
bottom: -350px;
}
.vertical-text-para h2 {
margin-top: 0px;
}
a.homepage-top-link-white {
color: #ffffff;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
top: 500px;
padding-right: 40px;
}
a.homepage-top-link {
color: #ffffff;
}
.white-margin {
margin-left: 0px;
}
#formGroupExampleInput {
min-height: 100px;
}
#footer {
background-color: #000000;
color: #ffffff;
font-family: 'Geomanist-Regular', helvetica, sans-serif;
margin: 0px;
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#footer p {
font-size: 13px;
}
.dividers {
padding-top: 10px;
}
#footer img {
padding-right: 15px;
padding-left: 15px;
color: #ffffff;
opacity: 1;
transition: opacity 0.5s;
}
#footer img:hover {
opacity: 0.5;
}
.right {
float: right;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 360px;
height: 371px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
#media (max-width: 1199px) {
.back {
display: block;
max-width: 100%;
height: 300px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
}
}
#media (max-width: 991px) {
#header li {
margin-left: 0px;
font-size: 18px;
}
.back {
display: block;
max-width: 100%;
height: 227px;
padding: 50px 20px 0px 20px;
box-sizing: border-box;
font-size: 18px;
}
.center {
top: 84%;
}
h3.centersmall {
position: absolute;
left: 0;
top: 69%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
transition: color 1s;
padding-top: -10px;
}
p.playerstats {
font-size: 16px;
line-height: 24px;
}
}
#media (max-width: 767px) {
.center {
top: 91%;
font-size: 24px;
}
h3.centersmall {
position: absolute;
left: 0;
top: 82%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 24px;
transition: color 1s;
padding-top: -10px;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
width: 100%;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 737px;
height: 600px;
margin-bottom: 30px;
padding: 100px 40px 0px 40px;
text-align: center;
box-sizing: border-box;
}
p.playerstats {
font-size: 18px;
line-height: 32px;
padding-right: 40px;
padding-left: 40px;
}
}
#media (max-width: 400px) {
.left-image {
min-height: 570px;
background-image: url(../images/nextmatch_image.jpg);
background-repeat: no-repeat;
padding-bottom: 40px;
margin-right: 15px;
}
.right-image {
min-height: 570px;
background-image: url(../images/theplayers_image.jpg);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-right: 15px;
margin-top: 40px;
}
.homepage-main {
min-height: 400px;
background-image: url(/images/mainimage.jpg);
background-repeat: no-repeat;
border-radius: 0px;
margin-bottom: 40px;
}
.form-club {
margin-bottom: 10px;
}
.form-group {
margin-bottom: 0px;
}
textarea.form-control {
margin-bottom: 10px;
}
button.enterDetails {
width: 100%;
}
.form-group input {
margin-bottom: 20px;
}
.flip-container {
perspective: 1000px;
margin-bottom: 100px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
width: 370px;
height: 382px;
margin-bottom: 30px;
}
.back {
transform: rotateY(180deg);
background-color: #000000;
color: #ffffff;
width: 370px;
height: 382px;
margin-bottom: 30px;
padding: 100px 20px 0px 20px;
text-align: center;
box-sizing: border-box;
}
h3.centersmall {
position: absolute;
left: 0;
top: 83%;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 18px;
transition: color 1s;
padding-top: -10px;
}
.center {
top: 88%;
font-size: 18px;
}
img.playerpiclast {
margin-bottom: 400px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/images/favicon.png" sizes="16x16 32x32" type="image/png">
<title>The players</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/website-css.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/picklesfc.js"></script>
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/homepage/"><img src="/images/logo.svg" alt="Pickles FC logo">Pickles FC</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span>The Club</span></li>
<li class="selected"><span>The Players</span></li>
<li><span>The Shop</span></li>
<li><span>Collaborations</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="theplayers row">
<div class='container2 col-sm-8'>
<h3 class="center">Alex Stewart</h3>
<image src="/images/mainprofile_image.jpg" alt="mainprofile_image2.jpg" class="playerpics img-responsive">
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="row playpicpadding">
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
<div class="container2 col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front ">
<h3 class="centersmall">Alex Stewart</h3>
<image src="/images/profile_image2.jpg" alt="profile_image2.jpg" class="readmore playerpics img-responsive center-block">
</div>
<div class="back">
<p class='playerstats'>Some stats about Alex to go in here. His dad Alastair Stewart is a famous news reader. Alex Stewart plays in goal.</p>
</div>
</div>
</div>
</div>
<div class="instagram">
<h2 class="text-center">#picklesmagazine</h2>
<script src="//apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-276db0d4-25a2-4a5e-8a72-30da22fe3732"></div>
</div>
</div>
</body>
<footer id="footer">
<p>© 2017 Pickles Magazine | Football, Design and Wit</p>
<img src="/images/facebook.svg" height="25">
<img src="/images/twitter.svg" height="25">
<img src="/images/instagram.svg" height="25">
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>