Animation in html/css/js [duplicate]

Animation in html/css/js [duplicate] - javascript

This question already has an answer here:
How to reuse the same code multiple times - html/css
(1 answer)
Closed 1 year ago.
I would like the modal that pops up in my code to work separately for the buttons I have. For example, I have the About Me button and the Projects button. When the user clicks the About Me button, there should be a separate modal that pops up with different text, and then when the user clicks the Projects button, there should be a different modal that pops up with a different text. Essentially, the design of the modal should be the same, it just that it should have different text for each of the buttons.
Code:
function popUp_model(){
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>
As you can see, there is the same modal with the same text for both of the buttons. But I want different text on the modals for each of the buttons. Any suggestions?
Expected Output
When the user clicks About Me the modal with the text that I sent in the code should appear.
When the user clicks Projects the modal with a different text saying something like, "Hello, these are my projects" should appear.
NOTE: The design of the modal should be the exact same, the only thing that changes is the text.
I tried switching the names of the classes and making like a second modal with different text but it did not quite work, and I got the wrong output.
Is there a way this can be accomplished?

There are multiples ways to reuse the same model with different content, based on the situation.
A simple solution can be passing some parameters to the popUp_model function.
function popUp_model(typeOfModel) {
let aboutHTML = `
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
`;
let projectHTML = `
<h2>
My Projects
</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
</ul>
`;
if(typeOfModel == 0)
document.getElementsByClassName("model-content")[0].innerHTML = aboutHTML;
else
document.getElementsByClassName("model-content")[0].innerHTML = projectHTML;
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body {
background: black;
}
.wrapper {
display: flex;
}
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white;
/* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%,
100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
h2, p, li {
color: white;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(0)">About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

You can do something like this to send the type and set the text in the function based on the type.
function popUp_model(type){
let changeTextEl = document.getElementById('change-text')
if (type == 1) changeTextEl.innerHTML = 'Join Our Newsletter'
if (type == 2) changeTextEl.innerHTML = 'Hello, these are my projects'
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(2)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2 id="change-text">
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

Related

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

Why are these input and text parts on the right side, if they supposed to be on the center?

I have a problem whit my new project. A login system. I did it from a youtube video: https://youtu.be/cxm5bCCa9OA . Everything works perfectly, It just bothers me, that my text is right-sided instead of centered, but the YouTuber's text is fine. I think I have the same code. I think The problem might be with the form's border or the positioning of my Texts.
My Log in system:
The YouTuber's Log in system:
My code is also here:
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<center>
<div class="box">
<div class="form">
<h4>Log In
<h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>
</center>

To center those inputs you may add a margin-left and a margin-right of auto to .inputBox. Or simply change this:
.inputBox {
position: relative;
width: 300px;
margin-top: 35px; /** change this */
}
into this:
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0; /** into that */
/**
* the above rule means:
* - 35px as margin top
* - left and right margins set to "auto" which horizontally centers your ".inputBox"
* - 0px as margin bottom
*/
}
And here's a live demo (made some changes to your code because you had some tags that were not closed)
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<div class="box">
<div class="form">
<h4>Log In</h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>

Compared to the video, you are missing a padding: 50px 40px; in the .form part.
Try replacing your .form css with this:
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
UPDATE: furthermore, there is an issue with the <h4> tag which is opened twice. Maybe you should have <h4>Log In</h4>.

Toggle Hamburger Menu Javascript

My Hamburger menu is not working properly, that's it is not showing the menu items whenever a user clicks on it. It is however acting properly on the other functionality whenever it is clicked. I have tried every possible trick and i haven't managed to get it to work properly.I am not sure what is the challenge with my javascript because i believe that should be were the issues are. Below is my code:
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
display: none;
opacity: 0;
}
}
.open {
right: 0;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>

You need to remove display:none from your .nav__list, add opacity:1 to .open and also edit your code on mobile version.
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav__list");
hamburger.addEventListener("click", ()=> {
navbar.classList.toggle("open");
});
const hamburgerBtn = document.querySelector('.hamburger');
let hamburgerOpen = false;
hamburgerBtn.addEventListener('click', () => {
if (!hamburgerOpen) {
hamburgerBtn.classList.add('open');
hamburgerOpen = true;
} else {
hamburgerBtn.classList.remove('open');
hamburgerOpen = false;
}
});
:root {
--fw-normal: 400;
--fw-dark: 600;
--fw-bold: 700;
/***Colors***/
--clr-primary: #333;
--clr-text: #fafafa;
--clr-blue: #22a7ff;
--clr-purple: #871e5f;
--clr-green: #19a356;
--clr-yellow: #ffff2e;
--clr-red: #cd1a21;
--clr-orange: #ff4500;
/*** Font and Typography ***/
--ff-body: Georgia, "Times New Roman", Times, serif;
--ff-header: Verdana, Arial, Helvetica, sans-serif;
--fs-header: 4.5rem;
--fs-header1: 2.5rem;
--fs-header2: 1.5rem;
--fs-header3: 1.2rem;
--fs-lg-para: 1.1rem;
--fs-md-para: 1rem;
--fs--sm-para: .938rem;
/*** z index ***/
--z-index: 99;
}
/***************************************************
2. #Global Styles
***************************************************/
*, ::before, ::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: var(--ff-body);
background: var(--clr-text);
color: var(--clr-primary);
font-size: var(--fs-para);
line-height: 1.6;
}
a {
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
padding: 1.25em;
display: inline-block;
width: 100%;
text-align: center;
transition:all .5s;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header);
margin: 0;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* img {
max-width: 100%;
width: 100%;
height: auto;
} */
/************************************************
3. #Typography
************************************************/
/* Navigation Bar & Hero Section*/
.bg-hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--clr-blue);
transition: .5s;
}
.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-right: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__list {
right: -100%;
opacity: 0;
}
.open{
right: 0;
opacity:1;
}
#media screen and (max-width: 48em) {
.nav__list {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 80%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
z-index: var(--z-index);
flex-direction: column;
align-items: center;
justify-content: center;
transition: .2s;
opacity: 0;
}
}
html .open {
right: 0;
opacity:1;
}
.nav__link {
color: var(--clr-text);
font-weight: var(--fw-normal);
font-size: var(--fs-lg-para);
}
.nav__link:hover {
color: var(--clr-purple);
}
.shopping-cart {
margin-right: 2em;
color: var(--clr-text);
}
.social__media {
display: flex;
justify-content: center;
align-items: center;
padding-left: 3em;
margin-top: 3em;
}
.sm__link {
background: var(--clr-text);
width: 2.7em;
height: 2.7em;
margin: 1em .625em;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.sm__link i {
transition: .1s linear;
}
.sm__link:hover i {
transform: scale(1.5);
}
.sm__facebook {
font-size: 1.5rem;
color: #4267b2;
}
.sm__twitter {
font-size: 1.5rem;
color: #1da1f2;
}
.sm__instagram {
font-size: 1.5rem;
color: #000;
}
.social__contact {
display: none;
}
/*****************************************************
4. #Components
*****************************************************/
/*4.1 Cart Basket*/
.cart-item {
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
border-radius: 50%;
padding: 1px 3px 2px;
}
/*4.2 Buttons*/
.btn-main {
display: inline-block;
width: 18em;
max-width: 100%;
height: 3em;
padding: .5em 1.25em;
border-radius: 1.563em;
margin-top: 2.5em;
background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
color: var(--clr-text);
font-weight: 600;
font-size: .88rem;
}
.fa-angle-right {
color: #ff7800;
background: var(--clr-text);
border-radius: 50%;
padding: .438em;
margin-right: -.938em;
}
.btn-main:focus,
.fa-arrow-right:focus {
color: var(--clr-primary);
opacity: 0.1;
}
.btn-main:hover,
.fa-arrow-right:hover {
color: var(--clr-primary);
}
/*4.3 Hamburger*/
.hamburger {
position: absolute;
cursor: pointer;
right: 2%;
top: 50%;
transform: translate(-5%,-50%);
z-index: var(--z-index);
}
.hamburger-btn {
width: 20px;
height: 3px;
background: var(--clr-text);
margin: .625em;
transition: all .5s ease-in-out;
}
.hamburger-btn::before,
.hamburger-btn::after {
content: '';
position: absolute;
width:20px;
height: 3px;
background: var(--clr-text);
border-radius: 5px;
transition: all .5s ease-in-out;
}
.hamburger-btn::before {
transform: translateY(-7px);
}
.hamburger-btn::after {
transform: translateY(7px);
}
.hamburger.open .hamburger-btn {
transform: translateX(-50px);
background: transparent;
}
.hamburger.open .hamburger-btn::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger.open .hamburger-btn::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<section class="bg-hero">
<nav class="navbar">
<img src="#" alt="#" class="#"><span>X&L Limited</span>
<ul class="nav__list">
<li class="nav__list-item"></li>
<li class="nav__list-item">Products</li>
<li class="nav__list-item">Our Story</li>
<li class="nav__list-item">Blog</li>
<li class="nav__list-item">Contact Us</li>
<div class="social__media">
<i class="fab fa-facebook-f sm__facebook"></i>
<i class="fab fa-twitter sm__twitter"></i>
<i class="fab fa-instagram sm__instagram"></i>
</div>
</ul>
<div>
<i class="fas fa-shopping-cart fa-lg shopping-cart"> <span class="cart-item">0</span></i>
</div>
<div class="hamburger">
<div class="hamburger-btn"></div>
</div>
</nav>
<div class="hero">
<div class="contentBox">
<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>
<a class="btn-main" href="#">View Our Products <i class="fas fa-angle-right fa-lg"></i></a>
</div>
</div>
</section>

Why is my modal opening on the bottom of page?

I have built a modal and inserted it into my code, however whenever I press the button that is supposed to open it up it goes to the bottom of the page. It is supposed to be on top of the rest of the page with a blurry bg, per say, but it just goes to the bottom of the page and it isn't even properly formatted. Here is an image.
Here is the code for that, the navbar and their css, and the modal js file.
https://repl.it/repls/GrubbyInsubstantialAutosketch
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<nav>
<div class="menu-center">
<input type="checkbox"id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="logo-solo.png" >
<ul>
<li><a href="#home" class="active" > Home</a></li>
<li><a href="#quem-somos" >Quem somos</a></li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
</ul>
</div>
</nav>
<script src="scroll.js"></script>
<script type="text/javascript">
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<div class="modal" id="modalContainer">
<div class="container" id="myModal">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
</body>
Here is my css file, that has both the navbar and the modal code.
/*I could not add the justify content tag, it made my navbar disappear, this is my navbars css*/
body {
overflow-x: hidden;
display: flex;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
nav {
height: 10vh;
background: #05031b;
opacity: 0.85;
transition: all 0.5s ease;
font-family: "Montserrat", sans-serif;
z-index: 1;
position: fixed;
width: 100%;
}
nav img {
height: 80px;
width: 80px;
margin-left: 5vh;
margin-top: 11px;
}
.social-media-icons {
position: absolute;
top: 10vh;
left: 0;
font-size: 8vh;
margin-right: 5vh;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #05031b;
color: white;
margin-top: 0px;
font-size: 40px;
}
.fa-instagram {
background: #05031b;
color: white;
top: 0;
font-size: 50px;
margin-right: 5vh;
}
nav ul{
float: right;
margin-right: 10px;
margin-top: 20px;
}
nav ul li{
display: inline-block;
line-height: 50px;
margin: 5px 50px;
font-family: "Montserrat", sans-serif;
}
nav ul li a{
position: relative;
color: white;
font-size: 14px;
padding: 5px 6px;
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
}
nav ul li a:before{
position: absolute;
content: '';
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgb(220,52,52);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s linear;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: left;
font-family: "Montserrat", sans-serif;
}
nav ul li a:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
nav .active a:hover {
color: rgb(220,52,52);
}
nav .active a {
color: rgb(220,52,52);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul {
margin: 0 0 0 0;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li a{
padding: 32px 40px;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
#menu-center ul li {
list-style: none;
margin: 0 0 0 -4px;
display: inline;
color: rgb(220,52,52);
font-family: "Montserrat", sans-serif;
}
.active, #menu-center ul li a:hover {
font-size: 14px;
color: rgb(220,52,52);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.12);
}
a {
color: rgb(220,52,52);
}
#quem-somos {
color: rgb(220,52,52);
}
.cta {
padding: 9px 18px;
background-color: rgb(220,52,52);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
right: 0;
margin-left: 20px;
text-decoration: none;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
label #btn,
label #cancel{
color: red;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
/*This is the modals css*/
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.modal {
position: fixed; /* position it so that fills the screen, but doesn't move with it */
top: 0; /* position this element at the top... */
left: 0; /* ...left corner of the page... */
width: 100%; /* ...and set both the width */
height: 100%; /* ...and height to 100%, so that the element fills the entire page */
z-index: 99999; /* set the z-index to a high enough number so that this element is positioned on top of all other elements */
background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it */
/* The following simply centers the modal within this container */
display: flex;
justify-content: center;
align-items: center;
}
Now this is the modal.js, what controls the modals functions.
//Get the modal
var modal = document.getElementById("myModal");
var modal_container = document.getElementById("modalContainer")
modal_container.style.display = "none";
window.onclick = function (event) {
console.log(event.target)
if(event.target.id == "myBtn") {
modal_container.style.display = "flex"
}
else if (modal !== event.target && !modal.contains(event.target)) {
modal_container.style.display = "none";
}
}

You set an event handler for all links with href starting with '#' to scroll smoothly into view, but the href of the button that activates your modal windows is "#ex1". There is no "ex1" section in the document, which causes the script error.
A quick solution is to remove "#ex1" from the href attribute.
<a class="cta" rel="modal:open" href="" key="login" id="myBtn">Acessar</a>

Give user ablity to click on images and upload their own picture

I have a profile page consisting of two people. I want users to be able to click on one of two images and upload their own image to one of the image frames
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>
<textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</p>
</figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Proffession</textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>
<textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>
</div>
</main>

Use label and hide the upload button
<form id='form' method='post' action='/'>
<label for='img1'>
<input id='img1' type='file' style='display: none;' />
<img id='img1_preview' src='' />
</label>
<input type='submit' value='Update' />
</form>
When you click the img, which also click on the label it will automatically trigger the input file which will pop up the upload image window, click on the submit to submit the form. It is better to use JS to capture the image and upload it using ajax though, will be more responsive.

use this code to choose a image and onclick submit button you need to process it with your baground
<form >
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>

We Keep Coding

JavaScript is the programming language of the Web.

Animation in html/css/js [duplicate] - javascript

Related

Links in footer wont display inline

Why are these input and text parts on the right side, if they supposed to be on the center?

Toggle Hamburger Menu Javascript

Why is my modal opening on the bottom of page?

Give user ablity to click on images and upload their own picture

Categories

Resources