save user input to database using contenteditable

save user input to database using contenteditable - javascript

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>

Related

Using browser native "back" button to close a modal window with JS

I have created several windows modal on my site which works perfectly on desktop. I would like to improve the user experience on mobile, by allowing the user to leave the modal window by clicking on the native "back" button of the mobile browser.
I've done some research on the web, and most of the time I find answers for React, or with libraries I don't use.
Do you have any idea how to make this possible in vanilla Javascript?
Thanks a lot for your help, here is the fiddle of my code
setupWaitingListModal();
function setupWaitingListModal() {
let waitingListLink = document.querySelector("#waitingList");
let waitingListModal = document.querySelector("#waitingListModal");
let waitingListCloseButton = document.querySelector('#waitingListCloseButton');
function toggleWaitingListModal() {
waitingListModal ? waitingListModal.classList.toggle("show-modal") : null;
body.classList.toggle("noscroll");
}
if (waitingListLink) {
waitingListLink.addEventListener("click", toggleWaitingListModal);
}
if (waitingListCloseButton) {
waitingListCloseButton.addEventListener('click', toggleWaitingListModal)
}
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-family: "Circular Std";
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth !important;
}
body {
height: 100vh;
margin: 0;
background-color: white;
}
b {
font-weight: bold !important;
display: contents;
}
.primary-color {
color: #3ce7e3 !important;
}
.primary-color-dark {
color: #009aae !important;
}
.dark-grey {
color: #7384a7 !important;
}
.black {
color: #002832;
}
.dark-black {
color: black !important;
}
.width-100 {
width: 100% !important;
}
.padding-0 {
padding: 0 !important;
}
.padding-bottom-0 {
padding-bottom: 0 !important;
}
.padding-top-2 {
padding-top: 2rem;
}
.padding-top-10 {
padding-top: 10rem !important;
}
.padding-bottom-10 {
padding-bottom: 10rem !important;
}
.margin-left-1 {
margin-left: 1rem;
}
.margin-right-1 {
margin-right: 1rem;
}
.margin-top-1 {
margin-top: 1rem;
}
.margin-bottom-1 {
margin-bottom: 1rem;
}
.margin-left-2 {
margin-left: 2rem;
}
.margin-right-2 {
margin-right: 2rem;
}
.margin-top-2 {
margin-top: 2rem;
}
.margin-bottom-2 {
margin-bottom: 2rem;
}
.margin-top-4 {
margin-top: 4rem;
}
.margin-bottom-4 {
margin-bottom: 4rem;
}
.margin-top-6 {
margin-top: 6rem;
}
.margin-bottom-6 {
margin-bottom: 6rem;
}
.padding-bottom-8 {
padding-bottom: 8rem;
}
.padding-top-8 {
padding-top: 8rem;
}
.app-right-left-padding {
padding: 0 11.5%;
}
.font-weight-unset {
font-weight: unset !important;
}
.header-section {
padding-bottom: 4rem;
}
.banner {
background: #D7FFFE;
border-radius: 20px;
padding: 6px 0px;
color: #009AAE;
line-height: 20px;
width: 100%;
}
.error {
color: #d92f45;
display: flex;
padding-top: 8px;
}
.noscroll {
overflow: hidden;
}
.text-font-30 {
font-weight: bold;
font-size: 30px;
line-height: 36px;
letter-spacing: 0.3px;
}
.text-font-24 {
font-weight: bold;
font-size: 24px;
line-height: 30px;
letter-spacing: 0.3px;
}
.text-font-16 {
font-weight: normal;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.3px;
}
/* required for wordpress START */
.max-width-100 {
max-width: 100% !important;
}
.site-info {
display: none;
}
.site-main {
margin: 0 !important;
padding: 0 !important;
}
#colophon {
display: none;
}
.cli-plugin-button {
border-radius: 8px !important;
}
#bitnami-banner {
display: none;
}
/* Cookie modal CSS override */
.cli-modal .cli-modal-close:hover {
background-color: rgb(0, 154, 174) !important;
}
.cli-tab-footer .wt-cli-privacy-accept-btn {
background-color: rgb(0, 154, 174) !important;
border-radius: 8px !important;
}
.cli-tab-footer .wt-cli-privacy-accept-btn:hover {
color: #ffffff !important;
}
.cli-switch input:checked + .cli-slider {
background-color: rgb(0, 154, 174) !important;
}
/* Cookie modal CSS override ends here*/
/* required for wordpress END */
header {
position: fixed;
display: flex;
align-items: center;
width: 100%;
height: 100px;
left: 0px;
top: 0px;
z-index: 9999999;
background: white;
}
.waiting-list-section {
padding-top: 15px;
}
.header-content {
padding: 0 11.5%;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
width: 100%;
justify-content: space-between;
}
.header-content .logo img {
height: 30px;
}
.logo-mobile {
visibility: hidden;
}
.header-content .menu-section {
display: flex;
flex-direction: row;
text-align: center;
align-items: center;
width: 100%;
justify-content: space-between;
margin-top: 15px;
}
.header-content .menu-section .link .current_page_item > a {
color: #3ce7e3;
}
.header-second-part {
width: 100%;
}
.third-part-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.language-button {
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
border: 0.5px solid #D4DAE6;
box-sizing: border-box;
border-radius: 20px;
padding: 3px 8px 3px 23px;
}
.Language {
display: none;
}
.lang-item {
list-style: none;
padding-right: 4px;
font-weight: bold;
font-size: 16px;
line-height: 20px;
padding-left: 5px;
border: none;
padding-top: 0;
}
.lang-item-first {
border: none;
}
.lang-item.current-lang {
display: none;
}
/* .header-content .menu-section .link {
margin-left: 3rem;
} */
/* New waiting list page ends here */
/* Dropdown menu starts here */
font-family: 'circular-std-book';
font-weight: bold;
color: #002832;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-family: 'circular-std-book';
}
.columns-2 {
max-width: 730px;
margin-top: 3rem;
}
.blog-page-title {
padding-top: 10rem;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 60px;
letter-spacing: 0.3px;
color: #002832;
text-align: left;
max-width: 1110px;
margin: 0 auto;
}
.page-numbers {
margin-right: 10px;
}
.blog-page-subtitle {
font-size: 24px;
line-height: 30px;
letter-spacing: 0.3px;
color: #002832;
text-align: left;
max-width: 1100px;
margin: 2rem auto 0 auto;
border-bottom: 1px solid;
padding-bottom: 2rem;
}
.navigation .nav-links {
display:flex;
justify-content: center;
}
.pagination .nav-links > *:last-child {
margin-right: 5px;
margin-left: 5px;
}
.pagination .nav-links > * {
margin-right: 10px;
margin-left: 10px;
}
.pagination .nav-links > *.next {
margin-left: 0;
}
.pagination .nav-links > *.prev {
margin-right: 0;;
}
.wp-post-image {
border-radius: 20px;
width: 100%;
}
.authored-by {
padding-left: 20px;
color: #3c3d3e;
line-height: 28px;
font-size: 16px;
letter-spacing: -0.3px;
text-align: right;
}
.author {
font-size: 12px;
color: #009AAE;
}
.posted-on {
font-size: 11px;
line-height: 15px;
letter-spacing: -0.3px;
color: #7384A7;
border: 0.5px solid #D4DAE6;
box-sizing: border-box;
border-radius: 20px;
padding: 6px 12px 6px 12px;
margin-right: 10px;
}
.entry-date {
line-height: 15px;
letter-spacing: -0.3px;
color: #7384A7;
}
.span-reading-time {
font-size: 11px;
line-height: 15px;
letter-spacing: -0.3px;
color: #7384A7;
border: 0.5px solid #D4DAE6;
box-sizing: border-box;
border-radius: 20px;
padding: 6px 12px 6px 12px;
margin-right: 10px;
}
.type-post > .authored-by {
display: flex;
justify-content: flex-end;
font-size: 16px;
}
.tag-container {
padding-top: 5px;
}
.post-attribute {
position: absolute;
margin-top: 0;
bottom: 0;
display: flex;
flex-direction: row;
}
.excerpt-wrapper .entry-content > p {
font-size: 16px;
}
.post-attribute-page {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 720px;
margin: 0 auto;
padding: 0 10px;
}
.mytag {
font-size: 11px;
line-height: 15px;
letter-spacing: -0.3px;
color: #7384A7;
border: 0.5px solid #D4DAE6;
box-sizing: border-box;
border-radius: 20px;
padding: 6px 12px 6px 12px;
background: #F2F4F8;
margin-right: 10px;
}
.button-redirection {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
line-height: 22px;
text-align: right;
letter-spacing: 0.3px;
color: #002832;
border: 1px solid #002832;
box-sizing: border-box;
border-radius: 10px;
padding: 12px 8px 13px 12px;
width: 200px;
margin: 0 auto;
}
.more-info-img {
vertical-align: bottom;
}
.vector {
vertical-align: middle;
}
#waitingListCloseButton {
cursor: pointer;
}
.waiting-list-modal-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 1.5rem 2rem 1.5rem;
width: 790px;
border-radius: 20px;
box-shadow: 2px 2px 10px rgb(221 227 240 / 70%);
}
.waiting-list-modal-header {
text-align: end;
}
.modal-form-title {
max-width: 380px;
text-align: left;
}
#nameInput7,
#emailInput7,
#nameInput8,
#emailInput8
{
width: 100%;
margin: 6px 0;
}
.modal-form-container {
text-align: left;
margin: auto 0;
}
.first-part-modal {
display: flex;
justify-content: space-between;
}
.form-modal {
padding: 26px 0 0;
}
.bonusprogram-modal {
max-width: 730px;
padding: 1.5rem;
text-align: left;
background: #F2F4F8;
border-radius: 20px;
font-size: 16px;
line-height: 20px;
align-items: center;
letter-spacing: -0.3px;
color: #009AAE;
margin-top: 1.5rem;
}
#media (max-width: 800px) {
.waiting-list-modal-box {
width:400px;
}
.first-part-modal {
flex-direction: column;
}
.modal-form-title {
text-align: center;
padding: 1.5rem 0 0 0;
}
}
/* CSS for modals ends here */
#media only screen and (min-width: 652px) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 700px);
}
}
/* Blog Page styles ends here */
/* CSS for mobile screens */
/* CSS for mobile screens ends here */
/* CSS for modals starts here */
#waitingList, #waitingListEn {
color: #009AAE;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #7384a7;
opacity: 0;
visibility: hidden;
z-index: 999999999;
max-width: 100% !important;
margin: 0;
}
.modal-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 1.5rem 2rem 3rem;
width: 60%;
border-radius: 20px;
box-shadow: 2px 2px 10px rgba(221, 227, 240, 0.7);
}
.close-button {
width: 1rem;
height: 1rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
color: #7384a7;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1);
overflow-y: scroll;
background-color: rgba(115, 132, 167, 0.9);
}
.modal-header {
height: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
font-size: 30px;
}
.modal-header h1 {
font-style: normal;
font-weight: bold;
font-size: 30px;
letter-spacing: 0.3px;
color: #002832;
}
.modal-content {
border-top: 1px solid #7e8fb0;
padding-top: 1.5rem;
}
.modal-graph-exp {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.3px;
color: #002832;
padding: 1rem 1rem 2rem 1rem;
}
.modal-graph-warn {
font-size: 16px;
line-height: 20px;
letter-spacing: -0.3px;
color: #002832;
background: #F2F4F8;
border-radius: 10px;
padding: 1rem;
}
.modal-content .content-with-two-section {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 !important;
}
.modal-content .content-with-two-section .left-content-with-image {
width: 35%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content .content-with-two-section .right-content-with-text {
width: 60%;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.3px;
color: #002832;
}
.modal-content .content-with-two-section p {
margin-bottom: 1rem;
}
.modal-content .content-with-two-section ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.modal-content .content-with-two-section ul li {
list-style: disc;
}
#media (max-width: 502px) {
<a id="waitingList">modal</a>
<div class="modal" id="waitingListModal">
<div class="waiting-list-modal-box">
<div class="waiting-list-modal-header">
<img src="x.svg" id="waitingListCloseButton" alt="close">
</div>
</div>
</div>
thank you very much.

You could use the History API for this, i.e. the window.onpopstate event handler in combination with window.history.pushState():
function showDialog() {
window.history.pushState({ isPopup: true }, 'Some Title');
// Place code here / add CSS class
}
function hideDialog() {
// Place code here / remove CSS class
}
// Call this function in order to close the dialog via the button -
// it will invoke the "onpopstate" event handler
function closeDialog() {
window.history.back();
}
window.addEventListener('popstate', event => {
if (event.state?.isPopup) {
hideDialog();
}
});

How do I make this nav bar logo responsive?

How do I make the nav bar logo resize properly and how do I fix the hamburger menu? I have tried to apply a media query to the nav bar logo and this does not seem to work...how to I make this nav bar logo responsive? It shrinks when I look at it on mobile. Also how do I fix the javascript void issue and fix the hamburger menu? Thanks in advance.
code:
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive_nav";
} else {
x.className = "topnav";
}
width: 20%;
height: 20%;
align-self: flex-start;
padding-top: 5px;
}
#media screen and (max-width: 900px) {
#home {
margin-top: 100px;
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive_nav {
position: relative;
}
.topnav.responsive_nav a.icon {
position: absolute;
right: 0;
top: 0;
left: 15px;
}
.topnav.responsive_nav a:not(:first-child) {
float: none;
display: block;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: white !important;
margin: 10px 0 0 0;
padding: 10px 0 !important;
background-color: #0F0F0F;
transition: 0.5s;
border: 3px solid #1F1F1F;
}
.topnav.responsive_nav a:hover {
background-color: rgba(27, 29, 32, 0.15);
}
.lang {
align-self: flex-start;
padding-top: 10px;
}
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.2vw;
/*updated*/
font-family: calibri;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
padding: 0.3vw 2vw;
/*updated*/
background-color: #F4F7FF;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05);
z-index: 10;
}
nav a {
text-decoration: none;
color: #010b0a
}
/*nav ul{ list-style-type: none; }*/
nav div a {
float: left;
padding: 5px 10px;
}
nav div a:hover {
background-color: #0ee4cc;
/*added*/
}
nav div a:hover {
color: #F4F7FF;
/*added*/
}
#media(max-width:900px) {
.toggle span {
display: block;
width: 25px;
height: 3px;
background-color: black;
margin: 6px 0;
}
.toggle:before {
font-family: calibri;
line-height: 0px;
margin-left: -30px;
}
/*nav ul{ position:absolute; width: 100%; height:auto; box-sizing:border-box; background-color:#0F0F0F; top: 50px; left: 0; transition: 0.5s; overflow: hidden; display: none !important; border:3px solid #1F1F1F; padding:0px; margin:0px; } */
/*nav ul li a{ border-bottom: 1px solid rgba(255,255,255,0.10) ; color:#ffffff !important; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0px !important; padding: 0px !important; }*/
.active-menu {
display: block !important;
}
/*nav ul li a:hover{ background-color:rgba(27,29,32,0.15); }*/
#media screen and (max-width: 900px) {
#home {
margin-top: 100px;
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive_nav {
position: relative;
}
.topnav.responsive_nav a.icon {
position: absolute;
right: 0;
top: 0;
left: 15px;
}
.topnav.responsive_nav a:not(:first-child) {
float: none;
display: block;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
color: white !important;
margin: 10px 0 0 0;
padding: 10px 0 !important;
background-color: #0F0F0F;
transition: 0.5s;
border: 3px solid #1F1F1F;
}
.topnav.responsive_nav a:hover {
background-color: rgba(27, 29, 32, 0.15);
}
.lang {
align-self: flex-start;
padding-top: 10px;
}
}
#media(max-width:900px) {
.toggle span {
display: block;
width: 25px;
height: 3px;
background-color: black;
margin: 6px 0;
}
.toggle:before {
font-family: calibri;
line-height: 0px;
margin-left: -30px;
}
/*nav ul{ position:absolute; width: 100%; height:auto; box-sizing:border-box; background-color:#0F0F0F; top: 50px; left: 0; transition: 0.5s; overflow: hidden; display: none !important; border:3px solid #1F1F1F; padding:0px; margin:0px; } */
/*nav ul li a{ border-bottom: 1px solid rgba(255,255,255,0.10) ; color:#ffffff !important; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0px !important; padding: 0px !important; }*/
.active-menu {
display: block !important;
}
/*nav ul li a:hover{ background-color:rgba(27,29,32,0.15); }*/
.p-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
height: auto;
}
.c-b-heading {
font-size: 1.4rem;
text-align: center;
}
#contact-form {
padding: 20px;
height: auto;
box-sizing: border-box;
}
#contact-form form {
flex-direction: column;
height: auto;
padding: 20px;
width: 90% !important;
}
.contact-left,
.contact-right {
width: 100%;
border: none;
}
.f-name,
.f-email {
width: 100%;
}
.f-name input,
.f-email input {
width: 100%;
border: none;
background-color: #262626 !important;
padding: 10px;
box-sizing: border-box;
height: 40px;
}
textarea {
background-color: #262626 !important;
margin: 10px 0px;
padding: 10px;
height: 200px !important;
width: 100% !important;
}
.message {
margin: 0px;
}
#contact-form form h1 {
margin: 5px 0px;
}
}
<nav>
<img src="logo.png" alt="Nature" class="responsive">
<div class="topnav" id="myTopnav">
<a href="javascript:void(0);" class="icon" onclick="toggleFunction()">
<div class="toggle"><span></span><span></span><span></span></div>
</a>
home
About
Services
ProjectsContact
<a href="javascript:void(0);" class="icon" onclick="toggleFunction()">
</div>
<!--language--><a class="lang">En</a>
</nav>

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>

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>

How do I push the (underneath) container down once my "Read More" button has expanded?

I like what I've created here and the functionality / Action works to my liking. What I've had to do though, is apply a height to the red container (id="greeting")to allow the expanded text to fit nicely upon expansion. It therefore leaves an ugly amount of space below the button when I'd like the "Read More" button state to be flush against the underneath container (id="skills"). Objective: to push the #skills container down when clicking the Read More Button.
var i = 0;
function read() {
if (!i) {
document.getElementById('more').style.display = 'inline';
document.getElementById('dots').style.display = 'none';
document.getElementById('read').innerHTML = 'Read Less';
i = 1;
} else {
document.getElementById('more').style.display = 'none';
document.getElementById('dots').style.display = 'inline';
document.getElementById('read').innerHTML = 'Read More';
i = 0;
}
}
#import url("https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Open+Sans:wght#600;700&display=swap");
.container {
max-width: 1280px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-container {
max-width: 800px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-btn {
width: 40%;
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.contact-btn:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.btn-light {
background-color: #f7f7f5;
color: #082449;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.btn-light:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
.btn-dark {
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 1rem;
border: none;
}
.btn-dark:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.t-center {
text-align: center;
}
.lead {
text-align: center;
}
.bottom-line {
border: 1px solid #f43d56;
width: 80px;
margin: 2rem auto;
}
.py-1 {
padding: 1rem 0rem;
}
.py-2 {
padding: 2rem 0rem;
}
.py-3 {
padding: 3rem 0rem;
}
.py-4 {
padding: 4rem 0rem;
}
.my-1 {
margin: 1rem 0rem;
}
.my-2 {
margin: 2rem 0rem;
}
.my-3 {
margin: 3rem 0rem;
}
.my-4 {
margin: 4rem 0rem;
}
.items {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.item {
position: relative;
background: #f43d56;
overflow: hidden;
}
.item::after {
content: '';
position: absolute;
display: block;
background: inherit;
opacity: 0.9;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2) translateX(-75%) translateY(-75%);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.item:hover:after {
transform: scale(2);
}
.item:hover .item-text {
opacity: 1;
transform: translateY(0);
}
.item-image {
height: auto;
transform: translateZ(0);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
display: block;
}
.item-image::before {
content: '';
display: block;
padding-top: 55%;
overflow: hidden;
}
.item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
line-height: 0;
}
.item-text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
text-align: center;
z-index: 1;
color: #f7f7f5;
transform: translateY(-20%);
transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
transition-delay: 200ms;
}
.item-text-wrap {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.item-text-title {
font-size: 2rem;
padding: 0 1rem;
margin: 5px 0 0 0;
}
.item-text-category {
text-transform: uppercase;
font-size: 1.3rem;
opacity: 0.8;
}
.item .item-button {
margin-top: 1.5rem;
}
.item .item-button:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
#skills {
margin: -7rem 0 0 0;
}
#skills .cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background-color: #f7f7f5;
border-radius: 10px;
}
#skills .card:first-of-type {
border-right: 1px solid #ccc;
padding: 1rem;
}
#skills .card {
padding: 1rem;
}
#skills .skill-list h2 {
color: #f43d56;
}
#skills i.fa-3x {
margin-top: 2rem;
color: #f43d56;
}
#skills ul {
display: flex;
justify-content: center;
align-items: center;
}
#skills li {
padding: 0.5rem;
margin-right: 0.5rem;
}
#skills h2 {
padding: 1rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #f7f7f5;
font-family: 'Lato', sans-serif;
line-height: 1.8;
letter-spacing: 1.3px;
font-weight: 300;
color: #082449;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#logo {
width: 70px;
height: 70px;
margin-left: 4rem;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 1rem;
margin: 0 3rem;
background-color: #f7f7f5;
}
#main-nav ul {
display: flex;
}
#main-nav li {
padding: 1rem 1.5rem;
}
#main-nav a {
color: #082449;
border: 1px solid #f43d56;
border-radius: 4px;
padding: 0.5rem 2rem;
}
#main-nav a:hover {
background-color: #f43d56;
color: #f7f7f5;
transition: ease 0.4s;
}
#showcase {
flex-direction: column;
display: flex;
height: 60vh;
align-items: center;
background-color: #f7f7f5;
}
#showcase h1 {
padding: 1rem;
margin-top: 3rem;
}
#showcase p {
font-size: 1.3rem;
}
#showcase img {
width: 100%;
}
#greeting {
background-color: #f43d56;
color: #f7f7f5;
height: 70vh;
}
#greeting h1 {
padding: 1rem;
margin-top: 3rem;
font-size: 32px;
}
#greeting p {
margin: 1rem auto;
max-width: 800px;
text-align: center;
}
#greeting #more {
display: none;
}
#greeting .btn-light {
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
}
#contact-a h3 {
margin-top: 10%;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name email' 'subject phone' 'message message';
grid-gap: 1rem;
margin: 3rem 0 2rem 0;
}
#contact-a .text-fields .name-input {
grid-area: name;
}
#contact-a .text-fields .subject-input {
grid-area: subject;
}
#contact-a .text-fields .email-input {
grid-area: email;
}
#contact-a .text-fields .phone-input {
grid-area: phone;
}
#contact-a .text-fields .message-input {
grid-area: message;
height: 100px;
}
#contact-a .text-fields .text-input {
padding: 0.3rem 0.6rem;
border: solid 1px #ccc;
border-radius: 4px;
}
#contact-a .contact-container .btn-dark {
display: flex;
flex-direction: column;
margin: auto;
width: 30%;
text-align: center;
}
#contact-b .contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
margin: 0 0 4rem 0;
}
#main-footer {
background: #082449;
color: #f7f7f5;
height: 5rem;
}
#main-footer .footer-content {
display: flex;
justify-content: space-evenly;
height: 5rem;
align-items: center;
font-size: 0.8rem;
}
#main-footer .social .fab {
color: #f7f7f5;
margin-right: 1.5rem;
border-radius: 50%;
padding: 0.5rem;
font-size: 1.3rem;
text-align: center;
}
#main-footer .social .fab:hover {
background: #f43d56;
}
#media (max-width: 1300px) {
#showcase {
min-height: 100vh;
position: relative;
}
#greeting {
height: 90vh;
}
}
#media (max-width: 800px) {
#showcase {
min-height: 50vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#work-a .item-text-title {
font-size: 1.2rem;
padding: 1rem;
}
#work-a .item-text-category {
font-size: 1rem;
margin-top: 1rem;
}
#greeting {
height: 65vh;
}
#greeting .container {
padding: 0 2rem;
}
#skills .cards {
grid-template-columns: 1fr 1fr;
width: 100%;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
}
/*===================PHONES==================================
============================================================*/
#media (max-width: 500px) {
#main-nav {
flex-direction: column;
align-items: center;
}
#main-nav #logo {
margin: 1rem 0;
}
#main-nav li {
padding: 1rem;
margin-top: 2rem;
}
#showcase {
height: 85vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase img {
width: 300px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting {
height: 140vh;
}
#greeting h1 {
font-size: 1.5rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .container {
padding: 0 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 0.5rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-category {
font-size: 0.9rem;
margin-top: 1.8rem;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
}
#main-footer .footer-content {
flex-direction: column-reverse;
font-size: 0.6rem;
padding-bottom: 1rem;
}
#main-footer .social .fab {
font-size: 1.2rem;
padding: 0 1rem;
margin: 1rem 0;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
grid-gap: 1rem;
margin: 2rem 0;
}
#contact-b .contact-info {
grid-template-columns: 1fr;
grid-row-gap: 1rem;
padding: 0;
}
}
#media (max-height: 500px) {
#showcase {
height: 85vh;
}
#showcase img {
width: 250px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting {
height: 190vh;
}
#greeting h1 {
font-size: 1.2rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 1rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
margin: 0.8rem 0;
}
}
<section id="greeting" class="rellax" data-rellax-speed="3">
<div class="container" data-rellax-speed="-1">
<h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
Hi, I'm Jon. Nice to meet you.
</h1>
<p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
><span id="more">
I also find WordPress Development to be engaging as well, especially
theme customization and incorporating raw coding techniques to
create a unique end product. My specialties include: Prototyping in
Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
the WordPress and Squarespace platforms. I have had the chance to
work with Firebase creating an original Blog and also the P5.js
library creating animated projects, games and data
visualization.</span
>
</p>
<button
type="button"
id="read"
class="btn-light t-center"
onclick="read()"
>
Read More
</button>
</div>
</section>
<!-- Section Skills -->
<section
id="skills"
class="t-center py-3 rellax"
data-rellax-xs-speed="2"
data-rellax-speed="1.5"
data-rellax-tablet-speed="0"
>
<div class="container">
<div class="cards">
<div class="card">
<div>
<i class="fas fa-code fa-3x"></i>
<h2>Frontend Developer</h2>
<p>
I aim for an original, clean and streamlined approach. I
especially enjoy coding from scratch and exploring new
techniques.
</p>
<div class="skill-list">
<h2>My Languages:</h2>
<ul>
<li>
<i class="fab fa-js"></i>
<p>javascript</p>
</li>
<li>
<i class="fab fa-react"></i>
<p>react</p>
</li>
<li>
<i class="fab fa-sass"></i>
<p>sass</p>
</li>
<li>
<i class="fab fa-node"></i>
<p>node.js</p>
</li>
<li>
<i class="fas fa-database"></i>
<p>firebase</p>
</li>
<li>
<i class="fas fa-file-code"></i>
<p>html5 / css3</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Developer Tools:</h2>
<ul>
<li>
<i class="fas fa-file-alt"></i>
<p>VS-Code</p>
</li>
<li>
<i class="fab fa-bootstrap"></i>
<p>Bootstrap</p>
</li>
<li>
<i class="fab fa-codepen"></i>
<p>Codepen</p>
</li>
<li>
<i class="fab fa-github"></i>
<p>Github</p>
</li>
<li>
<i class="fab fa-wordpress"></i>
<p>WordPress</p>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div>
<i class="fas fa-bezier-curve fa-3x"></i>
<h2>Graphic Design</h2>
<p>
I value simple content structure, clean design patterns, and
thoughtful interactions.
</p>
<div class="skill-list">
<h2>What I like to design:</h2>
<ul>
<li>
<i class="fab fa-sketch"></i>
<p>ux / ui</p>
</li>
<li>
<i class="fas fa-wifi"></i>
<p>web</p>
</li>
<li>
<i class="fas fa-mobile"></i>
<p>mobile</p>
</li>
<li>
<i class="fab fa-app-store-ios"></i>
<p>apps</p>
</li>
<li>
<i class="fas fa-bezier-curve"></i>
<p>logos</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Design Tools:</h2>
<ul>
<li>
<i class="fas fa-align-center"></i>
<p>Sketch</p>
</li>
<li>
<i class="fab fa-figma"></i>
<p>Figma</p>
</li>
<li>
<i class="fab fa-adobe"></i>
<p>Adobe Suite</p>
</li>
<li>
<i class="fas fa-drafting-compass"></i>
<p>Draw</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

Take off the fixed height of the #greeting and it does just that. It will expand with it's content
var i = 0;
function read() {
if (!i) {
document.getElementById('more').style.display = 'inline';
document.getElementById('dots').style.display = 'none';
document.getElementById('read').innerHTML = 'Read Less';
i = 1;
} else {
document.getElementById('more').style.display = 'none';
document.getElementById('dots').style.display = 'inline';
document.getElementById('read').innerHTML = 'Read More';
i = 0;
}
}
#import url("https://fonts.googleapis.com/css2?family=Lato:wght#300;400&family=Open+Sans:wght#600;700&display=swap");
.container {
max-width: 1280px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-container {
max-width: 800px;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
.contact-btn {
width: 40%;
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.contact-btn:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.btn-light {
background-color: #f7f7f5;
color: #082449;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 2rem;
border: none;
}
.btn-light:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
.btn-dark {
background-color: #082449;
color: #f7f7f5;
cursor: pointer;
border-radius: 4px;
padding: 0.5rem 1rem;
border: none;
}
.btn-dark:hover {
background-color: transparent;
border: 1px solid #082449;
color: #082449;
transition: ease 0.4s;
}
.t-center {
text-align: center;
}
.lead {
text-align: center;
}
.bottom-line {
border: 1px solid #f43d56;
width: 80px;
margin: 2rem auto;
}
.py-1 {
padding: 1rem 0rem;
}
.py-2 {
padding: 2rem 0rem;
}
.py-3 {
padding: 3rem 0rem;
}
.py-4 {
padding: 4rem 0rem;
}
.my-1 {
margin: 1rem 0rem;
}
.my-2 {
margin: 2rem 0rem;
}
.my-3 {
margin: 3rem 0rem;
}
.my-4 {
margin: 4rem 0rem;
}
.items {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.item {
position: relative;
background: #f43d56;
overflow: hidden;
}
.item::after {
content: '';
position: absolute;
display: block;
background: inherit;
opacity: 0.9;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2) translateX(-75%) translateY(-75%);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
}
.item:hover:after {
transform: scale(2);
}
.item:hover .item-text {
opacity: 1;
transform: translateY(0);
}
.item-image {
height: auto;
transform: translateZ(0);
transition: transform 2s cubic-bezier(0.3, 1.5, 0.4, 1);
display: block;
}
.item-image::before {
content: '';
display: block;
padding-top: 55%;
overflow: hidden;
}
.item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
line-height: 0;
}
.item-text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
text-align: center;
z-index: 1;
color: #f7f7f5;
transform: translateY(-20%);
transition: opacity 500ms cubic-bezier(0.3, 1.5, 0.4, 1), transform 500ms cubic-bezier(0.3, 1.5, 0.4, 1);
transition-delay: 200ms;
}
.item-text-wrap {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.item-text-title {
font-size: 2rem;
padding: 0 1rem;
margin: 5px 0 0 0;
}
.item-text-category {
text-transform: uppercase;
font-size: 1.3rem;
opacity: 0.8;
}
.item .item-button {
margin-top: 1.5rem;
}
.item .item-button:hover {
background-color: transparent;
border: 1px solid #f7f7f5;
color: #f7f7f5;
transition: ease 0.4s;
}
#skills {
margin: 0 0 0 0;
}
#skills .cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background-color: #f7f7f5;
border-radius: 10px;
}
#skills .card:first-of-type {
border-right: 1px solid #ccc;
padding: 1rem;
}
#skills .card {
padding: 1rem;
}
#skills .skill-list h2 {
color: #f43d56;
}
#skills i.fa-3x {
margin-top: 2rem;
color: #f43d56;
}
#skills ul {
display: flex;
justify-content: center;
align-items: center;
}
#skills li {
padding: 0.5rem;
margin-right: 0.5rem;
}
#skills h2 {
padding: 1rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #f7f7f5;
font-family: 'Lato', sans-serif;
line-height: 1.8;
letter-spacing: 1.3px;
font-weight: 300;
color: #082449;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
h1,
h2,
h3,
h4 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#logo {
width: 70px;
height: 70px;
margin-left: 4rem;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 1rem;
margin: 0 3rem;
background-color: #f7f7f5;
}
#main-nav ul {
display: flex;
}
#main-nav li {
padding: 1rem 1.5rem;
}
#main-nav a {
color: #082449;
border: 1px solid #f43d56;
border-radius: 4px;
padding: 0.5rem 2rem;
}
#main-nav a:hover {
background-color: #f43d56;
color: #f7f7f5;
transition: ease 0.4s;
}
#showcase {
flex-direction: column;
display: flex;
height: 60vh;
align-items: center;
background-color: #f7f7f5;
}
#showcase h1 {
padding: 1rem;
margin-top: 3rem;
}
#showcase p {
font-size: 1.3rem;
}
#showcase img {
width: 100%;
}
#greeting {
background-color: #f43d56;
color: #f7f7f5;
}
#greeting h1 {
padding: 1rem;
margin-top: 3rem;
font-size: 32px;
}
#greeting p {
margin: 1rem auto;
max-width: 800px;
text-align: center;
}
#greeting #more {
display: none;
}
#greeting .btn-light {
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
}
#contact-a h3 {
margin-top: 10%;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name email' 'subject phone' 'message message';
grid-gap: 1rem;
margin: 3rem 0 2rem 0;
}
#contact-a .text-fields .name-input {
grid-area: name;
}
#contact-a .text-fields .subject-input {
grid-area: subject;
}
#contact-a .text-fields .email-input {
grid-area: email;
}
#contact-a .text-fields .phone-input {
grid-area: phone;
}
#contact-a .text-fields .message-input {
grid-area: message;
height: 100px;
}
#contact-a .text-fields .text-input {
padding: 0.3rem 0.6rem;
border: solid 1px #ccc;
border-radius: 4px;
}
#contact-a .contact-container .btn-dark {
display: flex;
flex-direction: column;
margin: auto;
width: 30%;
text-align: center;
}
#contact-b .contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
margin: 0 0 4rem 0;
}
#main-footer {
background: #082449;
color: #f7f7f5;
height: 5rem;
}
#main-footer .footer-content {
display: flex;
justify-content: space-evenly;
height: 5rem;
align-items: center;
font-size: 0.8rem;
}
#main-footer .social .fab {
color: #f7f7f5;
margin-right: 1.5rem;
border-radius: 50%;
padding: 0.5rem;
font-size: 1.3rem;
text-align: center;
}
#main-footer .social .fab:hover {
background: #f43d56;
}
#media (max-width: 1300px) {
#showcase {
min-height: 100vh;
position: relative;
}
}
#media (max-width: 800px) {
#showcase {
min-height: 50vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#work-a .item-text-title {
font-size: 1.2rem;
padding: 1rem;
}
#work-a .item-text-category {
font-size: 1rem;
margin-top: 1rem;
}
#greeting .container {
padding: 0 2rem;
}
#skills .cards {
grid-template-columns: 1fr 1fr;
width: 100%;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
}
/*===================PHONES==================================
============================================================*/
#media (max-width: 500px) {
#main-nav {
flex-direction: column;
align-items: center;
}
#main-nav #logo {
margin: 1rem 0;
}
#main-nav li {
padding: 1rem;
margin-top: 2rem;
}
#showcase {
height: 85vh;
}
#showcase p {
padding: 1rem;
text-align: center;
}
#showcase img {
width: 300px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting h1 {
font-size: 1.5rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .container {
padding: 0 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 0.5rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-category {
font-size: 0.9rem;
margin-top: 1.8rem;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
}
#main-footer .footer-content {
flex-direction: column-reverse;
font-size: 0.6rem;
padding-bottom: 1rem;
}
#main-footer .social .fab {
font-size: 1.2rem;
padding: 0 1rem;
margin: 1rem 0;
}
#contact-a .text-fields {
display: grid;
grid-template-areas: 'name' 'email' 'phone' 'subject' 'message';
grid-gap: 1rem;
margin: 2rem 0;
}
#contact-b .contact-info {
grid-template-columns: 1fr;
grid-row-gap: 1rem;
padding: 0;
}
}
#media (max-height: 500px) {
#showcase {
height: 85vh;
}
#showcase img {
width: 250px;
margin: auto;
text-align: center;
}
#showcase h1 {
font-size: 1.5rem;
}
#greeting h1 {
font-size: 1.2rem;
}
#skills .cards {
grid-template-columns: 1fr;
width: 100%;
display: block;
}
#skills .card:first-of-type {
border-right: none;
}
#skills ul {
display: block;
padding: 1rem;
}
#work-a .items {
grid-template-columns: 1fr;
width: 100%;
grid-row-gap: 1rem;
}
#work-a .items .item-image {
width: 100%;
}
#work-a .items .item-text-title {
font-size: 0.9rem;
margin: 0.8rem 0;
}
}
<section id="greeting" class="rellax" data-rellax-speed="3">
<div class="container" data-rellax-speed="-1">
<h1 class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
Hi, I'm Jon. Nice to meet you.
</h1>
<p class="rellax" data-rellax-speed="1" data-rellax-xs-speed="0">
I am a recent graduate of the Borough of Manhattan Community College where I pursued a degree in Multimedia Programming with a specialization in Frontend Web Development and Graphic Design I offer an attention to detail, analysis, and problem solving
that will serve me well as a Frontend Developer. I enjoy working across various programs and platforms from Sketch or XD to SASS/JS/REACT and NODE to name a few. In my recent internship at Interactive One, I was able to apply this skill set in the
development of personalized landing pages and digital marketing campaigns on sites hosted on WordPress VIP.<span id="dots">...</span
><span id="more">
I also find WordPress Development to be engaging as well, especially
theme customization and incorporating raw coding techniques to
create a unique end product. My specialties include: Prototyping in
Adobe XD. Building in HTML/CSS, JavaScript and React. All aspects of
the WordPress and Squarespace platforms. I have had the chance to
work with Firebase creating an original Blog and also the P5.js
library creating animated projects, games and data
visualization.</span
>
</p>
<button
type="button"
id="read"
class="btn-light t-center"
onclick="read()"
>
Read More
</button>
</div>
</section>
<!-- Section Skills -->
<section
id="skills"
class="t-center py-3 rellax"
data-rellax-xs-speed="2"
data-rellax-speed="1.5"
data-rellax-tablet-speed="0"
>
<div class="container">
<div class="cards">
<div class="card">
<div>
<i class="fas fa-code fa-3x"></i>
<h2>Frontend Developer</h2>
<p>
I aim for an original, clean and streamlined approach. I
especially enjoy coding from scratch and exploring new
techniques.
</p>
<div class="skill-list">
<h2>My Languages:</h2>
<ul>
<li>
<i class="fab fa-js"></i>
<p>javascript</p>
</li>
<li>
<i class="fab fa-react"></i>
<p>react</p>
</li>
<li>
<i class="fab fa-sass"></i>
<p>sass</p>
</li>
<li>
<i class="fab fa-node"></i>
<p>node.js</p>
</li>
<li>
<i class="fas fa-database"></i>
<p>firebase</p>
</li>
<li>
<i class="fas fa-file-code"></i>
<p>html5 / css3</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Developer Tools:</h2>
<ul>
<li>
<i class="fas fa-file-alt"></i>
<p>VS-Code</p>
</li>
<li>
<i class="fab fa-bootstrap"></i>
<p>Bootstrap</p>
</li>
<li>
<i class="fab fa-codepen"></i>
<p>Codepen</p>
</li>
<li>
<i class="fab fa-github"></i>
<p>Github</p>
</li>
<li>
<i class="fab fa-wordpress"></i>
<p>WordPress</p>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div>
<i class="fas fa-bezier-curve fa-3x"></i>
<h2>Graphic Design</h2>
<p>
I value simple content structure, clean design patterns, and
thoughtful interactions.
</p>
<div class="skill-list">
<h2>What I like to design:</h2>
<ul>
<li>
<i class="fab fa-sketch"></i>
<p>ux / ui</p>
</li>
<li>
<i class="fas fa-wifi"></i>
<p>web</p>
</li>
<li>
<i class="fas fa-mobile"></i>
<p>mobile</p>
</li>
<li>
<i class="fab fa-app-store-ios"></i>
<p>apps</p>
</li>
<li>
<i class="fas fa-bezier-curve"></i>
<p>logos</p>
</li>
</ul>
</div>
<div class="skill-list">
<h2>Design Tools:</h2>
<ul>
<li>
<i class="fas fa-align-center"></i>
<p>Sketch</p>
</li>
<li>
<i class="fab fa-figma"></i>
<p>Figma</p>
</li>
<li>
<i class="fab fa-adobe"></i>
<p>Adobe Suite</p>
</li>
<li>
<i class="fas fa-drafting-compass"></i>
<p>Draw</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

We Keep Coding

JavaScript is the programming language of the Web.

save user input to database using contenteditable - javascript

Related

Using browser native "back" button to close a modal window with JS

How do I make this nav bar logo responsive?

Toggle Hamburger Menu Javascript

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

How do I push the (underneath) container down once my "Read More" button has expanded?

Categories

Resources