Develop Reference

modal wont close can someone check whats wrong?

my modal seems to be working all ok except for the close button its throwing undefined error and i am unable to close the modal when click on the link.
would really appreciate if someone here could help me out fixing it. i just cannot seem to get where i am going wrong.
here is my complete code and also fiddle for the code is https://jsfiddle.net/j6xt5eok/
<style>
.modal-dialog {
margin: 0 auto !important;
}
.customs-info a {
background-color: #f00;
display: block;
max-width: 90%;
margin: 25px auto 0;
padding: 15px 0;
font-size: 20px;
border-radius: 14px;
}
#boxes {
display: block;
}
#boxes #dialog {
background-color: #ffffff;
border-radius: 10px;
}
#boxes .window {
display: block;
width: 100% !important;
left: 0 !important;
top: 0px !important;
}
.home-page-popup .close {
display: block;
height: 30px;
margin: 0 auto;
opacity: .75;
overflow: hidden;
position: absolute;
right: 12px;
text-indent: 0;
top: 12px;
width: 30px;
}
.close {
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.content_bx {
background: #fff;
height: calc(100vh - 80px);
width: 100%;
}
.main_img_ct {
padding: 20px 0 10px 0px;
}
.main_img_ct {
width: 100%;
margin: 0 auto;
padding: 0;
padding: 20px 0 50px 0px;
background-color: #FFF;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 h1 {
font-size: 28px;
font-weight: bolder;
color: #ff0000;
margin-bottom: 25px;
text-transform: uppercase;
}
.cont_bx2 a {
font-size: 22px;
}
.fa-2x {
font-size: 30px !important;
margin: 0 7px 0 0;
}
.cont_bx2 a {
font-size: 31px;
color: #009FF1;
font-weight: 700;
text-decoration: none;
text-align: center;
border-radius: 46px;
line-height: normal;
width: 68%;
margin: 0 auto;
text-shadow: #000 0 1px 1px;
margin-top: 20px;
font-weight: normal;
padding: 10px;
border-radius: 10px;
font-weight: bold;
color: #fff;
background-color: #009FF1;
}
.cont_bx2 h4 {
font-size: 22px;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
color: #5F5F63 !important;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
margin: 23px 0;
}
.cont_bx2 p strong {
font-size: 22px;
display: block;
margin: 0;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.cont_bx2 {
width: 100%;
text-align: center;
margin-top: 15%;
}
.cont_bx2 p {
font-size: 16px;
line-height: 1.5;
font-family: mallory,helveticaneue-bold,helvetica neue,Helvetica,Arial,sans-serif;
color: #02416c;
margin: 10px 0;
}
.lakdi_pn {
text-align: center;
overflow: hidden;
margin-top: 20px;
}
.phon-img a img {
width: 35%;
margin: 10px auto;
display:block;
}
.phon-img {
text-align: center;
font-size: 23px;
}
.phon-img a {
color: #000;
}
.modal-dialog {
margin: 0;
}
.home-page-popup a#close_id img {
width: 20px;
}
</style>
<div id="myModal" class="modal " role="dialog" style="display:block">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div id="boxes">
<div class="home-page-popup">
<div style="display: block;" id="dialog" class="window">
<a href="javaScript:void(0);" data-dismiss="modal" id="close_id" onclick="close_dilog(this.id)" class="close">
<img src="img/close-icon.png" alt="close" width="30" height="20"> </a>
<div class="popup-dsgn-box">
<div class="content_bx">
<div class="main_img_ct">
<div class="cont_bx2">
<h1> For Customer Service </h1>
<a href="tel:+1 (000) 000-0000" style="">
<i class="fa fa-phone fa-2x"></i>+1 (000) 000-0000</a>
<h4>EXCLUSIVE DEALS!</h4>
<p style="color:#000 !important; padding:0 10px;"><strong>Call Us Now To Book,</strong> Change or Cancel Reservations and <strong>Get upto 50% OFF</strong></p>
</div>
<div class="row">
<div class="col-md-12">
<div class="phon-img">
<a href="tel:+1 (000) 000-0000">
<img src="img/mobile-phone.png" alt="mobile">
Click to Call
</a>
</div>
</div>
<div class="col-md-12">
<div class="flat-address" style="text-align: center;">
<div class="customs-info">
Call Now: <i class="fa fa-phone-square"></i> +1 (000) 000-0000
</div>
</div><!-- /.top-navigator -->
</div><!-- /.col-md-4 -->
</div>
</div>
</div>
</div>
</div>
<!--<div id="mask" style="display: block; width: 1349px; height: 2538px; opacity: 0.8;"></div>-->
</div>
</div>
</div>
</div>
</div>
thanks alot in advance, really appreciate your help

Two buttons, only one works

Only one out of my two “Order Now” buttons seems to work. Can’t find out the issue. The link and the :hover function works for the first button but for the second one none of them works. The first button is showcasebutton and the second one is showcasebutton2. They use the same code in CSS but it still isn’t working.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.nametext {
position: absolute;
top: 20px;
width: 100%;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
z-index: 2;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div class="nametext">
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">

I added a container class and deleted the nametext class.
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
* {
border: 0px solid black;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
header {
background: linear-gradient(rgba(10, 10, 104, 0.068), rgba(89, 85, 150, 0.247)), url(imgs/teslamodely.jpg);
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 20px;
}
nav {
position: absolute;
width: 100%;
line-height: 60px;
}
nav ul {
float: right;
margin: 0%;
padding-right: 42px;
}
nav ul li {
display: inline-block;
padding: 16px 32px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
.logo {
height: 80px;
float: left;
margin: 16px 48px;
}
h1 {
font-size: 48px;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
padding-top: 125px;
color: #fff;
margin: 0;
}
.description {
width: 80%;
margin: 50px auto;
}
p {
font-size: 18px;
line-height: 28px;
color: #333;
text-align: justify;
}
nav.black {
background: rgba(126, 114, 145, 0.61);
}
.trustbadge {
display: block;
margin-left: auto;
margin-right: auto;
width: 25%;
padding-bottom: 10px;
}
#model_s {
width: 100%;
float: left;
z-index: -1;
}
#model_3 {
width: 100%;
margin-top: -4px;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #11232F;
height: 30px;
border-radius: 20px;
padding: 10px;
}
.search-box.hover>.search-txt {
width: 180px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
color: black;
}
.search-btn {
color: #017CC9;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #11232F;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 30px;
width: 180px;
font-weight: bold;
}
#searchbtnpic {
height: 25px;
color: white;
}
* {
border: 0px solid black;
}
.showcasebutton {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container {
position: relative;
width: 100%;
z-index: -1;
align-content: center;
}
.showcasebutton2 {
transition-duration: 0.4s;
border: 2px solid rgb(255, 255, 255);
background-color: transparent;
padding: 10px 100px;
border-radius: 20px;
color: white;
font-size: 15px;
}
.showcasebutton2:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
opacity: 1;
}
#buttonid2 {
display: flex;
justify-content: center;
margin-top: 150px;
}
.container{
position: relative;
width: 100%;
align-content: center;
padding-bottom:20px;
height: auto;
background: #2421fe;
display: block;
z-index:1;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<header>
<nav>
<a href="index.html">
<img class="logo" src="imgs/Tesla_logo.png">
</a>
<div class="menu">
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search....">
<a class="search-btn" href="">
<img id="searchbtnpic" src="imgs/searchbtn.png" alt="">
<i class="fas fa-search">
</i>
</a>
</div>
<ul>
<li>Home</li>
<li>Cars</li>
<li>Cart</li>
</ul>
</div>
</nav>
<h1>Model Y</h1>
<div id="buttonid">
<a href="cart.html">
<button type="button" class="showcasebutton">Order Now</button>
</a>
</div>
</header>
<div class="container">
<img id="model_s" src="imgs/Tesla_model_S.jpg" alt="">
<div>
<h1>Model S</h1>
<div id="buttonid2">
<a href="cart.html">
<button type="button" class="showcasebutton2">Order Now</button>
</a>
</div>
</div>
</div>
<img id="model_3" src="imgs/model_3.png" alt="">

Content Editable not saving with localStorage

I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom

You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});

You are using the id "editable" twice, could you change that and retry?

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()

How do I add a "Smooth Scrolling" feature to my page's buttons?

I am trying to create a smooth scrolling effect on the buttons of my Codepen using the Javascript from this example page and it still "snaps" to the section of the page instead of smoothly scrolling to the section.
What is causing this to not work? (Tried adding the breaks to see if I was just going crazy because of the speed of the scroll.)
Code Below:
HTML
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-row">
<div class="header-left">
<h4>A Self-Taught Programmer's Adventure</h4>
<h3>Victor Rojas</h3>
</div>
<div class="header-center">
<img class="logo-main" src="https://victoryroads.files.wordpress.com/2017/05/cropped-artboard-1.png" title="Victory Roads">
</div>
<div class="header-right">
<h4 class="text-social">Connect with me:</h4>
<a href="https://www.facebook.com/spikefrs/" class="fa fa-facebook" target="_blank">
</a>
<a href="https://www.instagram.com/spikefrs/" class="fa fa-instagram">
</a>
<a href="https://www.linkedin.com/in/victorvanrojas/" class="fa fa-linkedin">
</a>
</div>
</div>
<div class="header-right-nav" id="topnav">
Portfolio
Accomplishments
<a class="active" href="#home">Home</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="main-body">
<p class="header-title" id="accomplishments">Accomplishments</p>
<div class="row">
<div class="column">
<p class="subheader-title">Projects</p>
<ul>
<p class="project"><a class ="link" href="https://codepen.io/c0nnexi0n/full/oGrowR/">Tribute Page</a></p><br>
<p class="project"><a class ="link" href="https://victoryroads.club/">Personal Blog</a></p>
</ul>
</div>
<div class="column">
<p class="subheader-title">Certificates</p>
<ul>
<p class="project"><a class ="link" href="https://www.coursera.org/account/accomplishments/certificate/8FGMKKQ5VN">Python Certification</a></p><br>
<p class="project"><a class ="link" href="https://www.udemy.com/certificate/UC-MVB4P9MJ/">Marketo Certification</a></p>
</ul>
</div>
</div>
<div class="row">
<p class="header-title" id="portfolio">My Portfolio</p>
<img class="port1" src="https://i.imgur.com/6aLPprT.png"></img>
<img class="port2" src="https://i.imgur.com/A8tOXw3.png"></img>
</div>
</div>
CSS
$black: #000;
$grey: #868686;
$white: #FFF;
$red: #dd4b4b;
.header-row{
position: relative;
background-color: $grey;
width: 100%;
height: 150px;
padding: 40px;
}
.header-left{
position: relative;
overflow: auto;
}
.header-center{
position: relative;
text-align: center;
height: 60px;
top: -70px;
}
.header-right{
position: relative;
text-align: right;
top: -145px;
}
.text-social{
position: relative;
left: -125px;
top: 30px;
text-decoration: underline;
}
.fa {
font-size: 30px;
width: 30px;
text-align: right;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
color: $black;
}
.fa:hover{
opacity: 20%;
color: $red;
text-decoration: none;
text-shadow: 1px 2px 3px $black;
}
.header-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 40px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.subheader-title{
text-align: center;
padding: 20px;
color: $white;
font-weight: 500;
font-size: 30px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.logo-main{
height: 60px;
top: -200px;
}
.header-right-nav {
background-color: #333;
overflow: hidden;
}
.header-right-nav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: arial, san-serif;
}
.header-right-nav a:hover {
background-color: #ddd;
color: black;
}
.header-right-nav a.active {
background-color: $red;
color: white;
}
.main-body {
position: relative;
background-color: $grey;
color: $black;
width: auto;
height: 100%;
}
.row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
text-align: center;
}
.column {
position: relative;
display: table-cell;
background-color: $red;
height: 20vh;
column-count: 1;
column-gap: 2em;
left: 15px;
border-radius: 25px;
}
.project {
position: relative;
left: -20px;
font-size: 25px;
}
.link {
color: $white;
}
.link:hover {
color: $black;
text-decoration: underline;
}
.port1{
position: relative;
height: 300px;
width: 600px;
margin: 28px;
}
.port2{
position: relative;
height: 300px;
width: 600px;
}
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#topBtn:hover {
background-color: #555;
}
Javascript
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
document.getElementsByTagName("h3")[0].style.fontSize = "25px";
document.getElementsByTagName("h4")[0].style.fontSize = "15px";
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});

button alignment issue on html,css

I want something like this https://www.producthunt.com/e/best-of-february-2017
On hover external link and save must appear on the same line, but for me the alignment is not coming.
Thanks in advance!
snippet is below and this is the image result of my code
< script type = "text/javascript" >
$(document).ready(function() {
$(document).on('mouseenter', '.sec-b', function() {
$(this).find("#external").show();
}).on('mouseleave', '.sec-b', function() {
$(this).find("#external").hide();
});
}); <
/script>
<
script type = "text/javascript" >
$(document).ready(function() {
$(document).on('mouseenter', '.sec-b', function() {
$(this).find("#down").show();
}).on('mouseleave', '.sec-b', function() {
$(this).find("#down").hide();
});
}); <
/script>
.sec-b {}
#gb {
margin-top: 2%;
}
#gb1 {
margin-top: -13%;
margin-left: 15%;
font-size: 20px;
}
#gb2 {
margin-top: -1%;
margin-left: 15%;
}
.but {
display: inline-block;
font-size: 12px;
margin-top: 1%;
margin-left: 15%;
border: 1px solid #e6e6e6;
border-radius: 4px;
position: relative;
white-space: nowrap;
background-color: #FFFFFF;
color: #000000;
text-transform: capitalize;
transition: all linear 0.2s;
}
.but span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0px;
display: inline-block;
vertical-align: middle;
background-color: #9E9E9E;
border-left: 1px solid #BDBDBD;
width: 0px;
visibility: hidden;
}
.but:hover {
padding-right: 30px;
background-color: #ffffff;
}
.but:hover span {
width: auto;
visibility: visible;
padding: 3px;
background-color: #e6e6e6;
}
#up {
margin-left: 53%;
margin-right: 1%;
}
#down {
margin-left: 45%;
margin-right: 1%;
}
#external {
margin-left: 35%;
margin-right: 1%;
}
#comment {
margin-top: 3px;
}
.fa-caret-up {
font-size: 14px;
padding: 2px 2px 2px 2px;
}
.fa-comment {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-download {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-external-link {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="sec-b">
<img src="img/gboard.jpg" height="100" width="100" id="gb">
<p id="gb1">Gboard by Google</p>
<p id="gb2">Google search,emoji</p>
<span class="btn btn-secondary btn-sm but">
TECH
<span>+</span>
</span>
<a href="#" class="btn btn-secondary btn-sm" id="external"><span class="fa fa-external-link"></span>
</a>
<a href="#" class="btn btn-secondary btn-sm" id="down"><span class="fa fa-download"> SAVE</span>
</a>
<a href="#" class="btn btn-secondary btn-sm" id="up"><span class="fa fa-caret-up"> 2662</span>
</a>
<span class="fa fa-comment"> 42</span>
<hr>
</div>

I have solved your issue by make some changes in CSS and HTML. Here is its fiddle: JSFiddle
I've tried to achieve same result as producthunt.com example. So, I've almost rewrite your code. Please take a look mainly on HTML and CSS:
HTML:
<div class="sec-b">
<img src="https://ph-files.imgix.net/1c1c487a-379f-4f0c-99cd-cb6048a85606?
auto=format&auto=compress&codec=mozjpeg&cs=strip&w=80&h=80&fit=crop"
height="80" width="80" align="left">
<p>Gboard by Google<br>
<small>Google search, emoji</small></p>
<div class="btn btn-secondary btn-sm but">TECH<span>+</span></div>
<span class="fa fa-comment"> 42</span>
<a href="#" class="btn btn-secondary btn-sm float-right" id="up"><span
class="fa fa-caret-up"> 2662</span></a>
<a href="#" class="btn btn-secondary btn-sm float-right" id="down"><span
class="fa fa-download"> SAVE</span></a>
<span class="fa fa-external-link"></span>
<hr>
</div>
CSS:
.sec-b {
display: block;
padding:0.5rem;
}
.sec-b p, .sec-b small {
margin-bottom:0;
}
.sec-b > img {
padding: 0.25rem 0.5rem;
}
.sec-b .btn {
margin: 0.25rem 0.25rem;
}
.sec-b:first-child .btn {
margin: 0.25rem 0.25rem 0.25rem 0;
}
.but {
display: inline-block;
font-size: 0.75rem;
border-radius: 0.25rem;
position: relative;
white-space: nowrap;
background-color: #FFFFFF;
color: #000000;
transition: all linear 0.2s;
cursor: pointer;
}
.but span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0px;
display: inline-block;
vertical-align: middle;
background-color: #9E9E9E;
border-left: 1px solid #BDBDBD;
width: 0px;
visibility: hidden;
}
.but:hover {
padding-right: 1.5rem;
background-color: #ffffff;
}
.but:hover span {
width: auto;
visibility: visible;
padding: 3px;
background-color: #e6e6e6;
}
.fa-caret-up {
font-size: 14px;
padding: 2px 2px 2px 2px;
}
.fa-comment {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-download {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-external-link {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
JS:
$(document).ready(function() {
$(document).find("#external").hide();
$(document).find("#down").hide();
$(document).on('mouseenter', '.sec-b', function() {
$(this).find("#external").show();
}).on('mouseleave', '.sec-b', function() {
$(this).find("#external").hide();
});
});
$(document).on('mouseenter', '.sec-b', function() {
$(this).find("#down").show();
}).on('mouseleave', '.sec-b', function() {
$(this).find("#down").hide();
});
Still it is very messy, you have to cleanup your code. You can merge "external" & "down" IDs and can write single JS for hide/show it on mouse over.

Hope this helps. It's using nested flexboxes and all id's are replaced with classes. Javascript is not required.
.container {
display: flex;
padding: 1em;
border: thin solid lightgray;
}
.rightColumn {
display: flex;
flex-flow: column;
margin-left: 1em;
max-height: 100px;
justify-content: space-between;
}
.rightColumn>p {
margin-bottom: 0;
}
.icons {
display: flex;
}
.btn.down,
.btn.external {
display: none;
}
.but {
display: inline-block;
font-size: 12px;
border: 1px solid #e6e6e6;
border-radius: 4px;
position: relative;
white-space: nowrap;
background-color: #FFFFFF;
color: #000000;
text-transform: capitalize;
transition: all linear 0.2s;
}
.but span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0px;
display: inline-block;
background-color: #9E9E9E;
border-left: 1px solid #BDBDBD;
width: 0px;
visibility: hidden;
}
.but:hover {
padding-right: 30px;
background-color: #ffffff;
}
.but:hover span {
width: auto;
visibility: visible;
padding: 3px;
background-color: #e6e6e6;
}
.container:hover .btn.external {
display: inline-block;
}
.container:hover .btn.down {
display: inline-block;
}
.fa-caret-up {
font-size: 14px;
padding: 2px 2px 2px 2px;
}
.fa-comment {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-download {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-external-link {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<img src="http://placehold.it/100/00ff00" width="auto" height="100px">
<div class="rightColumn">
<p>Gboard by Google</p>
<p>Google search,emoji</p>
<div class="icons">
<span class="btn btn-secondary btn-sm but">TECH<span>+</span></span>
<a href="#" class="btn btn-secondary btn-sm external">
<span class="fa fa-external-link"></span>
</a>
<a href="#" class="btn btn-secondary btn-sm down">
<span class="fa fa-download"> SAVE</span>
</a>
<a href="#" class="btn btn-secondary btn-sm up">
<span class="fa fa-caret-up"> 2662</span>
</a>
<a href="#" class="btn btn-secondary btn-sm comment">
<span class="fa fa-comment"> 42</span>
</a>
</div>
</div>
</div>

.sec-b {}
#gb {
margin-top: 2%;
}
#gb1 {
margin-top: -13%;
margin-left: 15%;
font-size: 20px;
}
#gb2 {
margin-top: -1%;
margin-left: 15%;
}
.but {
display: inline-block;
font-size: 12px;
margin-top: 1%;
margin-left: 15%;
border: 1px solid #e6e6e6;
border-radius: 4px;
position: relative;
white-space: nowrap;
background-color: #FFFFFF;
color: #000000;
text-transform: capitalize;
transition: all linear 0.2s;
}
.but span {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0px;
display: inline-block;
vertical-align: middle;
background-color: #9E9E9E;
border-left: 1px solid #BDBDBD;
width: 0px;
visibility: hidden;
}
.but:hover {
padding-right: 30px;
background-color: #ffffff;
}
.but:hover span {
width: auto;
visibility: visible;
padding: 3px;
background-color: #e6e6e6;
}
#up {
margin-left: 53%;
margin-right: 1%;
}
#down {
margin-left: 45%;
margin-right: 1%;
}
#external {
margin-left: 35%;
margin-right: 1%;
}
#comment {
margin-top: 3px;
}
.fa-caret-up {
font-size: 14px;
padding: 2px 2px 2px 2px;
}
.fa-comment {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-download {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
.fa-external-link {
font-size: 14px;
color: #7a7a7a;
padding: 2px 2px 2px 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sec-b">
<img src="https://lh3.googleusercontent.com/X64En0aW6jkvDnd5kr16u-YuUsoJ1W2cBzJab3CQ5lObLeQ3T61DpB7AwIoZ7uqgCn4=w300" height="100" width="100" id="gb">
<p id="gb1">Gboard by Google</p>
<p id="gb2">Google search,emoji</p>
<span class="btn btn-secondary btn-sm but" style="margin-top: -5px;">TECH<span>+</span></span>
<div class="pull-right" style="margin-right:5px">
<a href="#" class="btn btn-secondary btn-sm external">
<span class="fa fa-external-link"></span>
</a>
<a href="#" class="btn btn-secondary btn-sm down">
<span class="fa fa-download"> SAVE</span>
</a>
<a href="#" class="btn btn-secondary btn-sm up">
<span class="fa fa-caret-up"> 2662</span>
</a>
<a href="#" class="btn btn-secondary btn-sm comment">
<span class="fa fa-comment"> 42</span>
</a>
</div>
<hr>
</div>