Develop Reference

Adding multiple dropdown menu's next to each other using JS, HTML and CSS

I am trying to get multiple dropdown menu's next to each other, however I am running into a problem. I have the two categories I want to have as dropdown in the header, however only 1 of them seems to work. With the non-working dropdown menu nothing happens when I click on it.
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>

querySelector will pick up the first matching element, whereas querySelectorAll will get a collection of all matching elements. You need to iterate through the elements to apply the listener. This solution clears out any open nav menus when the other is clicked. Also, it makes use of the [...] spread operator to iterate through elements. I added a new class navitem so that each submenu would show where it should.
let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
[...list].forEach(el => el.classList.remove('newlist')); // reset
e.target.parentNode.querySelector('.list').classList.toggle('newlist');
// this also works
//e.target.nextElementSibling.classList.toggle('newlist');
}
[...click].forEach(el => el.addEventListener("click", showSub));
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.navitem {
width: 150px;
display: inline-block;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class='navitem'>
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
<div class='navitem'>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
</div>

The way querySelector works, is it returns the first matching DOM element. In your case, because you use the click class for both buttons, the listener is only attached to the first one. Check out relevant documentation (at the return value header).
In this case I would suggest either using two classes and adding listeners to both separately, or accessing both buttons using someting like:
let clicks = document.querySelectorAll('.click');
for (let click of clicks) {
click.addEventListener("click",()=>{
list.classList.toggle('newlist');
});
}

You need a forEach to address every button-list pair.
I believe the below code solves your JavaScript issues. Adjust the CSS as needed (I have changed the original HTML a little).
let drops = document.querySelectorAll('.drop');
drops.forEach(function(drop) {
let click = drop.querySelector('.click');
let list = drop.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.drop {
width: 150px;
float: right;
padding: 0 5px;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 100%;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
margin-top: 1px;
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class="drop">
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
<div class="drop">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
</div>
</div>
</div>

CSS text align center is off

I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>

The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>

You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox

Needing Help Tweaking The Ability to Customize Message Body

I've been sitting on this for two weeks and feel really stumped. I'm pretty much an extreme noob who is teaching myself coding so I can create an interactive game with Twine (Sugarcube). Everything in this code is perfect and I've customized it since to my liking BUT I have one glaring issue. Whenever you click on an email, it expands to the same one message body. It doesn't change, no matter which message preview you click.
My request is for anyone that can help me or point me in the direction on how to tweak the "EmailFull" div class (if that's what needs to be tweaked) so that it changes every time you click a different message. I will be forever grateful because I feel like no matter if I create a new div class, rearrange the order, or create a new JS function, it doesn't pan out right.
Here's the full code on CodePen: https://codepen.io/Lance-Jernigan/pen/yJbXOK
HTML:
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
CSS:
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
JS:
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})

You are not setting the content of .EmailFull properly. I slightly modified your javascript code to include this
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})
body {
background: #732bde;
padding-top: 50px;
font-family: Helvetica;
}
body * {
box-sizing: border-box;
}
.wrapper {
width: 320px;
height: 568px;
background: #fff;
margin: auto;
position: relative;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
}
.statusBar {
height: 20px;
width: 100%;
background: #21294a;
position: absolute;
top: 0px;
display: flex;
justify-content: space-between;
z-index: 10;
}
.signal {
margin: 5px 5px;
padding: 0px;
display: flex;
width: 50px;
}
.signal > span {
display: inline-block;
border-radius: 5px;
width: 5px;
height: 5px;
border: solid 1px #fff;
margin: 0px 1px;
}
.signal > span.active {
background: #fff;
z-index: 3;
}
.clock p {
color: #fff;
font-weight: 100;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.battery {
margin: 3px 5px;
width: 50px;
}
.battery span {
display: block;
height: 7px;
width: 17px;
border-radius: 1px;
background: #fff;
position: relative;
float: right;
}
.battery span:after {
content: " ";
display: inline-block;
width: 3px;
height: 4px;
background: #fff;
border-radius: 4px;
position: absolute;
right: -2px;
top: 1px;
}
.header {
padding: 5px 15px 15px 15px;
width: 100%;
background: #21294a;
position: absolute;
top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 10;
border-bottom: solid 1px #424a63;
}
.header:after {
content: " ";
display: block;
height: 4px;
width: 85%;
background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
position: absolute;
bottom: -4px;
left: 0px;
right: 0px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
}
.hamburgerWrapper {
margin: 0px;
padding: 0px;
width: 50px;
}
.hamburger {
width: 13px;
}
.hamburger.active {
cursor: pointer;
}
.hamburger span {
display: block;
margin: 2px auto;
height: 2px;
width: 100%;
background: #467797;
border-radius: 9px;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-4px, -2px);
width: 75%;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-3px, 2px);
width: 75%;
}
.headerLabel h1 {
color: #fff;
font-size: 15px;
font-weight: 100;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.headerMenu {
width: 50px;
text-align: right;
}
.headerMenu h2 {
color: #467797;
font-size: 12px;
font-weight: 600;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.EmailSearch {
width: 90%;
margin: auto;
padding: 65px 0px 20px 0px;
}
.EmailSearch input {
width: 100%;
font-size: 12px;
font-weight: 100;
color: rgba(255, 255, 255, .5);
outline: none;
background: transparent;
border: none;
padding: 15px 0px;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.EmailSearch input::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
font-weight: 100;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.light {
background: rgba(255, 255, 255, .4);
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
.Email .ImgWrapper {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Email .img {
width: 40px;
height: 40px;
background: #fff;
border-radius: 100%;
position: relative;
}
.Email .img.notif:before {
content: " ";
display: block;
width: 12px;
height: 12px;
background: #5bc3e4;
border-radius: 100%;
border: 2px solid #868b9d;
position: absolute;
top: -2px;
left: -2px;
opacity: 1;
transition: all .3s;
}
.Email.active .img.notif:before {
opacity: 0;
}
.EmailTitle {
width: 80%;
position: relative;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.EmailTitle .EmailTime {
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
font-weight: 100;
margin: 0px;
padding: 5px;
}
.EmailTitle h1 {
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1em;
font-weight: 500;
width: 100%;
}
.EmailTitle h2 {
margin: 0px;
padding: 3px 0px;
font-size: 12px;
line-height: 1em;
font-weight: 300;
}
.EmailTitle p.EmailPreview {
margin: 5px 0px;
max-height: 25px;
padding: 0px;
font-size: 12px;
font-weight: 100;
opacity: .8;
overflow: hidden;
transition: all .3s;
}
.Email.active .EmailTitle p.EmailPreview {
max-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="statusBar">
<div class="signal">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="clock">
<p>10:15 AM</p>
</div>
<div class="battery">
<span></span>
</div>
</div>
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headerLabel">
<h1>INBOX</h1>
</div>
<div class="headerMenu">
<h2>EDIT</h2>
</div>
</div>
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailSearch">
<input type="text" placeholder="Search Messages" />
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<div class="img">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
</div>
</div>
</div>

Since we do not know, where your content data (email body text) is comming from and in which element(s) it will be stored, you can basically change the html of your EmailFull class every time an email is clicked.
$(".EmailFull").html('<p>Some other mail text here.<p>');

Submit button not showing up in the same area on different screens

My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>

In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}

slideshow of images and keeping a text on it all the time

I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}

This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.