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>
Related
i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>
You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
I need my dropdown menu under About menu and align in center of about menu. And when my site in moblie size dropdown are not in the center, They are on the right of site. I tried to coding dropdown link1hhh, link2, link3 to be the center but it's not align. What's wrong about html, css code
so I want Dropdown be like this.
Thanks
const body = document.querySelector("body");
const navbar = document.querySelector(".navbarr");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
.navbarr{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbarr.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbarr .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbarr .logo a{
color: #000000;
font-size: 30px;
text-decoration: none;
}
.navbarr .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #000000;
margin-left: 25px;
text-decoration: none;
font-weight: normal;
transition: all 0.3s ease;
}
.icon{
color: #000000;
font-size: 25px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 80px;
top: 110px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
margin-left: 5%;
margin-right: 5%;
}
}
#media (max-width: 900px) {
.content{
padding: 0 40px;
margin-left: 0%;
margin-right: 0%;
}
.menu-list .cancel-btn{
position: absolute;
right: 50px;
top: 110px;
}
}
#media (max-width: 1000px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbarr .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 100px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbarr.show .menu-list{
right: 0%;
}
.navbarr .menu-list li{
margin-top: 45px;
}
.navbarr .menu-list li a{
font-size: px;
margin-right: -100%;
}
.navbarr.show .menu-list li a{
margin-right: 0px;
}
}
<nav class="navbarr">
<div class="content">
<div class="logo">
<img src="" width="80" height="80" alt="" />
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Menu</li>
<li class="dropdown">
About
<div class="dropdown-content">
Link 1hhh
Link 2
Link 3
</div>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
Remove position: absolute; from .dropdown-content:
const body = document.querySelector("body");
const navbar = document.querySelector(".navbarr");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
.navbarr{
padding-top: 85px;
padding-bottom: 30px;
background: #ffffff;
position: sticky;
top: 0;
width: 100%;
z-index: 2;
transition: all 0.3s ease;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbarr.sticky{
background: #ffffff;
padding: px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbarr .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbarr .logo a{
color: #000000;
font-size: 30px;
text-decoration: none;
}
.navbarr .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #000000;
margin-left: 25px;
text-decoration: none;
font-weight: normal;
transition: all 0.3s ease;
}
.icon{
color: #000000;
font-size: 25px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 80px;
top: 110px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
margin-left: 5%;
margin-right: 5%;
}
}
#media (max-width: 900px) {
.content{
padding: 0 40px;
margin-left: 0%;
margin-right: 0%;
}
.menu-list .cancel-btn{
position: absolute;
right: 50px;
top: 110px;
}
}
#media (max-width: 1000px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbarr .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 100%;
right: -100%;
top: 0px;
display: block;
padding: 100px 0;
text-align: center;
background: rgb(255, 255, 255);
transition: all 0.3s ease;
}
.navbarr.show .menu-list{
right: 0%;
}
.navbarr .menu-list li{
margin-top: 45px;
}
.navbarr .menu-list li a{
font-size: px;
margin-right: -100%;
}
.navbarr.show .menu-list li a{
margin-right: 0px;
}
}
/* added */
#media (max-width: 1000px) {
.dropdown-content {
position: initial;
}
<nav class="navbarr">
<div class="content">
<div class="logo">
<img src="" width="80" height="80" alt="" />
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Menu</li>
<li class="dropdown">
About
<div class="dropdown-content">
Link 1hhh
Link 2
Link 3
</div>
<li>Contact</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
I've created a full page video background homescreen for a website and am wanting to add the next section "About" below the homepage however, the about-section is stuck to the top of the site and I can't figure out why. I'd like the video background to remain fixed so it covers the entire site, I also have a sidebar that pops in with menu options so I believe I'm going wrong somewhere with the positioning of it all.
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500;700&family=Oxygen:wght#300;400;700&family=Space+Grotesk:wght#300;400;500;700');
#import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght#300;400;500;700');
:root {
--overlay-color: rgb(105, 104, 104);
--font-secondary: 'Oxygen', sans-serif;
--font-primary: 'Space Grotesk', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
.showcase.active {
right: 300px;
}
.showcase header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-container {
cursor: pointer;
position: relative;
left: -40px;
}
.logo {
width: 100px;
cursor: pointer;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url('images/menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
right: -40px;
}
.toggle.active {
background: url('images/close.png');
filter: invert(1);
background-repeat: no-repeat;
background-size: 20px;
background-position: center;
}
.showcase video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-color);
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
margin: 0 auto;
}
.text h2 {
font-size: 5.5em;
font-weight: 700;
line-height: 1.1em;
text-transform: uppercase;
text-align: center;
z-index: 10;
}
.text p {
font-size: 1.2em;
margin-top: 30px;
font-weight: 300;
max-width: 700px;
font-family: var(--font-primary);
text-align: center;
line-height: 1.5em;
width: 490px;
}
.contact-container {
position: fixed;
bottom: 30px;
text-transform: uppercase;
color: #fff;
z-index: 10;
left: 75px;
font-size: 1.03em;
letter-spacing: 2px;
}
.contact-container a {
font-family: var(--font-primary);
text-decoration: none;
color: #fff;
}
.cool-link::after {
content: '';
display: block;
width: 0;
margin-top: 2px;
height: 2px;
background: #fff;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
transition: width .3s;
}
/* SOCIAL ICONS */
.social {
position: fixed;
bottom: 18px;
right: 40px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.social li {
list-style: none;
}
.social-icon {
display: inline-block;
transform: scale(0.5);
margin-right: 25px;
transition: 0.5s;
font-size: 40px;
cursor: pointer;
}
.social-icon.active {
color: black;
}
.social-icon:hover {
transform: scale(0.5) translateY(-15px)
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
/* background-color: white;
z-index: 100; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.menu ul {
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a {
text-decoration: none;
font-size: 25px;
line-height: 2em;
color: #111;
}
.menu ul li a:hover {
color: var(--overlay-color);
}
/* HOME IMAGES */
.images {
position: absolute;
display: flex;
flex-direction: column;
}
.image1 {
position: relative;
top: 210px;
left: 220px;
}
.image1 img {
width: 170px;
opacity: .9;
}
.image2 {
position: relative;
left: 30px;
top: 235px;
}
.image2 img {
width: 300px;
opacity: .9;
}
.image3 {
position: relative;
left: 778px;
top: -255px;
}
.image3 img {
width: 300px;
height: 170px;
opacity: .9;
}
.image4 {
position: relative;
left: 995px;
top: -278px;
}
.image4 img {
width: 170px;
opacity: .9;
height: 230px;
}
/* ABOUT SECTION */
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
/* MEDIA QUERIES */
#media(max-width: 798px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 3em;
}
}
<script src="https://kit.fontawesome.com/914efae9b6.js" crossorigin="anonymous"></script>
<section class="showcase">
<header>
<div class="logo-container">
<img class="logo" src="/images/logo.png" alt="">
</div>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<video src="/images/black.mp4" muted loop autoplay></video>
<div class="text">
<h2>Back Your</h2>
<h2>creators</h2>
</div>
<div class="images">
<div class="image1">
<img src="/images/cardmapr-E4s8t8EfDu4-unsplash.jpg" alt="">
</div>
<div class="image2">
<img src="/images/aronpw-0caikkln3Ag-unsplash.jpg" alt="">
</div>
<div class="image3">
<img src="/images/image.png" alt="">
</div>
<div class="image4">
<img src="/images/joshua-rawson-harris-oEEdL2vZKJg-unsplash.jpg" alt="">
</div>
</div>
<ul class="social">
<li class="social-icon"><i class="fab fa-facebook-f"></i></li>
<li class="social-icon"><i class="fab fa-instagram"></i></li>
<li class="social-icon"><i class="fab fa-tiktok"></i></li>
</ul>
<div class="contact-container">
<a class="cool-link" href="#">Contact</a>
</div>
<!-- Scroll arrow -->
<a class="ca3-scroll-down-link ca3-scroll-down-arrow" data-ca3_iconfont="ETmodules" data-ca3_icon=""></a>
</section>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
<section id="about">
<h1>About</h1>
<p>
This is a landing page with a full screen video background. This section will be for the about page
</p>
<h2>Follow Me On Social Media</h2>
<div class="social">
<i class="fab fa-twitter fa-3x"></i>
<i class="fab fa-facebook fa-3x"></i>
<i class="fab fa-github fa-3x"></i>
<i class="fab fa-linkedin fa-3x"></i>
</div>
</section>
Thanks in advance if anyone can point out where I'm going wrong!
you can do .showcase{ position: relative} so it will look like this:
.showcase {
position: relative
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
color: #fff;
z-index: 2;
transition: 0.5s;
}
it will fix it, if you must have show case as absolute, so you can do
#about {
position:absolute;
top:100vh;
width:100vw;
}
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)
For each button that the user hovers on, the image should change with one which points to that button. (I have 14 versions of that image, each pointing lower)
How would this be done with jQuery? Taking the mouse X and Y or using .hover and showing/hiding specific classes? (I think .hover would work better).
It works as expected with .hover() but I can't really seem to make the image stay in the center of its .
I tried many techniques from the internet, but none of them worked.
Screenshot with it not being centered:
Code:
body {
width: 100%;
text-rendering: optimizeLegibility; /*setam textul sa fie optimzat pentru o lizbilitate mai buna, in detrimentul vitezei de incarcare si a preciziei geometrice*/
font-weight: 200;
font-size: 15px;
font-family: 'Roboto Condensed', sans-serif;
color: #fff;
height: 100%;
animation-name: tranzitie-inceput;
animation-duration: 0.5s;
}
#container-mate {
background: #e6e7d0 url('../img/bg-mate.png');
}
/*HEADER-UL PAGINII*/
#meniu-mate {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
.mate-sus {
height: 10rem;
background: linear-gradient(to right, #7ec7bc, #63b4b3 15%, #429ba8);
}
.mate-sus-nerd {
float: right;
width: 9%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 65px;
}
.citat-mate-sus {
position: relative;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
font-weight: bold;
margin-left: 85px;
}
.nav-bar-pagina-mate {
height: 3rem;
background: linear-gradient(to right, #9bddc5 15%, #34bab8);
margin-bottom: 1.5rem;
}
.nav-bar-pagina-mate > ul {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 1.5rem;
font-size: 1.5rem;
}
.nav-bar-pagina-mate > ul > li {
display: inline;
}
.nav-bar-pagina-mate > ul > li > a {
text-decoration: none;
color: #fff;
font-style: italic;
}
/*CONTINUTUL PAGINII*/
#cursuri-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.cursuri-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.selectie-clasa-mate-cursuri,
.selectie-clasa-mate-exercitii,
.selectie-clasa-mate-quiz {
font-size: 2.5rem;
margin-left: 2rem;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.cifre-clasa {
float: right;
display: inline;
}
.cifre-clasa > ul {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 50px;
}
.home-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.back-mate:hover {
color: #429ba8;
}
.home-mate:hover {
color: #429ba8;
}
.comutare-mate {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: 2rem;
font-size: 2rem;
text-decoration: none;
color: #fff;
transition: 1s;
}
.comutare-mate:hover {
color: #429ba8;
}
.cifre-clasa > ul > li {
opacity: 0;
margin: 5px;
display: inline-block;
}
.cifre-clasa > ul > li > a > img {
width: 85%;
}
.cifre {
width: 35%;
margin-left: 400px;
margin-top: -55px;
}
.fa-book {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#exercitii-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.exercitii-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
#quiz-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
}
.quiz-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
.fa-question {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
font-size: 6rem;
margin-right: 2rem;
}
.fa-lightbulb {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
font-size: 6rem;
}
#variante-mate {
height: 12rem;
max-width: 90%;
margin: 0 auto;
background-color: #429ba8;
margin-bottom: 1.5rem;
cursor: pointer;
}
.variante-text-mate {
font-size: 4rem;
position: relative;
transform: translateY(-50%);
top: 50%;
margin-left: 4rem;
}
.fa-pencil-alt {
color: black;
position: relative;
transform: translateY(-50%);
top: 50%;
float: right;
margin-right: 2rem;
}
/*FOOTER*/
.mate-jos {
background-color: #28494e;
width: 100%;
color: white;
text-align: right;
height: 12.2rem;
position: relative;
}
.mate-jos-text {
font-size: 1.1rem;
}
#contact-footer {
float: right;
margin-right: 6rem;
}
#contact-footer i {
font-size: 5rem;
padding: 0 3.6rem;
margin-bottom: 1rem;
}
.footer-social {
float: right;
position: absolute;
bottom: 14%;
right: 5%;
}
.logo-mateinfo {
float: left;
width: 7.5%;
left: 5%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#variante-bacalaureat-mate-container {
max-width: 1500px;
margin: 0 auto; /*meniul este centrat orizontal*/
background-color: #fff;
height: 100%;
}
#variante-bacalaureat-mate-centru {
font-size: 5rem;
color: #000;
font-family: 'Proxima Nova', 'Roboto Condensed';
margin-top: 2rem;
overflow: hidden;
}
.semestrul1-variante-bacalaureat-mate {
background: linear-gradient(to right, #499fab, #86bfc7 20%, #abd3d8 50%, #fff);
width: 95%;
padding: 1rem 0 1rem 3rem;
margin-bottom: 1.25rem;
margin-left: 2rem;
color: #fff;
}
.variante-bacalaureat-mate-lista {
font-size: 3rem;
margin-left: 2rem;
color: #fff;
float: left;
}
.variante-bacalaureat-mate-lista > li {
height: 4rem;
line-height: 4rem;
max-width: 250px;
width: 100%;
background-color: #429ba8;
margin-bottom: 0.8rem;
padding-left: 1rem;
}
.variante-bacalaureat-mate-1:hover,
.variante-bacalaureat-mate-2:hover,
.variante-bacalaureat-mate-3:hover {
color: #7ec7bc;
transition: 0.25s;
variante-bacalaureator: pointer;
}
.fereastra-mate-variante-bacalaureat-1,
.fereastra-mate-variante-bacalaureat-2,
.fereastra-mate-variante-bacalaureat-3 {
float: right;
color: #000;
max-width: 1150px;
margin-right: 2rem;
text-align: center;
}
.vbac1
{
display: block;
margin-left: auto;
margin-right: auto
}
.header-mate-variante-bacalaureat-1 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-1 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-2 {
display: none;
}
.header-mate-variante-bacalaureat-2 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-2 > p {
font-size: 2rem;
}
.fereastra-mate-variante-bacalaureat-3 {
display: none;
}
.header-mate-variante-bacalaureat-3 {
text-align: center;
margin-bottom: 1.5rem;
}
.fereastra-mate-variante-bacalaureat-3 > p {
font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/reset.css" rel="stylesheet" />
<link href="css/fontawesome-all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<title>variante-bacalaureat Mate</title>
</head>
<body>
<div id="container-mate">
<section id="variante-bacalaureat-mate-container">
<header class="mate-sus">
<img src="img/mate nerd.png" class="mate-sus-nerd" />
<h1 class="citat-mate-sus">Egalitatea nu exista decat in matematica.</h1>
</header>
<nav class="nav-bar-pagina-mate">
<i class="fas fa-home"></i>
<i class="fas fa-arrow-left"></i>
COMUTA PORTAL
</nav>
<article id="variante-bacalaureat-mate-centru">
<h1 class="semestrul1-variante-bacalaureat-mate">variante-bacalaureat - clasa a IX-a</h1>
<ul class="variante-bacalaureat-mate-lista">
<li class="variante-bacalaureat-mate-1">Varianta 1</li>
<li class="variante-bacalaureat-mate-2">Varianta 2</li>
<li class="variante-bacalaureat-mate-3">Varianta 3</li>
<li>Varianta 4</li>
<li>Varianta 5</li>
<li>Varianta 6</li>
<li>Varianta 7</li>
<li>Varianta 8</li>
<li>Varianta 9</li>
<li>Varianta 10</li>
<li>Varianta 11</li>
<li>Varianta 12</li>
<li>Varianta 13</li>
<li>Varianta 14</li>
</ul>
<aside class="fereastra-mate-variante-bacalaureat-1">
<img src="img/vbac (1).png" class="vbac1" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-2">
<img src="img/vbac (2).png" class="vbac2" />
</aside>
<aside class="fereastra-mate-variante-bacalaureat-3">
<img src="img/vbac (3).png" class="vbac3" />
</aside>
</article>
<footer class="mate-jos">
<div id="contact-footer">
<img src="img/logo web .png" class="logo-mateinfo" />
<div class="footer-social">
<i class="fab fa-instagram"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-phone-square"></i>
<h6 class="mate-jos-text">© 2018 - Octavian Niculescu (cod), Cezar Stoica (design) pentru INFOEducatie.ro</h6>
</div>
</div>
</footer>
</section>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/js.js"></script>
</html>
I also uploaded it on my website so you can see it:
http://octaniculescu.com/mateinfo/variante-mate.html
Thanks.
I would do this in plain CSS with one single image which will be much more efficient than loading 14 different images.
What I would do would be to use the :hover CSS state in combination with transform(rotates XXdeg). This way you just need to assign a number of degrees for the image to rotate when hovering each button.
Check this approach here: https://codepen.io/guillermo-carone/pen/KRBprd