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

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

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/

Related

Divs are moving around when resizing/zooming-in/out page

If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot:Screenshot
<style>
/* KEYFRAMES */
/* IDS */
#changepos{
position:relative;
top:-250px;
}
#readmore{
position:relative;
top:-260px;
right:380px;
text-decoration-line:none;
border-radius:20px;
}
#movetext{
position:relative;
right:395px;
}
#wholepage{
width:500px;
margin-left:auto;
margin-right:auto;
}
#hello{
position:relative;
left:20px;
}
#hellos{
position:relative;
left:100px;
}
/* Body Visual */
input{
width:50%;
overflow:hidden;
}
main{
background-color:lightgray;
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-x:hidden;
}
body{
background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-wrap:hidden;
overflow-x:hidden;
}
/* Classes */
.typewriter {
font-family: Courier, monospace;
display: inline-block;
}
.typewriter-text {
display: inline-block;
overflow: hidden;
letter-spacing: 2px;
animation: typing 5s steps(30, end), blink .75s step-end infinite;
white-space: nowrap;
font-size: 30px;
font-weight: 700;
border-right: 4px solid orange;
box-sizing: border-box;
}
#keyframes typing {
from {
width: 0%
}
to {
width: 100%
}
}
#keyframes blink {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
.forms{
position:relative;
left:50px;
}
.lineh{
border-bottom: 4px solid lightgray;
width:1400px;
height:3px;
cursor:default;
position:relative;
border-radius:100px;
top:-11px;
}
.lines{
border-bottom: 2px solid none;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
top:-195px;
right:400px;
}
.line{
 border-bottom: 2px solid pink;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
}
.movepic{
position:relative;
left:270px;
top: -200px;
right:0px;
bottom:0px;
cursor:default;
opacity:1;
transition:1s;
}
.movepic:hover{
transform:translateX(20px);
}
.joint{
font-family:monospace;
font-size:10px;
text-decoration-line:none;
text-decoration-color:none;
text-decoration:none;
color:white;
}
.transp{
position:relative;
border-style:solid;
border-radius:50px;
background-color:none;
opacity:0.6;
cursor:pointer;
border:none;
overflow:hidden;
transition:1s;
border-image-width: 5px;
}
.transp:hover{
transform:translate(30px);
opacity:1;
transform-style: preserve-3d;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family:monospace;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roma's Portfolio</title>
<link rel="stylesheet" href="../sait/css/main.css">
<link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="350">
<style>
.putebi{
width: 100%;
border-radius:4px;
padding:12px;
border:1px solid #d9a7c9;
box-sizing: border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
.med{
position:relative;
outline:none;
border-style:none;
opacity:0.6;
}
.med:hover{
opacity:1;
}
.soc{
animation:socebi 3s;
outline:none;
border-style:none;
}
#keyframes socebi{
from{
opacity:0;
transform:translateX(-600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
.kont{
animation: animacia 3s;
}
#keyframes animacia{
from{
opacity:0;
transform:translateX(600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
</style>
</head>
<body>
<div>
<div style="overflow-x:hidden;"id="hello" class="transp"> <h1> Roma's Portfolio</h1> </div>
</div>
<div class="lineh"></div>
<div class="wholepage">
<div style="text-align:center; text-decoration:none">
<a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
<a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
<a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
<a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
<div class="typewriter">
<q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
</div><br><br>
<div style="cursor:default;"class="soc">
<a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
</div>
<br><br><br>
</div>
</div>
</div>
<div id="wholepage">
<div id="movetext" style="color:white; font-family:monospace; font-size:large">
<h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br>
<h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3>
</div>
<div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div>
<div class="changepos lines kont">
</div>
<button id="readmore" class="btn btn3 kont">Read More</button><br><br>
</div>
<div style="position:relative; top:-180px">
<form action=""style="text-align:center">
<h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
<div class="typewriter">
<h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1>
</div><br>
<label style="font-family:;"for="saxeli">Enter Username</label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
<label id="email">Enter Email </label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br>
<label for="free">Enter Text </label>
<textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
<button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>
</form>
<img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
</div>
</div>
<footer>
<p style="color:black; ">All Rights Reserved</p> -->
</footer>
</body>
</html>

It seems like, there is a problem with the background image, please try background-size: cover, if this also won't work then please share some more code using any online editor

The website is not responsive, add Media Queries to make your website look nice (the way you want) on any device screen size.

Controlling an image slider using jQuery

I have an image slider done with jQuery.
The images slide perfectly but when I press the pause and/or play button nothing happens.
<script type="text/javascript">
$(function(){
$('#play').click(function() { $('#slider').cycle('resume'); return false; });
$('#pause').click(function() { $('#slider').cycle('pause'); return false; });
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
pager: '#pager',
timeout: 3000,
speed: 900
});
});
</script>
in any case there it goes my html code
<div id="hero">
<div id="pager"></div>
<div id="pause">≈</div>
<div id="play">Δ</div>
<div id="next">〉</div>
<div id="prev">〈</div>
<div id="slider">
<div class="items">
<img src="image/251H.jpg" alt="Free Images">
<div class="info">
<h2>Secret of a good image</h2>
<p>He is walking anywhere. Learn more</p>
</div>
</div><!---end of items--->
<div class="items">
<img src="image/251H.jpg" alt="Free Images">
<div class="info">
<h2>Secret of a good image</h2>
<p>He is walking anywhere. Learn more</p>
</div>
</div><!---end of items--->
<div class="items">
<img src="image/251H.jpg" alt="Free Images">
<div class="info">
<h2>Secret of a good image</h2>
<p>He is walking anywhere. Learn more</p>
</div>
</div><!---end of items--->
<div class="items">
<img src="image/251H.jpg" alt="Free Images">
<div class="info">
<h2>Secret of a good image</h2>
<p>He is walking anywhere. Learn more</p>
</div>
</div><!---end of items--->
<div class="items">
<img src="image/251H.jpg" alt="Free Images">
<div class="info">
<h2>Secret of a good image</h2>
<p>He is walking anywhere. Learn more</p>
</div>
</div><!---end of items--->
</div><!---end of slider--->
</div> <!--end of id >
For some extra needed here goes the css:
#hero{
width:960px;
height:500px;
display:block;
position: relative;
I margin:auto;
}
#slider{
width:100%;
height:500px;
display:block;
position: absolute;
bottom:100px;
margin:auto;
overflow:hidden;
}
.info{
width:960px;
height:80px;
display:block;
position:relative;
background-color:aquamarine;
z-index: 99;
}
.info h2{
padding: 15px 0 0 20px;
}
.info p{
padding: 0 0 0 20px;
}
#play{
width:40px;
height:40px;
line-height: 40px;
text-align:center;
display:block;
position:absolute;
top:0;
right:44px;
background-color:greenyellow;
color:bisque;
cursor:pointer;
z-index:99;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#pause{
width:40px;
height:40px;
line-height: 40px;
text-align:center;
display:block;
position:absolute;
top:0;
right:88px;
background-color:greenyellow;
color:bisque;
cursor:pointer;
z-index:99;
}
#next{
width:40px;
height:40px;
line-height: 40px;
text-align:center;
display:block;
position:absolute;
top:0;
right:0;
background-color:greenyellow;
color:bisque;
cursor:pointer;
z-index:99;
}
#prev{
width:40px;
height:40px;
line-height: 40px;
text-align:center;
display:block;
position:absolute;
top:0;
right:133px;
background-color:greenyellow;
color:bisque;
cursor:pointer;
z-index:99;
}
#pager{
width:100%;
text-align: center;
display: block;
position: absolute;
cursor: pointer;
z-index: 999;
}
#pager a{
font-size: .0em;
color:transparent;
width:10px;
height:10px;
display: inline-block;
position:relative;
border: 1px solid #FFF;
border-radius: 20px;
background: transparent;
margin: 10px;
}
#pager a.activeSlide{
background: #C00;
}
Have no idea of what the problem can be for the play and pause actions.
Any help?

How do I slide a Div in <li> using javascript or Jquery?

I am required to me make a Textual slider which is going to slide after every 3 seconds but I am not able to find out how to to do this.
the slider must slide the div inside it from right to left. It is not just like any image slider.
Kindly help me out how to achieve this, i have tried all the help from stackoverflow and jsFiddle but i am not getting anything thats why I have left my Script blank so that you can tell me how to do step by step.
here is my code:
<div class="dslider">
<div class="d30">
<div class="bottom_mini_slide_container">
<ul class="bottom_ul">
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make1 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make2 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
<li>
<div class="bottom_single_div">
<div class="bottom_single_div_padded">
<span class="make_big"><img src="images/background/client says.png" /></span>
<p>
Make3 an outline by
assembling scattered
elements together...”
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="d70">
<div class="top_mini_slide_container">
</div>
</div>
</div>
CSS:
.dslider{
height: 696px;
width: 100%;
background-color: rgb(255,255,255);
float: left;
background:url(../images/background/Slider%20Background.png) no-repeat;
background-size:100% 100%;
}
.d30{
width:37.5%;
float:left;
height:100%;
}
.d70{
width:62.5%;
float:left;
height:100%;
}
.bottom_mini_slide_container{
width:100%;
height:471px;
position:relative;
top:224px;
border-top:1px solid #000;
border-right:1px solid #000;
}
.top_mini_slide_container{
width:100%;
height:570px;
position:relative;
top:0;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.bottom_ul{
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
.bottom_ul li{
display:block;
width:100%;
height:100%;
overflow:hidden;
float:left;
}
.bottom_single_div{
width:100%;
height:100%;
float:left;
}
.bottom_single_div_padded{
padding-top: 150px;
width: 81%;
height: 289px;
float: left;
padding-right: 19%;
}
.bottom_single_div_padded p{
font-size: 28px;
text-align: left;
padding-left: 65px;
padding-right: 65px;
margin: 0;
margin-top: -39px;
color:#1294de;
padding-top: 83px;
}
.make_big{
font-size: 64px;
position: relative;
left: 39px;
top: 64px;
font-family:mifont;
}
and here is the blank script:
<script>
$('document').ready(function(e) {
setInterval(function(){
}, 3000);
});
</script>

Div goes outside screen

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.

How to make a rollover div clickable?

I have a rollover with text div that I'd like to make clickable/linkable. I'd like to whole div to be clickable not just the headings. But I'm unsure how to do so whether it's in my html or css or if I should add a script? Here's what I have:
<div class="box one">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</div> <!--box one-->
.box{
margin:0 20px 20px 0;
float: left;
position:relative;
}
.description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:#deefed;
color:#F00;
width:460px;
height:300px;
visibility:hidden;
opacity:0;
display:table;
}
.description-inner {
display:table-cell;
vertical-align:middle;
}
.description h3{
font-size:1.25em;
color:#00a8cf;
font-weight:bold;
font-style:italic;
text-transform:uppercase;
padding:20px 0 0 0;
margin:auto;
text-align:center;
width:90%;
top:50%;
border-top:1px #F00 solid;
}
.description h4 {
color:#00a8cf;
font-style:italic;
font-weight:normal;
padding:0 0 20px 0;
margin:auto;
text-align:center;
width:90%;
border-bottom:1px #F00 solid;
}
.box:hover .description {
visibility: visible;
opacity: 1;
}
And here's the demo: http://jsfiddle.net/L9bat8hj/

Move end a-tag behind the rollover element.
<div class="box one">
<a href="lost.html">
<img src="http://www.mydogbreeders.com/wp-content/themes/dogBreedersResponsive2014/images/dogs/beagle.jpg" alt="Lost" data-over="images/placeholder-image-hover.png" data-out="images/placeholder-image-hover.png">
<div class="description">
<div class="description-inner">
<h3> heading </h3>
<h4> subheading</h4>
</div><!--description-inner-->
</div><!--description-->
</a>
</div> <!--box one-->
http://jsfiddle.net/L9bat8hj/1/

Develop Reference

JavaScript is the programming language of the Web.

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

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

Related

Divs are moving around when resizing/zooming-in/out page

Controlling an image slider using jQuery

How do I slide a Div in <li> using javascript or Jquery?

Div goes outside screen

How to make a rollover div clickable?

Categories

Resources