How do I center this header? [duplicate] - html

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
How do I center this header? I've tried about everything, and nothing works. ;-;
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
* {
margin: 0;
padding: 0;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
body {
background: #2c3e50;
font-size: 80%;
font-family: 'Open Sans', sans-serif;
}
.bg {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient( 45deg, #f17c58, #e94584, #24aadb, #27dbb1, #ffdc18, #ff3706);
background-size: 600% 100%;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}
#keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
main {
position: relative;
height: 240px;
margin: auto;
padding: 20px;
resize: both;
}
.btn-grp {
height: 68px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #2ecc71;
}
.btn {
text-align: center;
cursor: pointer;
font-size: 24px;
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.btn:hover {
background: #fff;
box-shadow: 0 2px 10px 5px #97b1bf;
color: #000;
}
.btn:after {
content: '';
background: #f1c40f;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
}
.btn:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.down {
Position: absolute;
Bottom: 85%;
}
<html lang="en">
<head>
</head>
<body>
<div class="bg"></div>
<div class="down">
<h1>Welcome</h1>
</div>
<main>
<div class="btn-grp">
<a href="#" target="_blank">
<button class="btn" id="btn-home">Home</button>
</a>
<a href="#" target="_blank">
<button class="btn" id="btn-dl">Download</button>
</a>
</div>
</main>
</body>
</html>


#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
* {
margin: 0;
padding: 0;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
body {
background: #2c3e50;
font-size: 80%;
font-family: 'Open Sans', sans-serif;
}
.bg {
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(
45deg,
#f17c58,
#e94584,
#24aadb,
#27dbb1,
#ffdc18,
#ff3706
);
background-size: 600% 100%;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}
#keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
main {
position: relative;
height: 240px;
margin: auto;
padding: 20px;
resize: both;
}
.btn-grp {
height: 68px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {text-decoration: none; color: #fff;}
a:hover {color: #2ecc71;}
.btn {
text-align: center;
cursor: pointer;
font-size: 24px;
position: relative;
background-color: #f39c12;
border: none;
padding: 20px;
width: 200px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.btn:hover {
background: #fff;
box-shadow: 0 2px 10px 5px #97b1bf;
color: #000;
}
.btn:after {
content: '';
background: #f1c40f;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
}
.btn:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
.down {
Position: absolute;
Bottom: 85%;
width: 100%;
text-align: center;
}
<html lang="en">
<head>
</head>
<body>
<div class="bg"></div>
<div class="down">
<h1>Welcome</h1>
</div>
<main>
<div class="btn-grp">
<a href="#" target="_blank">
<button class="btn" id="btn-home">Home</button>
</a>
<a href="#" target="_blank">
<button class="btn" id="btn-dl">Download</button>
</a>
</div>
</main>
</body>
</html>
Changed the css for only .down class like this :
.down {
Position: absolute;
Bottom: 85%;
width: 100%;
text-align: center;
}

Related

Width problems when giving relative position value

When I try to set the position of a button as "relative" in this specific web.
the width of the page gets increased as you can see by the code provided in snippet, will appreciate if you take a look (Specifically "btn-links1 & btn-links2" classes)
(Absolute value doesn't work as the buttons get misplaced when minimizing the browser window)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--main-color: #00C9A6;
--second-color: #27242B;
--third-color: #545058;
--fourth-color: #FAEAFF;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--third-color);
font-family: 'Roboto', sans-serif;
}
.nav-bar {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
position: fixed;
padding: 15px;
/* background-color: var(--second-color); */
width: 100%;
height: 60px;
z-index: 1030;
}
.active {
border-bottom: 1px solid var(--fourth-color);
}
.logo {
position: relative;
bottom: 4px;
height: 40px;
display: inline-block;
background-color: var(--fourth-color);
transition: .2s;
}
.logo img {
width: 50px;
}
.logo:hover {
opacity: .5;
}
.nav-bar .links li {
padding: 7px;
display: inline-block;
justify-content: space-around;
}
.nav-bar .links {
left: 30px;
position: relative;
/* margin: 10px 0; */
}
.nav-bar .links li a {
list-style: none;
text-decoration: none;
margin-top: 15px;
padding: 0 15px 0 15px;
color: var(--main-color);
text-transform: capitalize;
font-weight: 700;
transition: .2s ease-in-out;
}
.nav-bar .links li:hover a {
color: #00c9a7b9;
}
#home {
position: relative;
width: 100%;
height: 500px;
background-color: var(--third-color);
z-index: 1;
}
.img{
background-image: url(../imgs/Dustin+vs+Claudio_.jpg);
position: absolute;
background-size: cover;
width: 100%;
height: 500px;
z-index: 2;
}
.overlay {
position: absolute;
width: 100%;
height: 500px;
background-color: rgba(33, 31, 35, 0.569);
z-index: 3;
}
.titles h1 {
position: absolute;
font-size: 100px;
font-style: italic;
color: var(--main-color);
z-index: 4;
text-align: center;
top: 0;
left: 170px;
margin: 155px 0;
padding: 5px;
text-transform: capitalize;
}
/* start Button styling */
.btn-link1 {
position: relative;
left: 297px;
bottom: 208px;
text-decoration: none;
}
.btn-link1 a{
position: absolute;
width: 0;
text-decoration: none;
}
.button-86 {
all: unset;
width: 100px;
height: 30px;
font-size: 16px;
background: transparent;
border: none;
position: relative;
color: var(--third-color);
cursor: pointer;
z-index: 1;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-86::after,
.button-86::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all .4s;
}
.button-86::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: var(--fourth-color);
border-radius: 10px;
}
.button-86::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 50px;
}
.button-86:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
background-color: var(--main-color);
}
.button-86:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button-86:active::after {
transition: 0s;
transform: translate(0, 5%);
}
.btn-link1 a span {
font-weight: bold;
transition: all .3s ease-in 0s;
}
.btn-link1:hover a span {
/* font-weight: bold; */
color: black;
}
.btn-link1:hover .fa-instagram {
color: black;
}
.fa-instagram {
/* font-weight: bold; */
color: rgb(120, 5, 221);
margin: 5px;
transition: all .3s ease-in 0s;
}
/* end Button instagram styling */
/* start Button linked in styling */
.btn-link2 {
position: relative;
left: 575px;
bottom: 208px;
text-decoration: none;
}
.btn-link2 a{
position: absolute;
width: 0;
text-decoration: none;
}
.button-87 {
all: unset;
width: 100px;
height: 30px;
font-size: 16px;
background: transparent;
border: none;
position: relative;
color: var(--third-color);
cursor: pointer;
z-index: 1;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-87::after,
.button-87::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
z-index: -99999;
transition: all .4s;
}
.button-87::before {
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background: var(--fourth-color);
border-radius: 10px;
}
.button-87::after {
transform: translate(10px, 10px);
width: 35px;
height: 35px;
background: #ffffff15;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 50px;
}
.button-87:hover::before {
transform: translate(5%, 20%);
width: 110%;
height: 110%;
background-color: var(--main-color);
}
.button-87:hover::after {
border-radius: 10px;
transform: translate(0, 0);
width: 100%;
height: 100%;
}
.button-87:active::after {
transition: 0s;
transform: translate(0, 5%);
}
.btn-link2 a span {
font-weight: bold;
transition: all .3s ease-in 0s;
}
.btn-link2:hover a span {
/* font-weight: bold; */
color: rgb(0, 162, 255);
}
.btn-link2:hover .fa-linkedin {
color: black;
}
.fa-linkedin {
color: rgb(0, 162, 255);
margin: 5px;
transition: all .3s ease-in 0s;
}
/* end Button linked in styling */
<div class="nav-bar">
<a class="logo" href="#home">
<img src="imgs/lw-logo.png" alt="">
</a>
<ul class="links">
<li class="active">home</li>
<li>portraits</li>
<li>behind the scenes</li>
<li>action</li>
<li>fine art</li>
<li>contact me</li>
</ul>
</div>
<div id="home">
<div class="background">
<div class="img"></div>
<div class="overlay"></div>
</div>
<div class="titles">
<h1>lw photography</h1>
</div>
</div>
<div class="btn-link1">
<a href="https://www.instagram.com">
<button class="button-86" role="button">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</button>
</a>
</div>
<div class="btn-link2">
<a href="https://www.linkedin.com/in/lane-walbert-0b838a9a/">
<button class="button-87" role="button">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</button>
</a>
</div>
Scroll bar down bottom as page width got increased

Card title disappear despite z-index?

I'm trying to make a card with a title and description but when I set a background image on that image, my card title disappeared but not my description. It happens even if I do the same code for both of them.
I know I don't have to write here animation codes too but I really don't have any idea why this is happening.
Image:
z-index doesn't work I guess.
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background-image: url(web_image_html.jpeg);
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_title {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 30px;
}
.index_description {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
width: 100%;
font-size: 18px;
}
.index_title,
.index_description {
background-color: rgba(82, 81, 81, 0.56);
height: 80px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</a>
</div>

Remove overflow hidden from the below code
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
position: relative;
color: white;
cursor: pointer;
}

You're on the right track! But you're fumbling a little with the usage of display: flex; and position: absolute;. display: flex; should be used on the parent to see the result on the child(ren), you're using it directly on the children (.index_title and .index_description).
For trying to position 2 elements together with position: absolute; I'd recommend wrapping them together, so you only have to position 1 element!
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background: url(web_image_html.jpeg) red;
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_content {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(82, 81, 81, 0.56);
}
.index_title {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #000;
}
.index_description {
font-family: 'Inter', sans-serif;
font-size: 18px;
}
.index_title,
.index_description {
width: 100%;
margin: 0;
text-align: center;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<div class="index_content">
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</div>
</a>
</div>

how can I place show the circle div on top slider div?

The problem is the circle div is not appearing. I need to show the circle div on top of everything but I can't. How can I show the circle div?
.home {
height: 100vh;
overflow: hidden;
position: relative;
}
.home .slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
display: none;
padding: 0 15px;
animation: slide 2s ease;
}
.home .slide.active {
display: flex;
}
#keyframes slide {
0% {
transform: scale(1);
/*1.1*/
}
100% {
transform: scale(1);
}
}
.containers {
max-width: 1170px;
margin: auto;
}
.home .containers {
flex-grow: 1;
}
.home .caption {
width: 50%;
}
.home .caption h1 {
font-size: 42px;
color: #000000;
margin: 0;
}
.home .slide.active .caption h1 {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1s;
}
.home .caption p {
font-size: 18px;
margin: 15px 0 30px;
color: #222222;
}
.home .slide.active .caption p {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.2s;
}
.home .caption a {
display: inline-block;
padding: 10px 30px;
background-color: #000000;
text-decoration: none;
color: #ffffff;
}
.home .slide.active .caption a {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.4s;
}
#keyframes captionText {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.home .controls .prev,
.home .controls .next {
position: absolute;
z-index: 2;
top: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
color: #ffffff;
background-color: #FF5722;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
transition: all .5s ease;
}
.home .controls .prev:hover,
.home .controls .next:hover {
background-color: #000000;
}
.home .controls .prev {
left: 0;
}
.home .controls .next {
right: 0;
}
.home .indicator {
position: absolute;
left: 50%;
bottom: 30px;
z-index: 2;
transform: translateX(-50%);
}
.home .indicator div {
display: inline-block;
width: 25px;
height: 25px;
color: #ffffff;
background-color: #FF5722;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin: 0 3px;
}
.home .indicator div.active {
background-color: #000;
}
<section class="home">
<div class="circle" style="height: 350px; width: 350px; border: 70px solid #E5E4F0; border-radius: 50%; margin-top: -100px; margin-left: -100px;position: relative;">
</div>
<div class="slider">
<div class="slide active" style="background-image: url('img/home.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title One"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('img/home1.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title Two"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('img/home2.jpg')">
<div class="containers">
<div class="caption">
<h1>"Title Three"</h1>
</div>
</div>
</div>
</div>
<!-- controls -->
<div class="controls">
<div class="prev">
<</div>
<div class="next">></div>
</div>
<!-- indicators -->
<div class="indicator">
</div>
</section>

The main reason this isn't working is because of z-index - your slides have a z-index of 1 so your circle needs to have a higher z-index to appear above the slide.
Also, as you want the circle to appear in a specific location at all times, you could consider using position:absolute - it gets a bad rap sometimes but that's just because it is often used inappropriately :) It is ideal for positioning an element precisely inside a parent container - that's what it was designed for!
These are the changes:
.circle {
height: 350px;
width: 350px;
border: 70px solid #E5E4F0;
border-radius: 50%;
/* make sure the z-index value is higher than
all other elements you want this element to appear over */
z-index:10;
/* set the position exactly where you want: */
position: absolute;
top: -100px; /* these can be % values if you want it more responsive */
left: -100px;
}
Working example: (FYI This shows the circle in the same place as in your example - if this is a responsive design I assume you have other code to adjust the circle position)
.circle {
height: 350px;
width: 350px;
border: 70px solid #E5E4F0;
border-radius: 50%;
/* make sure the z-index value is higher than
all other elements you want this element to appear over */
z-index:10;
/* set the position exactly where you want: */
position: absolute;
top: -100px;
left: -100px;
}
.home {
height: 100vh;
overflow: hidden;
position: relative;
}
.home .slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
display: none;
padding: 0 15px;
animation: slide 2s ease;
}
.home .slide.active {
display: flex;
}
#keyframes slide {
0% {
transform: scale(1);
/*1.1*/
}
100% {
transform: scale(1);
}
}
.containers {
max-width: 1170px;
margin: auto;
}
.home .containers {
flex-grow: 1;
}
.home .caption {
width: 50%;
}
.home .caption h1 {
font-size: 42px;
color: #000000;
margin: 0;
}
.home .slide.active .caption h1 {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1s;
}
.home .caption p {
font-size: 18px;
margin: 15px 0 30px;
color: #222222;
}
.home .slide.active .caption p {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.2s;
}
.home .caption a {
display: inline-block;
padding: 10px 30px;
background-color: #000000;
text-decoration: none;
color: #ffffff;
}
.home .slide.active .caption a {
opacity: 0;
animation: captionText .5s ease forwards;
animation-delay: 1.4s;
}
#keyframes captionText {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.home .controls .prev,
.home .controls .next {
position: absolute;
z-index: 2;
top: 50%;
height: 40px;
width: 40px;
margin-top: -20px;
color: #ffffff;
background-color: #FF5722;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
transition: all .5s ease;
}
.home .controls .prev:hover,
.home .controls .next:hover {
background-color: #000000;
}
.home .controls .prev {
left: 0;
}
.home .controls .next {
right: 0;
}
.home .indicator {
position: absolute;
left: 50%;
bottom: 30px;
z-index: 2;
transform: translateX(-50%);
}
.home .indicator div {
display: inline-block;
width: 25px;
height: 25px;
color: #ffffff;
background-color: #FF5722;
border-radius: 50%;
text-align: center;
line-height: 25px;
margin: 0 3px;
}
.home .indicator div.active {
background-color: #000;
}
<section class="home">
<div class="circle">
</div>
<div class="slider">
<div class="slide active" style="background-image: url('http://lorempixel.com/1000/350/animals/4')">
<div class="containers">
<div class="caption">
<h1>"Title One"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('http://lorempixel.com/1000/350/animals/3')">
<div class="containers">
<div class="caption">
<h1>"Title Two"</h1>
</div>
</div>
</div>
<div class="slide" style="background-image: url('http://lorempixel.com/1000/350/animals/2')">
<div class="containers">
<div class="caption">
<h1>"Title Three"</h1>
</div>
</div>
</div>
</div>
<!-- controls -->
<div class="controls">
<div class="prev">
<</div>
<div class="next">></div>
</div>
<!-- indicators -->
<div class="indicator">
</div>
</section>

Expand div to fill page width

I'm writing a bookmarking program, and for the past few days, this bug has caught my eye: The "I'm Niva, a: " bar doesn't extend to fill up the whole page's width. I've already attempted checking the console, and adding 0 margins+paddings, but nothing seems to work. If anyone could provide a solution, that would be great!
#wide{
color:white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color:rgba(51,153,255,0.5);
}
Program:
https://codepen.io/Refath/pen/RjwOQN
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>

body {
height: 100%;
/* overflow: auto; */
}
#import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
/**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
align-content: no-repeat center center fixed;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
background-color: rgba(3, 3, 3, 0.21);
transition: all ease 0.2s;
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: fixed;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1c,
.r2c,
.r3c,
.r4c,
.circle {
animation: around infinite;
animation-duration: 30s;
animation-direction: reverse;
}
.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.circle {
background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
background-position: -5px -6px;
opacity: 0.9;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.07s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
overflow: hidden;
top: 400px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent.off {
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around infinite;
}
.parent.custom {
animation-duration: 30s;
}
#keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#wide {
color: white;
font-size: 60px;
font-family: 'Quicksand', sans-serif;
flex: 0.1;
background-color: rgba(51, 153, 255, 0.5);
}
#narrow {
color: lightblue;
font-size: 60px;
flex: 0.9;
font-family: 'Quicksand', sans-serif;
background-color: rgba(51, 153, 255, 0.7);
}
.name {
position: relative;
font-size: 60px;
text-align: center;
font-family: 'Quicksand', sans-serif;
}
.rotate-text {
color: white;
font-size: 60px;
flex: 0.5;
font-family: 'Quicksand', sans-serif;
background: lightblue;
background-color: rgba(51, 153, 255, 0.8);
}
#parent {
display: flex;
background-color: red;
}
.juan {
font: 40px/50px Arial;
text-align: center;
}
.jesus {
text-align: center;
font-size: 20px;
}
.rotate-text {
display: inline-block;
background-color: lightgreen;
}
.rotating {
float: right;
overflow: hidden;
position: relative;
height: 100px;
}
.inside {
display: inline-block;
color: lightblue;
position: relative;
white-space: nowrap;
top: -20px;
left: 0px;
animation: move 5s;
animation-iteration-count: infinite;
animation-delay: 1s;
padding: 20px;
}
#keyframes move {
0% {
top: -20px;
}
20% {
top: -100px;
}
40% {
top: -200px;
}
60% {
top: -300px;
}
}
.name {
color: white;
}
.options {
width: 400px;
height: 450px;
color: white;
padding: 15px 10px 0px 5px;
float: left;
position: relative;
top: -340px;
left: 20px;
}
.gtext,
.atext,
.ytext,
.ftext {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
width: 20px;
height: 25px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
}
li {
padding: 7px;
}
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
/* overflow: auto; */
}
button {
fill: red;
}
.setText {
text-align: center;
font-size: 20px;
}
button {
color: red;
}
/**Derived from: **/
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 160px;
height: 236px;
text-align: center;
vertical-align: middle;
font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
width: 300px;
overflow: visible;
overflow-y: scroll;
padding-left: 20px;
transition: 0.9s ease-out all;
}
.main-menu {
padding-left: 20px;
background: #fbfbfb;
position: absolute;
top: 100px;
background-color: rgba(51, 153, 255, 0.5);
bottom: 0px;
height: 90%;
left: 0;
width: 20px;
overflow: visible;
overflow-y: scroll;
-webkit-transition: width .05s linear;
transition: width .05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
z-index: 1000;
padding-top: 20px;
transition: 0.9s ease-out all;
padding-bottom: 50px;
}
.featureName {
transform: rotate(-90deg);
position: relative;
top: 50%;
right: 10px;
}
.main-menu:hover>.featureName {
visibility: hidden;
}
.main-menu>ul {
margin: 2px 0;
}
.main-menu li {
position: relative;
display: block;
width: 250px;
}
/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
color: #999;
font-family: arial;
font-size: 14px;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.main-menu .nav-icon {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size: 18px;
}
.main-menu .nav-text {
position: relative;
display: table-cell;
vertical-align: middle;
width: 20px;
}
.main-menu>ul.logout {
position: absolute;
left: 0;
bottom: 0;
}
.no-touch .scrollable.hover {
overflow-y: visible;
overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
overflow-y: auto;
overflow: visible;
overflow-y: scroll;
}
a:hover,
a:focus {
text-decoration: none;
}
nav {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
nav ul,
nav li {
outline: 0;
margin: 0;
padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
color: #fff;
background-color: #5fa2db;
}
.blurredBg {
height: 100%;
width: 100%;
text-align: center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#ImageUrl {}
#charset "utf-8";
#import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
left: 70%;
position: absolute;
top: 50%;
transition: 0.3s all ease;
}
/* ---------- SOCIAL ---------- */
.social {
position: relative;
height: 3em;
width: 13.5em;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 4em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
transition: 0.3s all ease;
}
.social li:hover {
-webkit-transform: scale(1.3, 1.3) rotate(45deg);
-moz-transform: scale(1.3, 1.3) rotate(45deg);
-ms-transform: scale(1.3, 1.3) rotate(45deg);
-o-transform: scale(1.3, 1.3) rotate(45deg);
transform: scale(1.3, 1.3) rotate(45deg);
transition: 0.3s all ease;
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.container img {
width: 50px;
position: relative;
top: -20%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.dribbble {
background-color: lightblue;
left: 50%;
top: 0%;
width: 5em;
height: 5em;
}
.dribbble img {
top: 0%;
}
.social .dribbble {
width: 5em;
height: 5em;
left: 46%;
top: -50%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.linked-in {
background: #157f9d;
left: 100%;
top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="blurredBg">
</div>
<div id="parent">
<div class="animated slideInLeft" id="wide">
<center>Hi.</center>
</div>
<div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
<center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
<b class="rotating"> <span class = "inside">
One-Stop Shop<br>
Music Player<br>
Task Manager<br>
Hover Me!
</span></b>
</center>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div id="weather"></div>
<div class="circle">
</div>
<a href="https://www.google.com" class="glink">
<div class="r1c">
</div>
</a>
<a href="https://www.youtube.com" class="ylink">
<div class="r2c">
</div>
</a>
<a href="https://www.facebook.com" class="flink">
<div class="r3c">
</div>
</a>
<a href="https://www.amazon.com" class="alink">
<div class="r4c">
</div>
</a>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 class="name">
~ Refath</h2>
<div class="area"></div>
<nav class="main-menu">
<div class="featureName">Settings</div>
<div class="jesus">
<h3>Settings</h3>
<hl>
<ul>
<li class="gChange">Google</li>
<button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
<button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
document.getElementById('gSave').click()">
<li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
<li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
<li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
<li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
<button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
<li class="bgChange">Background Image</li>
<input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
<br> <br>
<button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
</ul>
</div>
</nav>
<div class="container">
<ul class="social">
<li class="dribbble">
<img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png">
</li>
</ul>
</div>
<form>
<label>Enter a new task:</label>
<input class="input" type="text">
<input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also you have a problem with
.main-menu {
height: 90%;
It should be
height: calc(100% - 100px);
But it would be better if you remove height (or set it to auto) and use only
bottom: 0;
So The block will fit regardless window size:

Problem solved! Turns out there was a padding code afterwards interfering with my commands!

position: relative; interrupts css opacity in web page

When adding position: relative; to the code the background popup window won't get any opacity - what is the reason for that? I don't understand why centering the web page should affect background opacity.
Thanks for anyone that can help!!
<html>
<head>
<style>
body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}
.one {
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
</style>
</head>
<body>
<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
1
</div>
</div>
</div>
</body>
</html>

Link
Add height to the html and body element
CSS
html,
body
{
height: 100%;
}
CSS Errors
.one
{
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow: hidden;
float: left;
position: absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
/* incorrect value
text-vertical-align: middle;
*/
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
/*
transition: opacity 500ms;
*/
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
}