Div goes outside screen

Div goes outside screen - javascript

I am trying to combine these 2 scripts:
http://designmodo.com/video-background-website/
http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html
However I am having an issue. On laptop everything looks fine, but when I resize windows to tablet/mobile size counters are moving above the screen. I was playing with different css seeting whole day but couldn't figure it out :(
Demo:
http://brandflow.pl/products/bootstrap/flow%20coming%20soon/video%20+%20round/
I thing it has something to do with position of DIV which handles video...
CSS:
/* GENERAL STYLES
================================================== */
html {
height:100%
}
body {
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
height:100%;
width:100%;
color: #FFF;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%
}
p {
font-size:20px;
line-height:140%;
text-align:center
}
ul li {
display:inline-block;
list-style:none;
padding-right: 10px;
}
.wrapper {
z-index:600;
position:relative
}
.pattern {
background-image:url(../images/pattern.png);
background-repeat: repeat;
background-attachment:scroll;
width:100%;
height:100%;
position:absolute;
top:0;
left:0
}
/* BIG VIDEO BACKGROUND
================================================== */
.big-background {
z-index:550;
text-align:center;
min-height:100%;
position:relative;
overflow:hidden
}
.big-background .big-background-container {
max-width:100%;
display:inline-block;
position:absolute;
top:50%;
left:50%;
z-index:0;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}
.big-background-btn:hover {
color:#fff;
background:rgba(255,255,255,0.20)
}
.big-background-default-image {
background:url(../images/sunset.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
z-index:0;
backface-visibility:hidden
}
/* ABOUT SECTION
================================================== */
.about-section {
font-family:'Lato',sans-serif;
color:#7f8c8d;
background:#fff;
padding:60px 20px
}
.about-section-container {
text-align:center;
padding-bottom:50px
}
.about-section-title {
font-family:'Raleway',sans-serif;
font-size:40px;
background:#fff;
color:#3d566e;
padding:0 35px;
margin-bottom:22px;
background-attachment:scroll;
background-repeat:repeat-x;
background-position:center center;
text-transform:uppercase
}
a.about-section-btn {
font-family:'Lato',sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration:none;
color:#34495e;
background:transparent;
border:2px solid #34495e;
padding:10px 14px;
cursor:pointer;
letter-spacing:2px;
text-align:center;
display:inline-block;
-webkit-transition:.4s background ease;
-moz-transition:.4s background ease;
-o-transition:.4s background ease;
transition:.4s background ease;
}
.about-section-btn:hover {
color:#fff;
background: #34495e;
}
/* SMALL VIDEO BACKGROUND
================================================== */
.small-background-section {
font-family:'Raleway',sans-serif;
padding:100px 0;
position:relative;
width:100%;
overflow:hidden
}
.small-background-container {
position:absolute;
top:50%;
left:50%;
text-align:center
}
.small-background-title {
font-size:40px;
color:#f1c40f;
font-weight:300;
z-index:10;
display:inline-block;
text-transform:uppercase;
margin-bottom:20px;
margin-top: 20px;
position:relative;
background-attachment:scroll;
background-repeat:repeat-x;
background-position:top center
}
/* SOCIALS
================================================== */
.socials a {
color:#fff
}
.socials a:hover {
color:#bdc3c7
}
/* MEDIA QUERIES
================================================== */
#media screen and (max-width: 768px) {
.about-section-title {
line-height:1
}
}
#media screen and (max-width: 480px) {
.big-background-title {
font-size:58px
}
.small-background-title {
line-height:1
}
/*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/
}
#media screen and (max-width: 360px) {
.big-background-title,#colorize {
line-height:1
}
}
#media screen and (max-width: 320px) {
.small-background-title {
font-size:30px
}
}
.countdown-container {
position: relative;
margin-top: 20%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .2);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
#media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
HTML:
https://www.youtube.com/watch?v=iNJdPyoqt8U',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">
<div class="pattern"></div>
<div class="big-background-container">
<div class="countdown countdown-container container">
<div class="row">
<div class="col-lg-12">
<h1>WE'RE COMING SOON</h1>
<h3>We are working very hard on the new version of oru site. It will brings a lot of new features. Stay tuned!</h3>
</div>
</div>
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
<!-- /.text -->
</div>
<!-- /.inner -->
</div>
<!-- /.wrap -->
</div>
<!-- /.clock-item -->
</div>
<!-- /.clock -->
</div>
<!-- /.countdown-wrapper -->
</div>
Printscreen:

This: .countdown-container has this:
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
set of properties.
There are other issues with the page, but for that specific thing, you should be set with adjusting or removing them.

You're going to want to add a media query to adjust for mobile on that div element that contains your counter.
#media screen and (max-width: 40em){
.countdown-container{
margin-top: 900px;
}
}
That fixed the container and allowed it to be viewed from my testing. You would want to use this same media query to adjust your footer as well since it seems like there are some issues there too.

Related

move figcaption under the image for mobile devices

i'm in the process of making an old site responsive and i've encountered a few hurdles.
I would like the desktop version to show the fig captions on the right side, but in the mobile version the fig captions should be under the figure.
Unfortunately, I can't get the figcaptions to appear under the image.
I am thankful for every help!
Best wishes
<style type="text/css">
body {
margin: 60px;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
.figure {
margin: 0;
}
.figure img {
vertical-align:;
}
.figure figcaption {
margin-left: 10px;
}
#media screen and (min-width: 768px) {.d-xl-none{display: none; }}
#media screen and (max-width: 768px) {
body {margin: 20px;}
div.content {margin-left: 0;}
div.preview {margin-left: 0;}
.sidebar {height: 100%;position: relative;text-align: center;margin-bottom: 0px !important;display: none; }
.sidebar a {float: left;align-items: center; }
.caption {text-align: center !important; }
.containerCarousel {margin-top: 0px;margin-bottom: 150px;width: 1fr;} }
#LP_img{align-content: center; margin: 0 auto;}
.overlay {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.9);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 10%;width: 100%;text-align: center;margin-top: 30px;}
.overlay a {padding: 8px;text-decoration: none;font-size: 15px;color: #818181;display: block;transition: 0.3s;}
.overlay a:hover,
.overlay a:focus {color: #f1f1f1;}
.overlay .closebtn {position: absolute;top: 20px; right: 45px; font-size: 40px;}
#media screen and (max-height: 480px) {
.overlay a {font-size: 20px }
.overlay .closebtn {font-size: 20px;top: 15px; right: 35px;}
.sidebar a {text-align: center;float: none;}
.sidebar {display: none; }
.content { margin-top: 10px !important;}
.preview { margin-top: 10px !important; }
.caption {text-align: center !important; }
.imagePreview {margin: auto 0;}
}
.imagePreview{
max-width: 400px;
}
</style>
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- START Mobile Nav-->
<div class="continer">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font size="-1"><b>Christoph Urwalek</b></font></span>
</div>
<!-- END Mobile Nav-->
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./hungabunga.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li><a> </a></li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
</nav>
</div>
<!--END Sidebar -->
<div class="col-md-9 ">
<table class="table table-borderless ">
<tbody>
<!---->
<tr>
<td><figure class="figure d-flex justify-content-center">
<img src="http://christophurwalek.at/index/Wandcollage.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption"><a href="###">Test first line<br>Test second line</figcaption>
</figure></td>
</tr>
<!---->
<!---->
<tr>
<div class="container">
<td><figure class="figure d-flex justify-content-center">
<img src="./assets/img/thumbnails/Fake_35x47cm_2020__.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption caption center-block">real_FAKE<br>2020</figcaption>
</figure>
</div></td>
</tr>
<!---->
<tr>
<td><figure class="figure d-flex justify-content-center">
<img src="./assets/img/thumbnails/Various_2020_wand.jpg" class="figure-img img-fluid rounded imagePreview" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">Various III</figcaption>
<figcaption class="figure-caption">2020</figcaption>
</figure></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<!--END Wrapper-->
<script type="">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>
sorry for adding all the code..
I don't know what could have been of importance to you.

The solution is to change d-flex to block for smaller devices. (I wouldn't do that, I think you should change everything to use Bootstrap 4 as it's intended, and remove the table which makes no sense).
#media screen and (max-width: 768px) {
/* all the styles you want */
.d-flex {
display: block !important;
}
}
Keep in mind there are errors in the code, there is an empty vertical-align for .figure img, and there is an unclosed <a> element.

wrong modal popup on click (html, css, js)

i'm having trouble figuring out how to have each example have a modal with it's own content. currently, if i click EXAMPLE2, the content from EXAMPLE1 still pops up. i also am not sure why the icons or the modals don't work on here, but i'm hoping someone can at least give pointers based on the code here. i tried changing the IDs to be unique, but i don't think i'm doing it correctly? thank you in advance
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
width: 120px;
/*height: 40vh;*/
float: left;
padding-right: 20px;
text-align: center;
/*position: relative;*/
border-radius: 50%;
position: relative;
display: inline-block;
}
/*.icon-inner span {
float: left;
padding-left: 20px;
text-align: center;
position: relative;
border-radius: 50%;
display: inline-block;
}*/
.icon-inner span:before {
margin-left: 0;
font-size: 40px;
}
.icon-inner span:hover {
margin-left: 0;
font-size: 40px;
color: #4FC1E9;
cursor: pointer;
}
.icon-inner-info span:before {
height: 15px;
width: 20px;
margin-left: 0;
padding-left: 2px;
padding-right: 5px;
font-size: 12px;
/*float: flex;*/
position: relative;
}
.icon-inner-info span:hover {
margin-left: 0;
cursor: help;
position: relative;
padding-right: 5px;
}
.icon-inner-info .tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.icon-inner-info .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.icon-inner-info:hover .tooltiptext {
visibility: visible;
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content-pop {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:500px;
height:250px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:30px;
height:30px;
background:#222;
color:#fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay {
display:block;
}
.popup.active .content-pop {
transition:all 300ms ease-in-out;
transform:translate(50%,-50%) scale(1);
}
#media(max-width: 750px) {
.popup.active .content-pop {
transform:translate(-10%,-50%) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="font/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- -->
</head>
<body>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

Initially your problem was duplicate IDs. However, after changing them the problem became having the same name for two different functions.
The simplest solution is to pass to the function the ID that you want to open:
For testing purposes, I removed all of your CSS because the popup wasn't aligning correctly.
The word OPEN in my example is your open icon. It works the same, just doesn't have the icon.
function togglePopup(id){
document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-1')">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-2')">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

How can I have my search check for objects on other pages but display on the current page

Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>

Why are my icons being changed when i add this code?

All the code that is asterisked is code that i added, to able the tags to be a link
I would like the div tags to be links to my social medias i have been searching for awhile now.
im in learning mode very clearly.
<div class="mb_share">
<div class="button Facebook slide_x">
<div class="icon"></div>
<div class="slide>
<div class="feature">
**<a href="https://www.facebook.com/profile.php?id=100009674442168></a>
</div>**
<span>
facebook
</span>
</div>
<div class="native_button">
<div>
Click Here
</div>
</div>
</div>
<div class="button twitter slide_y">
<div class="icon"></div>
<div class="slide">
**<div class="feature">
<a href="https://twitter.com/Andigonzolez></a>
</div>**
<span>
twitter
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button youtube slide_nx">
<div class="icon"></div>
<div class="slide">
**<div class="feature">
<a href="https://www.youtube.com/channel/UCmgxz5GCuuc2hrjaj8B4Jgw></a>
</div>**
<span>
youtube
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button gplus slide_ny">
<div class="icon"></div>
<div class="slide">
**<div class="feature">
</div>**
<span>
google
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button linkedin slide_y">
<div class="icon"> </div>
<div class="slide">
**<div class="feature">
</div>**
<span>
linkedin
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button tumblr slide_nx">
<div class="icon"></div>
<div class="slide">
<span>
tumblr
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button github slide_ny">
<div class="icon"></div>
<div class="slide">
<span>
github
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
<div class="button pinterest slide_x">
<div class="icon"></div>
<div class="slide">
<span>
pinterest
</span>
</div>
<div class="native_button">
<div>Click Here
</div>
</div>
</div>
</div>
<div class="separator"></div>
This is the CSS part.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
body {
font-family:Open sans;
}
h1 {
color:#3e4956;
font-size:36px;
text-align:center;
font-weight:600;
margin:100px 0 10px;
}
h2 {
text-align:center;
font-size:18px;
line-height:1.4;
color:#9da0a4;
}
h2 a {
color:#9da0a4;
border-bottom:1px solid #9da0a4;
text-decoration:none;
}
h2 a:hover {
color:#000;
border-color:#000;
}
.separator {
width:300px;
border-bottom:1px solid rgb(224, 224, 224);
margin:0 auto 50px;
}
pre.prettyprint {
width:656px;
height:200px;
margin:25px auto 50px;
overflow-y:scroll;
}
pre.lang-html.over span {
opacity:0.5;
}
pre.lang-html.over span.tutorial, pre.lang-html.over span.tutorial span {
opacity:1;
}
.info {
margin:50px auto 90px;
width:600px;
font-size:12px;
}
.info li {
margin:0 0 10px;
}
.info li span {
font-family:Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
display:inline-block;
padding:5px 10px;
background:#1d1f21;
color:#fff;
}
.mb_share {
width:656px !important;
overflow:hidden;
margin:50px auto;
}
.mb_share .button .native_button div {
font-size:11px;
color:rgb(124, 124, 124);
}
/*=======================*/
/*=== MB share buttons ===*/
.mb_share .button {
background:#DCE0E0;
position:relative;
float:left;
margin:0 7px 14px;
width:150px;
height:40px;
overflow:hidden;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.mb_share .button .icon {
float:left;
z-index:200;
position:relative;
width:40px;
height:40px;
-webkit-border-radius:3px 0px 0px 3px;
-moz-border-radius:3px 0px 0px 3px;
border-radius:3px 0px 0px 3px;
background-repeat:no-repeat;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTIwcHgiIGhlaWdodD0iMTIwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjAgMTIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJGYWNlYm9va18zXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTU3Ljg5NiwxNC42NmMwLDAuNDMyLDAsMi4zNTksMCwyLjM1OWgtMS43Mjl2Mi44ODdoMS43Mjl2OC41NzRoMy41NTZ2LTguNTc0aDIuMzg0DQoJYzAsMCwwLjIyMy0xLjM4NSwwLjMzMS0yLjg5OGMtMC4zMTIsMC0yLjcwMSwwLTIuNzAxLDBzMC0xLjY3OCwwLTEuOTczczAuMzg4LTAuNjkxLDAuNzcxLTAuNjkxczEuMTg4LDAsMS45MzYsMA0KCWMwLTAuMzkzLDAtMS43NSwwLTMuMDA0Yy0wLjk5NywwLTIuMTMxLDAtMi42MzEsMEM1Ny44MSwxMS4zNCw1Ny44OTYsMTQuMjI2LDU3Ljg5NiwxNC42NnoiLz4NCjxwYXRoIGlkPSJMaW5rZWRJbl8zXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTY3LjcxMiw2MS45OHY1LjYwOUg2NC40NnYtNS4yMzRjMC0xLjMxMy0wLjQ3Mi0yLjIxMS0xLjY0Ny0yLjIxMQ0KCWMtMC44OTksMC0xLjQzNSwwLjYwNC0xLjY3LDEuMTg4Yy0wLjA4NiwwLjIwOS0wLjEwNywwLjUtMC4xMDcsMC43OTN2NS40NjRINTcuNzhjMCwwLDAuMDQ1LTguODY1LDAtOS43ODNoMy4yNTZ2MS4zODgNCgljLTAuMDA4LDAuMDEyLTAuMDE2LDAuMDIxLTAuMDIxLDAuMDNoMC4wMjF2LTAuMDNjMC40MzItMC42NjYsMS4yMDMtMS42MTcsMi45MzEtMS42MTdDNjYuMTA3LDU3LjU3NSw2Ny43MTIsNTguOTc1LDY3LjcxMiw2MS45OHoNCgkgTTU0LjM3NSw1My4wOWMtMS4xMTMsMC0xLjg0MywwLjcyOS0xLjg0MywxLjY4OGMwLDAuOTQxLDAuNzA4LDEuNjkzLDEuNzk5LDEuNjkzaDAuMDIyYzEuMTM1LDAsMS44NDEtMC43NTIsMS44NDEtMS42OTMNCglDNTYuMTczLDUzLjgyMSw1NS40ODgsNTMuMDksNTQuMzc1LDUzLjA5eiBNNTIuNzI1LDY3LjU5aDMuMjU0di05Ljc4M2gtMy4yNTRWNjcuNTl6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjguNzEsMTUuMTdjLTAuNjIyLDAuMjc2LTEuMjkxLDAuNDYyLTEuOTkyLDAuNTQ2YzAuNzE2LTAuNDMsMS4yNjYtMS4xMDksMS41MjUtMS45Mg0KCWMtMC42NywwLjM5OC0xLjQxMywwLjY4Ny0yLjIwMywwLjg0MmMtMC42MzItMC42NzQtMS41MzUtMS4wOTYtMi41MzItMS4wOTZjLTEuOTE2LDAtMy40NjksMS41NTMtMy40NjksMy40NjkNCgljMCwwLjI3MiwwLjAzMSwwLjUzNywwLjA5LDAuNzkxYy0yLjg4NC0wLjE0NS01LjQzOS0xLjUyNi03LjE1MS0zLjYyNWMtMC4yOTksMC41MTItMC40NywxLjEwOC0wLjQ3LDEuNzQ1DQoJYzAsMS4yMDQsMC42MTIsMi4yNjUsMS41NDMsMi44ODdjLTAuNTY5LTAuMDE5LTEuMTA0LTAuMTc0LTEuNTcyLTAuNDM0YzAsMC4wMTQsMCwwLjAyOSwwLDAuMDQzYzAsMS42ODEsMS4xOTYsMy4wODMsMi43ODMsMy40MDINCgljLTAuMjkxLDAuMDgtMC41OTcsMC4xMjItMC45MTQsMC4xMjJjLTAuMjI0LDAtMC40NDEtMC4wMjItMC42NTMtMC4wNjJjMC40NDEsMS4zNzgsMS43MjMsMi4zODEsMy4yNDEsMi40MDkNCgljLTEuMTg3LDAuOTMxLTIuNjgzLDEuNDg1LTQuMzA5LDEuNDg1Yy0wLjI4LDAtMC41NTYtMC4wMTYtMC44MjgtMC4wNDhjMS41MzUsMC45ODQsMy4zNTksMS41NTgsNS4zMTgsMS41NTgNCgljNi4zODEsMCw5Ljg3MS01LjI4Niw5Ljg3MS05Ljg3MWMwLTAuMTUtMC4wMDMtMC4zLTAuMDEtMC40NDhDMjcuNjU3LDE2LjQ3NywyOC4yNDQsMTUuODY2LDI4LjcxLDE1LjE3eiIvPg0KPHBhdGggaWQ9IlR1bWJscl8yXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEwMS40MjksNjUuNDYxYy0wLjI3OC0wLjE2NC0wLjUzNi0wLjQ0NS0wLjYzOC0wLjcyYy0wLjEwNC0wLjI3Mi0wLjA5Mi0wLjgyOC0wLjA5Mi0xLjc5Mw0KCXYtNC4yNjRoMy44Nzd2LTIuOTY3aC0zLjg3N3YtMy44NDZoLTIuMzgzYy0wLjEwNywwLjg1NS0wLjMwNCwxLjU2My0wLjU4OSwyLjExOWMtMC4yODQsMC41NTUtMC42NTksMS4wMjktMS4xMzEsMS40MjgNCgljLTAuNDY5LDAuMzk2LTEuMjMxLDAuNzAxLTEuODkyLDAuOTF2Mi4zNTRoMi4yNzd2NS44M2MwLDAuNzYzLDAuMDgsMS4zNDIsMC4yNCwxLjc0MmMwLjE2MiwwLjM5NywwLjQ0OSwwLjc3NiwwLjg2NiwxLjEzNQ0KCWMwLjQxNSwwLjM1MywwLjkxOCwwLjYyNywxLjUwNywwLjgyYzAuNTg5LDAuMTg4LDEuMDQxLDAuMjg0LDEuODA5LDAuMjg0YzAuNjc2LDAsMS4zMDMtMC4wNjcsMS44ODUtMC4xOTgNCgljMC41OC0wLjEzOCwxLjIyOS0wLjM3MywxLjk0NS0wLjcwNXYtMi42MjFjLTAuODQsMC41NDctMS42ODUsMC44MTktMi41MzMsMC44MTlDMTAyLjIyNCw2NS43OSwxMDEuODAxLDY1LjY4MiwxMDEuNDI5LDY1LjQ2MXoiLz4NCjxwYXRoIGlkPSJZb3VUdWJlXzJfIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTA1Ljk0MywyNC40MDRoLTEuMTAxbDAuMDA2LTAuNjM5YzAtMC4yODQsMC4yMzEtMC41MTYsMC41MTktMC41MTZoMC4wNw0KCWMwLjI4NCwwLDAuNTIsMC4yMzIsMC41MiwwLjUxNkwxMDUuOTQzLDI0LjQwNHogTTEwMS44MiwyMy4wMzVjLTAuMjc4LDAtMC41MDgsMC4xODctMC41MDgsMC40MTd2My4xMDYNCgljMCwwLjIyOSwwLjIyOSwwLjQxNiwwLjUwOCwwLjQxNmMwLjI3OSwwLDAuNTA4LTAuMTg4LDAuNTA4LTAuNDE2di0zLjEwNkMxMDIuMzI2LDIzLjIyMiwxMDIuMSwyMy4wMzUsMTAxLjgyLDIzLjAzNXoNCgkgTTEwOC41MTYsMjEuMjk4djUuOTA3YzAsMS40MTgtMS4yMjksMi41NzctMi43MywyLjU3N0g5NC41NTNjLTEuNTAzLDAtMi43My0xLjE1OS0yLjczLTIuNTc3di01LjkwNw0KCWMwLTEuNDE3LDEuMjI5LTIuNTc4LDIuNzMtMi41NzhoMTEuMjMyQzEwNy4yODcsMTguNzIsMTA4LjUxNiwxOS44OCwxMDguNTE2LDIxLjI5OHogTTk1LjMwMiwyNy44NDd2LTYuMjI0bDEuMzk0LDAuMDAxdi0wLjkyMg0KCWwtMy43MTMtMC4wMDV2MC45MDZsMS4xNTksMC4wMDN2Ni4yNDFIOTUuMzAyeiBNOTkuNDc3LDIyLjU1MWgtMS4xNnYzLjMyNGMwLDAuNDgsMC4wMjcsMC43MjEtMC4wMDIsMC44MDYNCgljLTAuMDk2LDAuMjU4LTAuNTIsMC41MzEtMC42ODUsMC4wMjhjLTAuMDI4LTAuMDg5LTAuMDA0LTAuMzU0LTAuMDA1LTAuODEybC0wLjAwNC0zLjM0NmgtMS4xNTRsMC4wMDMsMy4yOTMNCgljMC4wMDEsMC41MDUtMC4wMTMsMC44ODIsMC4wMDQsMS4wNTNjMC4wMjgsMC4zMDIsMC4wMTksMC42NTUsMC4zLDAuODU1YzAuNTIxLDAuMzc2LDEuNTIyLTAuMDU3LDEuNzcyLTAuNTk0bC0wLjAwMSwwLjY4Nw0KCWwwLjkzMiwwLjAwMUM5OS40NzcsMjcuODQ2LDk5LjQ3NywyMi41NTEsOTkuNDc3LDIyLjU1MXogTTEwMy4xOTEsMjYuMzU1bC0wLjAwNC0yLjc2NmMtMC4wMDEtMS4wNTUtMC43ODktMS42ODYtMS44NjEtMC44MzMNCglsMC4wMDYtMi4wNTdsLTEuMTU5LDAuMDAxbC0wLjAwNyw3LjFsMC45NTEtMC4wMTVsMC4wODgtMC40NDFDMTAyLjQyNSwyOC40NjMsMTAzLjE5MywyNy42OTcsMTAzLjE5MSwyNi4zNTV6IE0xMDYuODIyLDI1Ljk4OQ0KCWwtMC44NjksMC4wMDRjLTAuMDAyLDAuMDM1LTAuMDAyLDAuMDc1LTAuMDA0LDAuMTE5djAuNDg1YzAsMC4yNTktMC4yMTUsMC40NzEtMC40NzUsMC40NzFoLTAuMTcxDQoJYy0wLjI2MiwwLTAuNDc2LTAuMjEyLTAuNDc2LTAuNDcxdi0wLjA1NHYtMC41MzVWMjUuMzJoMS45OTJ2LTAuNzUxYzAtMC41NDgtMC4wMTUtMS4wOTYtMC4wNi0xLjQxDQoJYy0wLjE0Mi0wLjk5MS0xLjUzNC0xLjE0OS0yLjIzNy0wLjY0MWMtMC4yMjEsMC4xNTgtMC4zODksMC4zNy0wLjQ4NiwwLjY1NmMtMC4xLDAuMjg0LTAuMTQ3LDAuNjc1LTAuMTQ3LDEuMTY5djEuNjQ5DQoJQzEwMy44OSwyOC43MzYsMTA3LjIyLDI4LjM0NywxMDYuODIyLDI1Ljk4OXogTTEwMi4zNTcsMTcuMDM1YzAuMDYyLDAuMTQ2LDAuMTUzLDAuMjY0LDAuMjgsMC4zNTINCgljMC4xMjMsMC4wODgsMC4yODMsMC4xMzIsMC40NzYsMC4xMzJjMC4xNjYsMCwwLjMxMy0wLjA0NSwwLjQ0My0wLjEzOWMwLjEyOS0wLjA5MiwwLjIzNy0wLjIzMSwwLjMyNi0wLjQxNmwtMC4wMjEsMC40NTVoMS4yOTMNCgl2LTUuNTAzaC0xLjAxOXY0LjI4M2MwLDAuMjMyLTAuMTkyLDAuNDIyLTAuNDI1LDAuNDIycy0wLjQyNC0wLjE5LTAuNDI0LTAuNDIydi00LjI4M2gtMS4wNjN2My43MTENCgljMCwwLjQ3MywwLjAwOSwwLjc4OCwwLjAyMiwwLjk0OEMxMDIuMjYyLDE2LjczNSwxMDIuMjk4LDE2Ljg4OCwxMDIuMzU3LDE3LjAzNXogTTk4LjQzOCwxMy45MjdjMC0wLjUyOCwwLjA0NS0wLjk0LDAuMTMxLTEuMjM3DQoJYzAuMDg4LTAuMjk3LDAuMjQ2LTAuNTM1LDAuNDc3LTAuNzE1YzAuMjI5LTAuMTgsMC41MjEtMC4yNzEsMC44NzctMC4yNzFjMC4yOTksMCwwLjU1NiwwLjA1OSwwLjc3MSwwLjE3NA0KCWMwLjIxNSwwLjExNiwwLjM4MSwwLjI2NiwwLjQ5NiwwLjQ1MmMwLjExNiwwLjE4NiwwLjE5NiwwLjM3NywwLjIzOCwwLjU3M2MwLjA0NCwwLjE5OCwwLjA2NCwwLjQ5NywwLjA2NCwwLjkwMXYxLjM5Mg0KCWMwLDAuNTEtMC4wMjEsMC44ODYtMC4wNiwxLjEyNGMtMC4wNCwwLjIzOS0wLjEyNSwwLjQ2LTAuMjU2LDAuNjY5Yy0wLjEyOSwwLjIwNi0wLjI5NiwwLjM1OS0wLjQ5OCwwLjQ1Nw0KCWMtMC4yMDQsMC4xLTAuNDM4LDAuMTQ4LTAuNzAyLDAuMTQ4Yy0wLjI5NCwwLTAuNTQzLTAuMDQxLTAuNzQ3LTAuMTI2Yy0wLjIwNi0wLjA4NC0wLjM2NC0wLjIxMi0wLjQ3OC0wLjM4MQ0KCWMtMC4xMTQtMC4xNjktMC4xOTQtMC4zNzYtMC4yNDMtMC42MTdzLTAuMDcxLTAuNjAzLTAuMDcxLTEuMDg1TDk4LjQzOCwxMy45MjdMOTguNDM4LDEzLjkyN3ogTTk5LjQ0OSwxNi4xMTMNCgljMCwwLjMxMiwwLjIzMiwwLjU2NiwwLjUxNSwwLjU2NnMwLjUxNC0wLjI1NCwwLjUxNC0wLjU2NnYtMi45MjljMC0wLjMxMi0wLjIyOS0wLjU2NS0wLjUxNC0wLjU2NQ0KCWMtMC4yODEsMC0wLjUxNSwwLjI1NC0wLjUxNSwwLjU2NVYxNi4xMTN6IE05NS44NjksMTcuNTkzaDEuMjIxbDAuMDAxLTQuMjIxbDEuNDQyLTMuNjE1aC0xLjMzNmwtMC43NjcsMi42ODZsLTAuNzc4LTIuNjkyaC0xLjMyDQoJbDEuNTM1LDMuNjI0TDk1Ljg2OSwxNy41OTN6Ii8+DQo8Zz4NCgk8Zz4NCgkJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIyOC4zNTEsNTkuMzkxIDI1Ljg5LDU5LjM5MSAyNS44OSw1Ni45MjkgMjQuNjU4LDU2LjkyOSAyNC42NTgsNTkuMzkxIDIyLjE5Nyw1OS4zOTEgDQoJCQkyMi4xOTcsNjAuNjIgMjQuNjU4LDYwLjYyIDI0LjY1OCw2My4wODEgMjUuODksNjMuMDgxIDI1Ljg5LDYwLjYyIDI4LjM1MSw2MC42MiAJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTkuNjYxLDYyLjI3OGMtMC40OTUtMC4zNzEtMS41NzEtMS4xMzItMS41NzEtMS42NDRjMC0wLjU5OSwwLjE3Mi0wLjg5NCwxLjA3Mi0xLjU5Nw0KCQkJCWMwLjkyMy0wLjcyMywxLjU3Ni0xLjY3MiwxLjU3Ni0yLjg1M2MwLTEuMjg2LTAuNTI1LTIuNDUtMS41MTUtMy4wMTloMS40MDFsMS4xOTItMS4yNWMwLDAtMy45NCwwLTUuMzM2LDANCgkJCQljLTIuNzA5LDAtNC45NjQsMS45OTYtNC45NjQsNC4xOTNjMCwyLjI0MywxLjQ4Miw0LjAzMSw0LjAyOCw0LjAzMWMwLjE3OCwwLDAuMzQ5LTAuMDA5LDAuNTE4LTAuMDIxDQoJCQkJYy0wLjE2NSwwLjMxNi0wLjI4MywwLjY3LTAuMjgzLDEuMDM5YzAsMC42MjUsMC4zNDQsMC45NzksMC43NjgsMS4zOTRjLTAuMzIxLDAtMC42MzEsMC4wMDgtMC45NjcsMC4wMDgNCgkJCQljLTMuMTAyLDAtNS4yNzEsMi4xMzQtNS4yNzEsNC4xODNjMCwyLjAxNiwyLjYxNiwzLjI3Niw1LjcxNiwzLjI3NmMzLjUzNSwwLDUuNzA4LTIuMDA2LDUuNzA4LTQuMDIxDQoJCQkJQzIxLjczNCw2NC4zODMsMjEuMzg0LDYzLjU2OSwxOS42NjEsNjIuMjc4eiBNMTYuNTc4LDU5LjMyN2MtMS40MzgtMC4wNDMtMi44MDYtMS4zNjItMy4wNTUtMy4yNQ0KCQkJCWMtMC4yNDctMS44OSwwLjcxNy0zLjMzNCwyLjE1NC0zLjI5M2MxLjQzOCwwLjA0NSwyLjY2OSwxLjU5NSwyLjkxNywzLjQ4MUMxOC44NDMsNTguMTU1LDE4LjAxNSw1OS4zNywxNi41NzgsNTkuMzI3eg0KCQkJCSBNMTYuMDE1LDY5LjEzYy0yLjE0NCwwLTMuNjktMS4zNTYtMy42OS0yLjk4NWMwLTEuNTk3LDEuODE1LTIuOTc1LDMuOTU4LTIuOTVjMC41LDAuMDA0LDAuOTY2LDAuMDg2LDEuMzg5LDAuMjIzDQoJCQkJYzEuMTY0LDAuODA5LDIuMTAyLDEuMzEzLDIuMzM4LDIuMjM2YzAuMDQ0LDAuMTg2LDAuMDY3LDAuMzc5LDAuMDY3LDAuNTc0QzIwLjA3Niw2Ny44NTgsMTkuMDI3LDY5LjEzLDE2LjAxNSw2OS4xM3oiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxwYXRoIGlkPSJHaXRodWJfX3gyOF9hbHRfeDI5X18zXyIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI1LjQ4Nyw5MS4zNGMwLjMxMSwwLjcwMywwLjUxMiwxLjg3MywwLjIxMiwyLjcyOQ0KCWMxLjIyNSwxLjA0NywxLjY0NiwzLjU5MiwxLjA1NSw1LjY3YzEuNzQ3LDAuMTMzLDMuODI3LTAuMDYzLDUuMTcxLDAuNDcxYy0xLjI1Ni0wLjE1OS0yLjk3MS0wLjQ3Ny00LjU5LTAuMzY2DQoJYy0wLjMwOCwwLjAyMS0wLjc2Mi0wLjAxMS0wLjczOSwwLjQyYzEuODc0LDAuMTQ2LDMuNzM3LDAuMzEsNS4yNzYsMC43ODljLTEuNTI2LTAuMjUtMy4zNzktMC42MjktNS4yNzYtMC42ODUNCgljLTAuNzg0LDEuNTQ3LTIuMzYxLDIuMzA4LTQuNTM3LDIuNDY4YzAuMjMzLDAuNTEsMC42ODIsMC43MDIsMC43OTIsMS41MjFjMC4xNjIsMS4yMjUtMC4yNTYsMy4wMTYsMC4xNTYsMy44MzINCgljMC4xOTksMC4zOTEsMC41MjIsMC40LDAuNzQsMC43MzZjLTAuNTM0LDAuNjMxLTEuODU1LTAuMDcyLTIuMDA3LTAuNzM2Yy0wLjI1Ny0xLjEzOSwwLjM5My0yLjkwMi0wLjMxNS0zLjY3NA0KCWMwLjA1LDEuMjQyLTAuMjkzLDIuOTg0LDAuMDUzLDQuMDk0YzAuMTM3LDAuNDM3LDAuNTMsMC42MDUsMC40MjMsMC45OThjLTIuNDc5LDAuMjUyLTEuNDQzLTMuMjA3LTEuODUtNS4yNQ0KCWMtMC4zNzMsMC4wMjctMC4yMSwwLjU2MS0wLjIxMSwwLjc4OWMtMC4wMSwxLjk5NCwwLjQwOCw0LjcyOS0xLjc0MSw0LjQ2MWMtMC4wNjMtMC40MTgsMC4yODgtMC41NjIsMC40MjEtMC45NDMNCgljMC4zOTUtMS4xMjMtMC4wNzItMi43OTUsMC4xMDctNC4xNDdjLTAuODIsMC42MTksMC4wODYsMi43NzYtMC40MjIsMy44ODZjLTAuMjkzLDAuNjM3LTEuMjM4LDAuOTEzLTEuOTU0LDAuNjI5DQoJYzAuMDkzLTAuNDc2LDAuNTg1LTAuMzk2LDAuNzkyLTAuODQxYzAuMjkxLTAuNjE0LDAuMDAyLTEuNTA0LDAuMTA1LTIuNDEzYy0xLjUxOSwwLjMwMy0yLjY5Ny0wLjA0NC0zLjI3My0wLjk5OA0KCWMtMC4yNTgtMC40MjktMC4zMjItMC45MzMtMC42MzMtMS4zMTJjLTAuMzExLTAuMzgxLTAuODA3LTAuNDMzLTAuOTUtMC45NDVjMS44OC0wLjQ1MiwxLjk1MywxLjkzNywzLjY0MywxLjk5NA0KCWMwLjUxOCwwLjAyMSwwLjc4Ni0wLjE0NywxLjI2Ny0wLjI2MmMwLjEzNS0wLjYwNCwwLjQyMi0xLjA1MiwwLjg0NC0xLjM2NWMtMi4xMDItMC4yODctMy44MzgtMC45NC00LjY0NS0yLjUyMQ0KCWMtMS45MTIsMC4wOTUtMy42NiwwLjM1MS01LjI3OSwwLjczNmMxLjQ2OS0wLjUzNSwzLjI4My0wLjcyNyw1LjIyNy0wLjc4OWMtMC4xMTUtMC42ODgtMS4xMTktMC40OTgtMS43NDItMC40NzMNCgljLTEuMTU4LDAuMDUxLTIuNjE3LDAuMTk1LTMuNTM3LDAuMzY3YzEuMzM2LTAuNDc1LDMuMjA3LTAuNDE2LDUuMDE2LTAuNDE4Yy0wLjU1NC0xLjczNC0wLjM2MS00LjQ4NiwwLjg0NS01LjUxMg0KCWMtMC4zNDMtMC44NjEtMC4yMzUtMi4yNzEsMC4yMTEtMi45MzljMS4zNDcsMC4wNjEsMi4xNjMsMC42NDYsMy4wMDksMS4yMDdjMS4wNDktMC4yOTksMi4xNTItMC40NDcsMy41OS0wLjM2Nw0KCWMwLjYwNSwwLjAzMywxLjIzMywwLjMwNSwxLjY4OCwwLjI2MmMwLjQ0Ni0wLjA0MywwLjkzOC0wLjU0MywxLjM3Mi0wLjczNEMyNC4zNjQsOTEuNDU3LDI0Ljg0Miw5MS4zNjMsMjUuNDg3LDkxLjM0eiIvPg0KPGc+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTU5LjE3LDkxLjkzN2MtNC40NjksMC04LjA5NCwzLjYyNC04LjA5NCw4LjA5M2MwLDMuMzEzLDEuOTk0LDYuMTYyLDQuODQ1LDcuNDE0DQoJCWMtMC4wMjItMC41NjQtMC4wMDUtMS4yNDQsMC4xNDEtMS44NTljMC4xNTYtMC42NTYsMS4wNDEtNC40MDgsMS4wNDEtNC40MDhzLTAuMjU4LTAuNTE4LTAuMjU4LTEuMjgxDQoJCWMwLTEuMTk5LDAuNjk0LTIuMDk2LDEuNTYyLTIuMDk2YzAuNzM2LDAsMS4wOTIsMC41NTMsMS4wOTIsMS4yMTVjMCwwLjc0MS0wLjQ3MywxLjg0OC0wLjcxNSwyLjg3Mw0KCQljLTAuMjAzLDAuODU3LDAuNDMxLDEuNTU5LDEuMjc3LDEuNTU5YzEuNTMzLDAsMi41NjYtMS45NywyLjU2Ni00LjMwM2MwLTEuNzczLTEuMTk1LTMuMTAyLTMuMzY4LTMuMTAyDQoJCWMtMi40NTYsMC0zLjk4MywxLjgzLTMuOTgzLDMuODc1YzAsMC43MDUsMC4yMDcsMS4yMDMsMC41MzIsMS41ODdjMC4xNDksMC4xNzgsMC4xNzEsMC4yNDksMC4xMTYsMC40NTINCgkJYy0wLjAzOSwwLjE0OC0wLjEyOCwwLjUwOC0wLjE2NSwwLjY0OWMtMC4wNTQsMC4yMDQtMC4yMiwwLjI3Ny0wLjQwMywwLjIwMmMtMS4xMzItMC40NjEtMS42NTgtMS43LTEuNjU4LTMuMDkzDQoJCWMwLTIuMywxLjkzOS01LjA1Niw1Ljc4NS01LjA1NmMzLjA4OCwwLDUuMTIzLDIuMjM1LDUuMTIzLDQuNjM3YzAsMy4xNzUtMS43NjYsNS41NDctNC4zNjcsNS41NDdjLTAuODczLDAtMS42OTUtMC40NzMtMS45NzktMS4wMQ0KCQljMCwwLTAuNDcxLDEuODYzLTAuNTY4LDIuMjI2Yy0wLjE3MiwwLjYyMy0wLjUwOCwxLjI0OC0wLjgxNCwxLjczM2MwLjcyOSwwLjIxNSwxLjQ5NiwwLjMzMiwyLjI5NCwwLjMzMg0KCQljNC40NywwLDguMDkzLTMuNjI1LDguMDkzLTguMDk0QzY3LjI2Myw5NS41NjEsNjMuNjQsOTEuOTM3LDU5LjE3LDkxLjkzN3oiLz4NCjwvZz4NCjwvc3ZnPg0K);
}
.mb_share .button .native_button {
width:110px;
height:40px;
float:left;
background:#DCE0E0 !important;
display:table;
}
.mb_share .button .native_button > div {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.mb_share .button .slide {
position:absolute;
right:0;
top:0;
z-index:100;
float:left;
width:110px;
height:40px;
transition:.2s transform linear;
-webkit-transition:.2s -webkit-transform linear;
-moz-transition:.2s -moz-transform linear;
}
.mb_share .button .slide span {
color:#fff;
display:block;
cursor:default;
width:100%;
text-align:center;
margin:10px 0;
padding:2px 0;
font-size:16px;
border-left:1px solid rgba(255,255,255,0.35);
}
/* Transitions */
.mb_share .button.slide_x:hover .slide {
-webkit-transform:translateX(110px);
-moz-transform:translateX(110px);
transform:translateX(110px);
}
.mb_share .button.slide_nx:hover .slide {
-webkit-transform:translateX(-110px);
-moz-transform:translateX(-110px);
transform:translateX(-110px);
}
.mb_share .button.slide_y:hover .slide {
-webkit-transform:translateY(40px);
-moz-transform:translateY(40px);
transform:translateY(40px);
}
.mb_share .button.slide_ny:hover .slide {
-webkit-transform:translateY(-40px);
-moz-transform:translateY(-40px);
transform:translateY(-40px);
}
/*========================*/
/*=== Colors ===*/
/* FACEBOOK */
.mb_share .button.facebook .icon {
background-position:-40px 0;
}
.mb_share .button.facebook > div {
background-color:#305c99;
}
/* TWITTER */
.mb_share .button.twitter .icon {
background-position:0 0;
}
.mb_share .button.twitter > div {
background-color:#00cdff;
}
/* YOUTUBE */
.mb_share .button.youtube .icon {
background-position:-80px 0;
}
.mb_share .button.youtube > div {
background-color:#e22b26;
}
/* GOOGLE PLUS */
.mb_share .button.gplus .icon {
background-position:0 -40px;
}
.mb_share .button.gplus > div {
background-color:#3f3d3e;
}
/* LINKEDIN */
.mb_share .button.linkedin .icon {
background-position:-40px -40px;
}
.mb_share .button.linkedin > div {
background-color:#007bb6;
}
/* TUMBLR */
.mb_share .button.tumblr .icon {
background-position:-80px -40px;
}
.mb_share .button.tumblr > div {
background-color:#2c4762;
}
/* GITHUB */
.mb_share .button.github .icon {
background-position:0 -80px;
}
.mb_share .button.github > div {
background-color:#42c0fb;
}
/* PINTEREST */
.mb_share .button.pinterest .icon {
background-position:-40px -80px;
}
.mb_share .button.pinterest > div {
background-color:#dc0d0a;
}
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
/*==============*/

use a tag instead of div. like this. See this fiddle.
<span class="fa fa-twitter"></span>
https://jsfiddle.net/n23Lopon/1/

Adding multiple pages with a single HTML document

I am attempting to implement a multi-page site with a single HTML document.
I want to display 'home', 'about', 'projects', and 'contact' when a user clicks on a certain link in my sidebar.
I have the following code written:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Home</p>
</div>
<div class="footer">
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>About</p>
</div>
<div class="footer">
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Projects</p>
</div>
<div class="footer">
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Contact</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
css/main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:relative;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
line-height: 2;
color: white;
display:flex; align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
margin-top: -80px; /* Header height */
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
}
.content h1 {
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position:absolute;
}
.footer a img {
position: relative;
top: -5px;
}
but when I click on an option, it gives an expected problem: the 'page' that should be hidden isn't being hidden and only part of the requested page is being shown.
The jsfiddle found here shows my problem.
Why isn't this working? The javascript in the head is meant to find the difference between all the pages and the page requested, show the requested page and hide the rest.
Thanks in advance,
erip

See the fiddle
Replace
for (hidden in hide_these) {
document.getElementById(hidden).style.display = 'none';
}
with
for (hidden in hide_these) {
document.getElementById(hide_these[hidden]).style.display = 'none';
}
The problem with your code was that document.getElementById() was returning null because the values for the variable hidden was actually 0,1,2 etc.
you actually had to get the ids from the array hide_these
UPDATE
Add this in your CSS
The messing up of the background image is because you are missing the below given css. add them to solve the issue..
#about, #projects, #contact {
width: 100%;
height:100%;
}

Develop Reference

JavaScript is the programming language of the Web.

Div goes outside screen - javascript

This: .countdown-container has this: -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); set of properties. There are other issues with the page, but for that specific thing, you should be set with adjusting or removing them.

Related

move figcaption under the image for mobile devices

wrong modal popup on click (html, css, js)

How can I have my search check for objects on other pages but display on the current page

Why are my icons being changed when i add this code?

Adding multiple pages with a single HTML document

Categories

Resources