I'm working on a project and I need to add a modal to it, before creating my modal, Buttons were working fine and functions were executing normaly, but after creating the modal, only the modal buttons are working, and the page buttons don't, I tried removing the html of the modal and they worked fine(that's how I understood that problem is with the modal), I also tried to remove the overlay but nothing changed .
I've just tried to remove the css of the modal and the overlay and It's working fine, so maybe there's a problem there ?
Here's the code of the modal:
//modal part
const modal = document.querySelector('.modal');
const overlay = document.querySelector('#overlay');
const closeModalBtn = document.querySelector('.close-btn');
const backProjectBtn = document.querySelector('.join-btn');
const selectRewardBtn = document.querySelector('.select-reward-btn');
backProjectBtn.addEventListener('click', openModal)
function openModal(){
modal.classList.add('active');
overlay.classList.add('active');
}
closeModalBtn.addEventListener('click', closeModal);
function closeModal(){
modal.classList.remove('active');
overlay.classList.remove('active');
}
/* modal styling*/
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 170px;
z-index: 10;
opacity: 0;
}
.modal.active{
opacity: 1;
}
.modal-header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#overlay{
background: hsla(0, 0%, 48%, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
}
#overlay.active{
opacity: 1;
pointer-events: none;
}
.close-btn{
background: none;
font-size: 2rem;
font-weight: bolder;
border: none;
cursor: pointer;
}
.pledging-block{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 90%;
border: 0.5px solid hsl(0, 0%, 80%);
border-radius: 15px;
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
}
span{
font-weight: lighter;
color: hsl(176, 50%, 47%);
margin-left: 5px;
font-size: 1.1rem;
}
.header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title{
font-weight: bolder;
font-size: 1.5rem;
}
.money-block{
border-top: 0.5px solid hsl(0, 0%, 80%);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
opacity: 0;
}
.infos-mahogany-pladging, .black-pledging-radio{
display: flex;
flex-direction: column;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.header-infos-bamboo, .header-infos-black, .header-infos-mahogany{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.enter-value{
width: 25%;
border: hsl(176, 50%, 47%) 1px solid;
border-radius: 25px;
font-size: 1.3rem;
padding-top: 7px;
padding-bottom: 7px;
}
.radio-label{
width: 25px;
height: 25px;
border: 1px solid hsl(176, 50%, 47%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.radio-label .checkmark{
width: calc(100% - 5%);
height: calc(100% - 5%);
background-color: hsl(176, 50%, 47%);
border-radius: 50%;
display: none;
}
.radio-label input{
display: none;
}
.radio-label input:checked + .checkmark{
display: inline-block;
}
.label-part{
width: 10%;
}
.mahogany-pledging{
opacity: 0.5;
pointer-events: none;
}
<div class="interactive-div">
<button class="joinbtn">Backthisproject</button>
<button class="bookmark-btn"><img src="images/icon-bookmark.svg" class="bookmark-icon"><div class="text">Bookmark</div></button>
</div>
<div class="modal" >
<div class="modal-header">
<h1>Back this project </h1>
<button class="close-btn">×</button>
</div>
<p>Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?</p>
<div class="no-reward-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-no-reward">
<div class="title">Plegde with no reward</div>
<p>Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<div class="bamboo-pledging pledging-block">
<div class="label-part">
<label class="radio-label">
<input type="radio" id="no-reward-pledging-radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="infos-bamboo-pladging">
<div class="header-infos-bamboo">
<div class="title">Bamboo Stand <span> Pledge $25 or more</span></div>
<div class="left">
<div class="num-left">101</div>
<p class="left">left</p>
</div>
</div>
<p>You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list..</p>
<div class="money-block">
<p>Enter your plegde</p>
<div class="entering-money">
<input type="number" class="enter-value">
<button class="continue-btn">Continue</button>
</div>
</div>
</div>
</div>
<!-- I removed some elements as they are almost identical -->
I removed some elements as they are almost identical
I solved the problem by changing the css of my modal
.modal{
background: white;
border: 1px solid white;
border-radius: 15px;
padding: 30px;
width: 60%;
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%) scale(0);
}
.modal.active{
transform: translate(-50%, -50%) scale(1);
}
Related
so basically I want to make my navbar slide in from the side of the screen when I click the toggle to open it, currently when I open the navbar it comes from the top and has no transition
If you want to understand more of what I mean exactly, check out https://iamtomwalker.com to see what I mean by having the navbar open from the side and transition in
my html:
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="/JS files/style.css">
<header id="home">
<div id='nav'>
<nav class="navbar">
<div class="logo_header">
<h1 class="logo">Menu</h1>
<button class="nav-btn" onclick="this.classList.toggle('change');">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<ul class="main_nav">
<li>home</li>
<li>about</li>
<li>services</li>
</ul>
</nav>
</div>
<div class="banner">
<div class="container">
<h1>scroll project</h1>
<p>wsjnciunclsnjiemc ljfnjdc cinufifl,vlfldlvlekfopec ciun ck cipn i inrc cijan9pnc cipqe</p>
<button class="scroll-link-btn">Explore Tours</button>
</div>
</div>
</header>
<section id="about" class="section">
<div class="title">
<h2>About Us</h2>
</div>
</section>
<section id="services" class="section">
<div class="title">
<h2>Services</h2>
</div>
</section>
<section id="tours" class="section">
<div class="title">
<h2>Tours</h2>
</div>
</section>
<footer class="section">
<p>
company that make this oen f
</p>
<a class="arrow-up" href="#home"></a>
</footer>
<script src='/JS files/js.js'> </script>
</body>
</html>
my css:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
body{
margin: 0;
padding: 0;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
#nav{
background-image: url("images/page.jpg");
height: 800px;
position: absolute;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
a{
text-decoration: none;
}
#home{
padding-bottom: 1000px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100vw;
background-color: white;
font-size: 20px;
transition: transform 1s ease-out;
}
.logo{
margin-left: 5%;
font-size: 25px;
font-weight: bold;
}
.logo_header{
display: flex;
margin-left: 7px;
}
.main_nav{
display: flex;
width: 333px;
float: right;
margin-right: 20px;
justify-content: space-between;
list-style: none;
}
.main_nav li{
display: inline;
color: black;
overflow: hidden;
transition: all 1s ease-out;
}
.main_nav li a{
color: black;
}
.nav-btn{
display: none;
background-color: white;
}
.container{
text-align: center;
color: white;
position: absolute;
font-size: 23px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-link-btn{
background: none;
border-color: white;
}
.scroll-link-btn a{
color: white;
font-size: 20px;
padding: 10px;
}
.title{
text-align: center;
font-size: 1.5rem;
}
#about{
padding-bottom: 500px;
}
#services{
padding-bottom: 500px;
background-color:aliceblue;
}
#tours{
padding-bottom: 500px;
}
footer{
background-color:rgb(26, 62, 62);
padding: 0.1px;
color: white;
text-align: center;
font-size: 1.1rem;
}
.arrow-up {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 10px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
position: absolute;
right: 10px;
margin-top: -33px;
}
#media only screen and (max-width : 600px){
.navbar{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
font-size: 20px;
}
.main_nav{
display: none;
}
.show_nav{
display: flex;
width: 100vw;
height: 150px;
flex-direction: column;
justify-content: flex-start;
}
.main_nav li{
width: 100%;
height: 50px;
font-size: 25px;
justify-content: center;
padding: 0%;
}
.nav-btn {
margin-right: 5%;
font-size: 30px;
color: #ffffff;
background: transparent;
border-color: transparent;
transition: all 0.3s linear;
cursor: pointer;
display: block;
}
.logo_header{
width: 100%;
justify-content: space-between;
margin-right: 2%;
}
}
my js code:
const navToggle = document.querySelector('.nav-btn');
const linksContainer = document.querySelector('.navbar');
const links = document.querySelector('.main_nav');
navToggle.addEventListener('click',function(){
links.classList.toggle("show_nav");
})
top:-50px; for this navbar in class no active and if click on button class active go to navbar and margin-top:0px you can use a transition to very good style to navbar
here I'm trying to add a background color with a slide transition to a radio button. On active bg color move with slide transition. I tried using transform: translate(); but it is not working. And I don't want to change the HTML. Can anyone suggest to me how can I achieve.
/** Case Switch Button **/
.case-switch-wrap h3 {
font-family: "Lato", Sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.5px;
color: #000000;
}
.case-switch {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* height: 38px; */
width: 130px;
background: #e6e6e6;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}
.switch-label {
padding-left: 65px;
position: relative;
z-index: 999999999;
}
.switch-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.switch-label .checkmark {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 65px;
background: #e6e6e6;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.switch-label input:checked~.checkmark {
background: #39ccae;
color: #fff;
}
.switch-label input:checked~.text {
font-weight: bold;
}
<div class="case-switch">
<label class="switch-label switch-label-on">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
<span class="checkmark">On</span>
</label>
<label class="switch-label switch-label-off">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
<span class="checkmark">Off</span>
</label>
</div>
The solution is to use ::after to create a new element that can slide back and forth. I created it after switch-label-off and use translateX to move it back and forth. I adjusted the container case-switch to have a background and border, and removed the rules that were causing a misalignment. I also adjusted the z-index of switch-label-off to be underneath switch-label-on. The rest of the new rules are at the bottom of the css.
/** Case Switch Button **/
.case-switch-wrap h3 {
font-family: "Lato", Sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0.5px;
color: #000000;
}
.case-switch {
position: relative;
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: start;
height: 40px;
width: 130px;
background: #f0f0f0;
border : 1px solid #e6e6e6;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}
.switch-label {
padding-left: 65px;
position: relative;
z-index: 999;
}
.switch-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.switch-label .checkmark {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 65px;
background: transparent /* set to transparent */;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.switch-label input:checked~.checkmark {
color: #fff;
}
/* set this one to be below the other in z-index */
.switch-label.switch-label-off {
z-index: 998;
}
/* transition on checkmark color with tiny delay */
.switch-label .checkmark {
transition: color .3s linear .05s;
}
/* new element to use as our slider */
.switch-label.switch-label-off .checkmark::after {
content: " ";
position: absolute;
top: 0;
z-index: -100;
left: 0;
height: 40px;
width: 65px;
background: #39ccae;
text-align: center;
border-radius: 4px;
transform: translateX(-66px);
transition: transform .3s ease-in-out;
}
.switch-label input:checked~.checkmark::after {
transform: translateX(0px);
}
.switch-label input:checked~.text {
font-weight: bold;
}
<div class="case-switch">
<label class="switch-label switch-label-on">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
<span class="checkmark">On</span>
</label>
<label class="switch-label switch-label-off">
<input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
<span class="checkmark">Off</span>
</label>
</div>
I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of the information like the nav, opening hours, phone number, etc will all be inside the hamburger menu.
The thing I am sitting with is that, I don't really know where to place the div for the hamburger menu. I have built the header for pc screen-size but it all does mess up when I drag the screen to the size of the mobile screen. After watching tutorials and reading about the hamburger menu, I am still sitting here not knowing where to place the div for the hamburger menu and have everything except the logo inside the hamburger menu for tablets and mobile.
Added the code for a header in the snippet, it is showing up weird in the snippet. Probably because I have written a lot wrong, but it still works though:
So this is the full HTML and CSS code for the header:
let popup = document.getElementById("Contact-popup");
popup.addEventListener("click", () => {
document.getElementById("contact_popup_page").style.display = "block";
});
let close = document.getElementById("close");
/** HEADER **/
body {
margin: 0 10%;
font-size: 12px;
}
a {
text-decoration: none;
color: #707070;
}
header {
box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
position: fixed;
width: 80%;
background-color: #fff;
z-index: 100;
margin-top: 0;
}
.header__main {
width: 100%;
display: grid;
grid-template-areas: "box1 box2";
color: #707070;
}
.logo__section {
height: 100px;
grid-area: box1;
margin-left: 2.5%;
width: 40%;
}
.header__main>.logo__section>a>img {
width: 100%;
}
.nav__topRight {
width: 100%;
height: 100px;
grid-area: box2;
color: #000;
flex-direction: column;
margin-top: 0;
align-items: flex-end;
}
.flexbox1 {
margin: 1% 0 3% 0;
}
.nav__top {
display: flex;
justify-content: flex-end;
}
.nav__middle {
display: flex;
justify-content: flex-end;
margin: 5% 3% 0 0;
font-size: 1.8rem;
color: #707070;
}
/** Contact */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.contact {
font-size: 1.8rem;
color: #707070;
}
.contact__info {
margin-left: 5%;
}
.contact__info>p {
color: #707070;
display: inline;
font-size: 1.8rem;
margin: 0 15px 0 5px;
}
.contact_popup_page {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.close,
.closer {
display: flex;
justify-content: right;
position: absolute;
font-size: 50px;
}
textarea:focus,
input:focus {
border-color: #fdb834 !important;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-moz-placeholder {
color: transparent;
}
textarea:focus:-ms-input-placeholder {
color: transparent;
}
input::-webkit-input-placeholder {
color: #707070;
}
input:-moz-placeholder {
color: #707070;
}
input::-moz-placeholder {
color: #707070;
}
input:-ms-input-placeholder {
color: #707070;
}
textarea::-webkit-input-placeholder {
color: #707070;
}
textarea:-moz-placeholder {
color: #707070;
}
textarea::-moz-placeholder {
color: #707070;
}
textarea:-ms-input-placeholder {
color: #707070;
}
label {
display: block;
margin: 0;
}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
/*//////////////////////////////////////////////////////////////////
[ utility ]*/
/*//////////////////////////////////////////////////////////////////
[ Contact ]*/
.container-contact {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.wrap-contact {
width: 500px;
background: #fff;
border-radius: 2px;
padding: 30px 40px 40px 40px;
}
/*==================================================================
[ Form ]*/
.contact-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-title {
width: 100%;
display: block;
font-family: Raleway-Black;
font-size: 30px;
color: #fdb834;
line-height: 1.2;
text-align: center;
padding-bottom: 45px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input {
width: 100%;
position: relative;
border: 1px solid #707070;
border-radius: 2px;
margin-bottom: 34px;
}
.rs1.wrap-input {
width: calc((100% - 40px) / 2);
}
.label-input {
font-family: Raleway-SemiBold;
font-size: 13px;
color: #fdb834;
line-height: 1.5;
text-transform: uppercase;
width: 100%;
padding-bottom: 11px;
}
.input {
display: block;
width: 100%;
background: transparent;
font-family: Raleway-SemiBold;
font-size: 18px;
color: #333333;
line-height: 1.2;
padding: 0 25px;
}
input.input {
height: 35px;
}
textarea.input {
min-height: 150px;
padding-top: 19px;
padding-bottom: 15px;
}
/*---------------------------------------------*/
.focus-input {
position: absolute;
display: block;
width: calc(99% + 1px);
height: calc(98%);
top: -1px;
left: 0px;
pointer-events: none;
border: 2px solid;
border-color: #fdb834;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}
.input:focus+.focus-input {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -4px;
}
.contact-form-btn {
font-family: Raleway-Bold;
font-size: 16px;
color: #fff;
line-height: 1.2;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 150px;
height: 55px;
border-radius: 27px;
background: #fdb834;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 27px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn:hover:before {
opacity: 0;
}
.cart__link,
.giftcard__link {
margin-right: 40px;
font-size: 1.8rem;
color: #707070;
}
.box3 {
height: 40px;
display: flex;
flex-direction: row;
margin-left: 2%;
}
.nav__bottom {
width: 55%;
justify-content: flex-start;
}
.help {
margin-left: 25px;
margin-right: 10px;
}
.favorite__link,
.help__link {
color: #707070;
}
.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
color: #fdb834;
}
.search {
width: 45%;
display: flex;
position: relative;
height: 40px;
justify-content: flex-end;
align-content: flex-end;
margin: 0 2% 0 0;
font-size: 1.8rem;
color: #707070;
}
.search-box {
background: #fff;
height: 10px;
padding: 5px;
border: 1px solid #707070;
border-radius: 2%;
box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
margin-left: 10px;
}
.search-btn {
text-decoration: none;
color: #707070;
font-size: 2rem;
width: 20px;
height: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
font-size: 1.4rem;
transition: 0.4s;
color: #707070;
width: 15rem;
}
::placeholder {
color: rgb(112, 112, 112, 0.7);
font-size: 1.4rem;
}
<header>
<div class="header__main">
<div class="logo__section">
<img src="https://kommunikasjon.ntb.no/data/images/00171/daaffdf6-fb0e-4e74-9b6b-7f973dbfa6a3.png/social" alt="logo" class="logo" />
</div>
<div class="nav__topRight">
<div class="flexbox1">
<div class="nav__top">
Contact us
<div class="contact_popup_page" id="contact_popup_page">
<div class="container-contact">
<div class="wrap-contact">
<form class="contact-form validate-form">
<button class="close" id="close">×</button>
<span class="contact-form-title"> Contact Us </span>
<label class="label-input" for="first-name">Your Name *</label
>
<div class="wrap-input rs1 validate-input">
<input
id="first-name"
class="input"
type="text"
name="first-name"
placeholder="First name"
/>
<span class="focus-input"></span>
</div>
<div class="wrap-input rs1 validate-input">
<input
class="input"
type="text"
name="last-name"
placeholder="Last name"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="email"
>Email Address *</label
>
<div class="wrap-input validate-input">
<input
id="email"
class="input"
type="text"
name="email"
placeholder="Eg. example#email.com"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="phone"
>Phone Number</label
>
<div class="wrap-input">
<input
id="phone"
class="input"
type="text"
name="phone"
placeholder="Eg. +47 000 00 000"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="message">Message *</label>
<div class="wrap-input validate-input">
<textarea id="message" class="input" name="message" placeholder="Please give us the detail here...."></textarea>
<span class="focus-input"></span>
</div>
<div class="container-contact-form-btn" id="contact-submit">
<button class="contact-form-btn">
<span> Submit </span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="contact__info">
<p>
<i class="fas fa-phone-alt"></i> (+47) 000 00 000
</p>
<p class="opening__p">Mon-Fri (8-20) Sat (9-16)</p>
</div>
</div>
</div>
<div class="flexbox2">
<div class="nav__middle">
<div class="cart">
<a href="#" class="cart__link"><i class="fas fa-shopping-cart"></i>
Cart</a
>
</div>
<div class="giftcard">
<a href="#" class="giftcard__link"
><i class="fas fa-gift"></i>
Gift Card</a
>
</div>
<div class="signin">
<a href="#" class="singin__link"
><i class="fas fa-user"></i>
Sing In</a
>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="nav__bottom">
<div class="navbar">
Men
</div>
<div class="navbar">
Women
</div>
<div class="navbar">
Junior
</div>
<div class="navbar">
Gears
</div>
<div class="navbar">
Explore
</div>
<div class="navbar">
About
</div>
</div>
<div class="search">
<div class="favorite">
<a href="#" class="favorite__link"><i class="fas fa-heart"></i>
Favorite</a
>
</div>
<div class="help">
<a href="#" class="help__link"
><i class="fas fa-info-circle"></i>
Help</a
>
</div>
<div class="search-box">
<form action="">
<input
class="search-txt"
type="text"
placeholder="Search....."
name="search"
/>
<a class="search-btn" href="#"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</div>
</header>
I have a template for a messaging app to use for a project but I don't know how to incorporate the JavaScript to make this template work. At the bare minimum I want to send messages. How can I do this?
Code that I currently have:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 10px;
}
#wrapper{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: #b5b5b7;
color: #ffffff;
}
.container{
width: 60%;
height: 80%;
display: flex;
box-shadow: 1rem 2rem 4rem rgba(0,0,0,2);
min-width: 60rem;
}
.users,
#chat-screen{
flex-grow: 1;
height: 100%;
min-width: 30rem;
}
.users{
background-color: black;
}
#chat-screen{
background: linear-gradient(rgba(242,182,50,0.85), rgba(242,182,50,0.85)), url("space.jpg") center no-repeat;
background-size: cover;
}
.users header{
background-color: #677077;
padding: 2rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.users ul{
list-style-type: none;
}
.users ul li{
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(255,255,255, 0.1);
}
.user ul li:nth-last-child{
border-bottom: none;
}
.users header h1{
font-size: 5rem;
font-weight: 100;
}
.avatar img{
width: 7.5rem;
height: 7.6rem;
border-radius: 50%;
}
.users .avatar{
display: flex;
margin: auto 0;
padding: 1rem;
position: relative;
}
.username{
font-size: 3rem;
}
.online{
background-color: #4ad99b;
width: 2rem;
height: 2rem;
border-radius: 50%;
position: absolute;
left: 6.5rem;
bottom: 1.5rem;
}
.offline{
background-color: #fa676a;
}
.away{
background-color: darkorange;
}
.busy{
background-color: purple;
}
.invisible{
background-color: dimgray;
}
.users ul li .online{
border: 2px solid #fff;
}
.users-list{
flex-grow: 2;
margin: auto 0;
}
.text{
font-size: 1.5rem;
margin: auto 0;
}
.timestamp{
font-size: 0.6rem;
flex-grow: 0.3;
margin: auto 0;
}
#chat-screen{
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 2;
color: #333;
}
#chat-screen .msg-compose{
background-color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
}
#chat-screen .msg-compose textarea{
flex-grow: 2;
margin: 0 1rem;
resize: none;
border: none;
padding-top: 5px;
height: 2rem;
}
#chat-screen .msg-compose textarea:focus{
outline: none;
}
#chat-screen .msg-compose i{
color: #c0c0c0;
cursor: pointer;
}
#messages{
overflow: auto;
flex-grow: 2;
padding: 1rem;
}
#messages article{
display: flex;
justify-content: flex-start;
margin-bottom: 2rem;
}
#messages article .avatar{
margin-right: 0;
}
#messages .right .avatar{
margin-right: 0;
}
.msg{
display: flex;
justify-content: space-between;
}
.msg .pointer{
width: 0;
height: 0;
border-style: solid;
border-width: 0 1rem 1.5rem 0;
border-color: transparent #fff transparent transparent;
margin: auto 0;
}
.inner-msg {
background-color: #fff;
width: 100%;
padding: 1.5rem 1rem;
border-radius: 0 4px 4px 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.1);
text-align: left;
margin: auto 0;
}
.right{
flex-direction: row-reverse;
}
.right .msg{
flex-direction: row-reverse;
}
.right .msg .pointer{
width: 0;
height: 0;
border-style: solid;
border-width: 1.5rem 1rem 0 0;
border-color: #fff transparent transparent transparent;
margin: auto 0;
}
.right .msg .inner-msg{
border-radius: 4px 0 4px 4px;
box-shadow: -2px 2px 5px rgba(0,0,0, 0.1);
text-align: right;
}
<section id="chat-screen">
<section id="messages">
<div id="chatHistory">
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>Lucky...I wish I had that</p></div>
</div>
</article>
<article class="right">
<div class="avatar">
<img src="Audrey.jpg" alt="Audrey">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>It's called spend money fam!</p>
</div>
</div>
</article>
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>But I'm a broke College Student :(</p>
</div>
</div>
</article>
<article class="right">
<div class="avatar">
<img src="Audrey.jpg" alt="Audrey">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p>I'm right there with you on that one V_V</p>
</div>
</div>
</article>
<article>
<div class="avatar">
<img src="Bert.jpg" alt="Bert">
</div>
<div class="msg">
<div class="pointer"></div>
<div class="inner-msg">
<p class="text">Struggle Squad Unite :P</p>
</div>
</div>
</article>
</div>
</section>
<div class="msg-compose">
<i class="fas fa-paperclip"></i>
<input type="text" placeholder="Type Something Here..." name="message-to-send" id="message-to-send">
<button type="submit" id="button"><i class="fab fa-telegram-plane"></i></button>
</div>
</section>
I just want to be able to at least send messages. But I know that I need something like Python or Java to be able to do it.
The project is looking awesome! Yes you'll need some javascript to handle the user input from
<input type="text" placeholder="Type Something Here..." name="message-to-send" id="message-to-send">
I suggest looking at something like document.getElementById("message-to-send") to start handling input.
Good luck!
.q-items-container .q-item-info {
float: left;
position: relative;
width: 30.3rem;
height: 40rem;
margin: 2rem;
background: #ffffff;
cursor: pointer;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.q-items-container .q-item-info .q-food-img {
width: 100%;
height: 55%;
}
.q-items-container .q-item-info .q-food-info {
position: absolute;
top: 20px;
left: 20px;
z-index: 10000;
color: white;
}
.q-items-container .q-item-info .q-stars {
background-color: #2eb82e;
padding: 2px;
margin-top: 3px;
border-radius: 3px;
}
.q-items-container .q-item-info .q-separator {
width: 100%;
height: 7px;
background-color: #6c41a6;
}
.q-items-container .q-item-info .comp-container {
width: 100%;
height: 8rem;
position: absolute;
text-align: center;
top: 275px;
/* background-color:black; */
}
.q-items-container .q-item-info .comp-container .q-review {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.q-items-container .q-item-info .comp-container .q-review .review {
width: 48%;
/* margin:auto; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-items-container .q-item-info .comp-container .q-review .sep {
width: 4%;
display: flex;
padding: 5px 0 5px 0;
justify-content: center;
align-items: center;
}
.q-items-container .q-item-info .comp-container .q-review .price {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-item-info .comp-container .q-company {
width: 8rem;
height: 8rem;
border: 0.8rem solid #6c41a6;
-webkit-border-radius: 2rem;
border-radius: 4rem;
margin: auto;
}
.q-items-container .q-item-info .q-order-now {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
height: 4rem;
background: #6c41a6;
color: #fff;
font-size: 1.4rem;
text-align: center;
}
<div class="q-items-container">
<div class="q-item-info">
<div class="q-food-info">
<div>xyz</div>
<div>yzx</div>
</div>
<img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg">
<div class="q-separator"></div>
<div class="comp-container">
<img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg">
<div class="q-review">
<div class="review">
<span style="color:#4d4d49;">24</span>
<span style="color:#898989;">Reviews</span>
</div>
<div class="sep">
<div style="width:1px;height:100%;background-color:#d7d7d7;"></div>
</div>
<div class="price">
<span style="color:#4d4d49;">$4.99</span>
<span style="color:#898989;">Avg.Price</span>
</div>
<div>
</div>
</div>
</div>
<div class="q-order-now" ng-click="goToListingPage(cart)">
<div ng-show="cart.isOpen">Order Now <span>→</span></div>
<div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div>
<div ng-show="cart.isClosed">Closed</div>
</div>
</div>
Now i want to achieve overlay effect like
I tried with linear background gradient , but it did not work out. One thing I want to mention here is, my image is dynamically set. How can I achieve that?
Try to apply the following css, then I believe you'll be able to apply it to the right element in code.
.q-items-container .q-item-info .q-food-info {
background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
width: 100%;
}