We Keep Coding

How to make element stretch vertically and not affect look?

I have a page that looks like this.
//$(document).ready(function() {
// function viewport_height() {
// var window_height = $(window).height();
// $('#wrapper').height(window_height);
// $('#chat-area').height = $(window_height);
// }
// viewport_height();
// $(window).resize(function() {
// viewport_height();
// });
//});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper{
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow:
0 0 128px 0 rgba(0, 0, 0, 0.1),
0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form{
padding: 25px 30px;
}
.form header{
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form{
margin: 20px 0;
}
.form form .error-text{
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details{
display: flex;
}
.form .name-details .field:first-child{
margin-right: 10px;
}
.form .name-details .field:last-child{
margin-left: 10px;
}
.form form .field{
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label{
margin-bottom: 2px;
}
.form form .input input{
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input{
outline: none;
}
.form form .image input{
font-size: 17px;
}
.form form .button input{
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i{
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before{
color: #333;
content: "\f070";
}
.form .link{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a{
color: #333;
}
.form .link a:hover{
text-decoration: underline;
}
/* Users List CSS Start */
.users{
padding: 25px 30px;
}
.users header,
.users-list a{
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img{
object-fit: cover;
border-radius: 50%;
}
.users header img{
height: 50px;
width: 50px;
}
:is(.users, .users-list) .content{
display: flex;
align-items: center;
}
:is(.users, .users-list) .content .details{
color: #000;
margin-left: 20px;
}
:is(.users, .users-list) .details span{
font-size: 18px;
font-weight: 500;
}
.users header .logout{
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search{
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text{
font-size: 18px;
}
.users .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show{
opacity: 1;
pointer-events: auto;
}
.users .search button{
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active{
background: #333;
color: #fff;
}
.search button.active i::before{
content: '\f00d';
}
.users-list{
max-height: 350px;
overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
width: 0px;
}
.users-list a{
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img{
height: 40px;
width: 40px;
}
.users-list a .details p{
color: #67676a;
}
.users-list a .status-dot{
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline{
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header{
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon{
color: #333;
font-size: 18px;
}
.chat-area header img{
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span{
font-size: 17px;
font-weight: 500;
}
.chat-box{
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat{
margin: 15px 0;
}
.chat-box .chat p{
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%),
0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
display: flex;
}
.chat-box .outgoing .details{
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p{
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
display: flex;
align-items: flex-end;
}
.chat-box .incoming img{
height: 35px;
width: 35px;
}
.chat-box .incoming .details{
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p{
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area{
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input{
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button{
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active{
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form, .users{
padding: 20px;
}
.form header{
text-align: center;
}
.form form .name-details{
flex-direction: column;
}
.form .name-details .field:first-child{
margin-right: 0px;
}
.form .name-details .field:last-child{
margin-left: 0px;
}
.users header img{
height: 45px;
width: 45px;
}
.users header .logout{
padding: 6px 10px;
font-size: 16px;
}
:is(.users, .users-list) .content .details{
margin-left: 15px;
}
.users-list a{
padding-right: 10px;
}
.chat-area header{
padding: 15px 20px;
}
.chat-box{
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p{
font-size: 15px;
}
.chat-box .outogoing .details{
max-width: 230px;
}
.chat-box .incoming .details{
max-width: 265px;
}
.incoming .details img{
height: 30px;
width: 30px;
}
.chat-area form{
padding: 20px;
}
.chat-area form input{
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button{
width: 45px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<div class="wrapper" id="wrapper">
<section class="chat-area" id="chat-area">
<header>
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
</body></html>
I want the <div class="wrapper"> to resize vertically when height of the device doesn't fit. So when I shrink my browser to a smaller height it will look shrink with it. Also I want the look to stay. I tried to do display: flex; but it just made everything go everywhere. I can't seem to do it. I am trying to do it with JavaScript, but it doesn't work the way it should. Changing the viewport height does not help.

Is this what you are looking for? I wasn't 100% sure from the description
The only css I added are at the bottom of the css section
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
The above is the only css I added, the min-height: auto; was to override your original code. Original code is not modified
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper {
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form {
padding: 25px 30px;
}
.form header {
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form {
margin: 20px 0;
}
.form form .error-text {
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details {
display: flex;
}
.form .name-details .field:first-child {
margin-right: 10px;
}
.form .name-details .field:last-child {
margin-left: 10px;
}
.form form .field {
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label {
margin-bottom: 2px;
}
.form form .input input {
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input {
outline: none;
}
.form form .image input {
font-size: 17px;
}
.form form .button input {
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i {
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before {
color: #333;
content: "\f070";
}
.form .link {
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a {
color: #333;
}
.form .link a:hover {
text-decoration: underline;
}
/* Users List CSS Start */
.users {
padding: 25px 30px;
}
.users header,
.users-list a {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img {
object-fit: cover;
border-radius: 50%;
}
.users header img {
height: 50px;
width: 50px;
}
:is(.users,
.users-list) .content {
display: flex;
align-items: center;
}
:is(.users,
.users-list) .content .details {
color: #000;
margin-left: 20px;
}
:is(.users,
.users-list) .details span {
font-size: 18px;
font-weight: 500;
}
.users header .logout {
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search {
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text {
font-size: 18px;
}
.users .search input {
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show {
opacity: 1;
pointer-events: auto;
}
.users .search button {
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active {
background: #333;
color: #fff;
}
.search button.active i::before {
content: '\f00d';
}
.users-list {
max-height: 350px;
overflow-y: auto;
}
:is(.users-list,
.chat-box)::-webkit-scrollbar {
width: 0px;
}
.users-list a {
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child {
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img {
height: 40px;
width: 40px;
}
.users-list a .details p {
color: #67676a;
}
.users-list a .status-dot {
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline {
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header {
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon {
color: #333;
font-size: 18px;
}
.chat-area header img {
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span {
font-size: 17px;
font-weight: 500;
}
.chat-box {
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text {
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat {
margin: 15px 0;
}
.chat-box .chat p {
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing {
display: flex;
}
.chat-box .outgoing .details {
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p {
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming {
display: flex;
align-items: flex-end;
}
.chat-box .incoming img {
height: 35px;
width: 35px;
}
.chat-box .incoming .details {
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p {
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area {
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input {
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button {
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active {
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form,
.users {
padding: 20px;
}
.form header {
text-align: center;
}
.form form .name-details {
flex-direction: column;
}
.form .name-details .field:first-child {
margin-right: 0px;
}
.form .name-details .field:last-child {
margin-left: 0px;
}
.users header img {
height: 45px;
width: 45px;
}
.users header .logout {
padding: 6px 10px;
font-size: 16px;
}
:is(.users,
.users-list) .content .details {
margin-left: 15px;
}
.users-list a {
padding-right: 10px;
}
.chat-area header {
padding: 15px 20px;
}
.chat-box {
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p {
font-size: 15px;
}
.chat-box .outogoing .details {
max-width: 230px;
}
.chat-box .incoming .details {
max-width: 265px;
}
.incoming .details img {
height: 30px;
width: 30px;
}
.chat-area form {
padding: 20px;
}
.chat-area form input {
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button {
width: 45px;
}
}
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<input id="hidden" type="hidden" value="7">
<div class="wrapper">
<section class="chat-area">
<header>
<i class="fas fa-arrow-left"></i>
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<span>Justin Skinner</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>

Here's how to do it with flexbox using this answer.
JSFiddle
body{
height:100vh
}
.wrapper{
height:100%;
}
.chat-area{
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
.chat-box{
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}

Animation in html/css/js [duplicate]

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

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

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

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>

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>

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>