We Keep Coding

content shows off while scrolling in responsive hambuger responsive

I was finishing up creating this page using html and css after finishing up i was just checking the navigation menu in a mobile view and while scrolling down the menu the content of the page shows off and menu goes down and the content shows off
I want content not be shown while scrolling or not scrolling in the hamburger menu
code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999;
/** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42;
/** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>

You could use JS to disable scroll when the menu shows up and enable when it's closed. Although, I don't understand why you wanted to use checkbox input for closing the menu. you could handle scrollbar like this
HTML
<label for="click" class="menu-btn" onclick={disableScroll()}>
<i class="fas fa-bars"></i>
</label>
<label for="click" class="close-btn" onclick={enableScroll()}>
<i class="fa-solid fa-xmark"></i>
</label>
Javascript
<script>
const disableScroll = () =>{
document.body.style.height = "100%";
document.body.style.overflow = "hidden";
document.querySelector("menu-btn").style.display = "none"
document.querySelector("close-btn").style.display = "block"
}
const enableScroll = () =>{
document.body.style.overflow = "auto";
document.querySelector("menu-btn").style.display = "block"
document.querySelector("close-btn").style.display = "none"
}
</script>

Responsive Navigation Transition not working

I cannot get my ease-in transition to work on the navigation bar.
On Mobile when you click the burger, I would like a simple transition sliding in from right to left.
I tried using translateX (0%, 100%) instead of display (none, flex).
I feel like i am missing/forgetting something really simple.
What am I doing wrong / forgetting?
Github Repo_branch
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 850px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.5s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

First, transition has no effect on changing display properties.
It's a good idea to use the transform parameter for example below:
Then a slide-down effect can be achieved.
Demo:
// Js waits to run until after DOM is loaded
document.addEventListener("DOMContentLoaded", ready);
function ready() {
console.log('DOM is ready');
toggleMenu();
}
function toggleMenu() {
console.log("script is imported and executed");
// Navigation opt4 - using eventlisteners and inline styling.... - works but very fucking ugly piece of code and unnecessary complicated
const navLinks = document.querySelector('.nav-links');
const burgerToggle = document.querySelector('#burger');
burgerToggle.addEventListener('click', show);
function show() {
burgerToggle.classList.toggle('toggle');
navLinks.classList.toggle('nav-links_active')
}
function close() {
navLinks.classList.toggle('nav-links_closed')
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow: hidden;
background-color: black;
}
.container {
max-width: 1368px;
margin: 0 auto;
padding: 1rem 2rem;
}
button {
border: none;
outline: none;
cursor: pointer;
padding: 0.75rem 1rem;
margin: 0 1rem;
border-radius: 6px;
background: transparent;
border: 2px solid white;
color: white;
font-weight: 500;
}
* {
font-family: Helvetica, sans-serif;
}
/* Link styling */
a {
text-decoration: none;
font-size: 1rem;
}
/* NAVIGATION */
.navbar {
min-height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 2.25rem;
color: white;
font-weight: 700;
}
/* Nav Links styling */
.nav-links {
display: flex;
align-items: center;
}
.nav-links li {
list-style-type: none;
}
.nav-links a {
color: white;
margin: 0 1.25rem;
position: relative;
}
.nav-links a.active {
text-decoration: underline;
font-weight: bold;
}
#media (max-width: 3000px) {
.burger {
cursor: pointer;
position: relative;
display: block!important;
z-index: 11;
font-size: 3rem;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
button {
border-color: black;
color: black;
padding: 0.75rem 1.5rem;
}
.nav-links a {
color: black;
}
.nav-links {
display: flex;
transform: translate3d(0, -100%, 0);
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 100px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
z-index: 10;
transition: 0.3s ease-in;
}
.nav-links_closed {
display: none;
}
.nav-links_active {
display: flex;
transform: translate3d(0, 0, 0);
}
/* Toggle styling */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
background-color: black;
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
background-color: black;
}
}
<body>
<div class="container">
<nav class="navbar">
<p class="logo">LOGO</p>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<button>Sign In</button>
<button>Sign Up</button>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</body>

My href attribute in my dropdown menu list is not working

I'm trying to create a dropdown menu list for my website that I'm working on my own. While I was making a dropdown list for my website, I ran into some problems. When I try to click one of the list in my dropdown menu, it doesn't head or open to the page where the href attribute is referencing it to. The same goes to all of my lists in my dropdown menu. How can I solve this problem so that my href links will work for each of my list?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>

Your problem is pointer-events, specifically pointer-events:all, which is experimental and only applies to SVG anyway. Use pointer-events:auto instead.
Also as John mentioned in his answer, you are going to get race conditions on click of another element like a link with the use of focus on the button. Your overall approach to this should be reconsidered.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: flex;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
opacity: 0;
/*pointer-events: none;*/
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover {
background: #c6c0dd;
}
.dropdown button {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.dropdown button:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.brands button:focus+ul,
.sneakers button:focus+ul,
.gears button:focus+ul {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<button>BRANDS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="sneakers">
<button>SNEAKERS</button>
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</div>
<div class="gears">
<button>GEAR & APPAREL</button>
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</div>
</div>
</nav>

The issue comes from your css . Remove this line pointer-events: none;
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible

Your issue is with using focus to display your dropdown menu. The moment you click away from your button, i.e. you click your link on your menu, it is no longer in focus and thus your dropdown menu disappears. I would recommend using an onclick function or using a checkbox instead of a button to achieve what you want.
Here's an example using the checkbox method.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Bebas Neue', cursive;
font-weight: 600;
font-size: 30;
background-color: #5D5C61;
background-size: cover;
}
.dropdown {
position: absolute;
height: 9%;
width: 100%;
top: 0%;
background: #C5C6C7;
display: flex;
justify-content: space-around;
align-items: center;
}
.dropdown h2 {
font-size: 60;
position: relative;
left: 30px;
top: 3;
padding: 0px;
}
.brands,
.sneakers,
.gears {
position: relative;
}
.brands ul,
.sneakers ul,
.gears ul {
position: absolute;
top: 155%;
background: #C5C6C7;
margin-top: 18px;
width: 200px;
height: 210px;
display: none;
overflow: hidden;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
font-weight: lighter;
transform: translateY(-10px);
transition: all 0.4s ease;
}
.brands a,
.sneakers a,
.gears a {
color: black;
text-decoration: none;
}
.brands li,
.sneakers li,
.gears li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.brands li:hover,
.sneakers li:hover,
.gears li:hover, .box:hover {
background: #c6c0dd;
}
.box {
background: none;
border: none;
color: black;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
.box:hover {
color: grey;
}
.dropdown h2 a {
color: black;
text-decoration: none;
}
.box input {
display: none;
}
.box input:checked +ul{
display: flex;
pointer-events: all;
transform: translateY(0px);
}
.brands button {
position: relative;
left: 53px;
}
.sneakers button {
position: relative;
left: 48px;
}
.gears button {
position: relative;
left: 10px;
}
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script>
<nav>
<div class="dropdown">
<h2>RBZ</h2>
<div class="brands">
<label class="box">BRANDS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="sneakers">
<label class="box">SNEAKERS
<input type="checkbox" >
<ul>
<li>NIKE</li>
<li>ADIDAS</li>
<li>JORDAN</li>
</ul>
</label>
</div>
<div class="gears">
<label class="box">GEAR & APPAREL
<input type="checkbox" >
<ul>
<li>BACKPACK</li>
<li>CLOTHES</li>
<li>ACCESSORIES</li>
</ul>
</label>
</div>
</div>
</nav>

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>

save user input to database using contenteditable

I have a profile page consisting of two people. I want users to be able to edit the name section, job title, and description and store the data into a database, but im running into issues doing that with "contenteditable" tag.
Also I would like for users to be able to click the pictures and have the ability to change the image and save to database.
: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);
}
}
/*
The following code will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.
*/
#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">
<h1 contenteditable="true">janedoe_</h1>
<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>
<h3 contenteditable="true">Stuart <span>White</span></h3>
<h2><p contenteditable="true">I suppose if we couldn't laugh at things that don't make sense, we couldn't react to a lot of life.</h2></p>
</figcaption><img class="image1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" />
<div class="position"><h3 contenteditable="true">Web Designer</div></h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<h3 contenteditable="true">Diana <span>Reed</span></h3>
<h2> <p contenteditable="true">The only skills I have patience to learn are those that have no real application in life.</h2></p>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position"><h3 contenteditable="true">Sales Manager</div></h3>
</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>