Animated hamburger navigation - javascript

I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.


You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>

Related

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

How do I add a mouseover event to an image

I am trying to create a mouseover event that would turn my images background to black while adding text that would describe the link to another web-page. But everything that I have tried either in CSS or JavaScript does not work and I get errors, not sure how to fix the problem?
var one = document.getElementById("one");
addEventListner("mouseover", link);
addEventListner("mouseout", linkOut);
function link() {
one.style.backgroundColor = "black";
one.textContent = "Our Games";
one.style.textAlign = "center";
one.style.verticalAlign = "middle";
}
function linkOut() {
one.style.backgroundColor = "";
one.textContent = "";
}
This is my my CSS, I think that the overlay option is not working
do to the grid that I have set up for my images. But I am
not quit sure why it wont work.
#dragon {
height: 200px;
}
#chaos {
height: 600px;
}
#logo {
height: 150px;
}
#thunder {
height: 600px;
}
#dice {
height: 235px;
}
h1 {
color: white;
text-align: center;
padding: 32px;
padding-bottom: 0px;
}
/*--------------grid for my images--------------------------*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: black;
}
.row {
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 33.33%;
flex: 33.33%;
max-width: 33.33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/*--------------overlay for links--------------------------*/
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.column:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
This is my HTML
<div class="row">
<div class="column">
<a id="one" href="#"><img id="chaos" src="cardchaos.jpg" alt=""></a>
</div>
<div class="column">
<a id="two" href="#"><img id="dragon" src="dragon card.gif" alt=""></a>
<img id="logo" src="logo.png" alt="">
<a id="three" href="#"><img id="dice" src="Img Try Again.jpg" alt=""></a>
</div>
<div class="column">
<a id="four" href="#"><img id="thunder" src="Thunder Bolt.jpg" alt=""></a>
</div>
</div>

You have a typo in your script. Also what you are trying to do is that you edit the element directly. If you try to remove the textcontent of the element on mouseleave you will lose the original element as well. I recommend doing this with css.
<div class="container">
<img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.container {
position: relative;
width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Have a look of my example and then underneath I fixed your version what is happening. https://codepen.io/shnigi/pen/pojQxNB

MenuBar problems showing css html

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.
<!--JavaScript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
});
function toggleMenu(x) {
x.classList.toggle('openMenu');
}
</script>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/*Menu Bar*/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
}
nav .logo {
display: inline-block;
width: 25%;
padding: 0 5px;
line-height: 80px;
font-size: 24px;
transition: all 0.3s;
text-align: center;
}
nav.black .logo {
color: #fff;
}
nav a {
display: inline-block;
width: 12.5%;
line-height: 80px;
color: #151515;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
text-align: center;
vertical-align: top;
}
nav.black a {
color: #fefefe;
}
nav a:focus {
outline: none;
}
nav a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(img/lol.jpg);
background-size: cover;
background-position: center;
}
/* Hamburger icon */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
width: 35px;
height: 5px;
background-color: #fefefe;
margin: 6px 0;
transition: all 0.4s;
}
.openMenu .hamburger .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.openMenu .hamburger .bar2 {
opacity: 0;
}
.openMenu .hamburger .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*Media*/
#media(max-width: 860px) {
nav {
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
color: #fefefe;
overflow: hidden;
}
.logo {
position: fixed;
top: 0;
}
nav a {
width: 100%;
line-height: calc((100vh - 80px) / 6);
transform: translateY(80px);
visibility: hidden;
}
.openMenu a {
color: #fefefe;
visibility: visible;
}
.hamburger {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.openMenu {
height: 100vh;
}
.slider {
width: 100%;
height: 23%;
}
section.sec1 {
width: 100%;
height: 30%;
}
article#video{
width: 100%;
}
video{
width: 100%;
}
aside{
border-bottom:#e8491d 3px solid;
width: 100%;
height: 250px;
}
aside#welcometext{
font-family: cursive;
width: 100%;
height: 76%;
}
aside#New{
font-family: serif;
height: 100%;
width: 100%;
}
}
/*Slideshow*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider {
overflow: hidden;
height: 450px%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slidy infinite;
}
#keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12% {
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
}
/*Welcome*/
article{
float: left;
margin: 0 auto;
width: 23%;
height: auto;
}
#welcometext{
float: right:
margin: 0 auto;
width: 100%;
height: auto;
border-bottom:#e8491d 3px solid;
height: 38%;
}
#News1{
margin-left: 5%;
width: 52%;
height: 7%;
display: inline-flex;
}
section.News{
border-bottom:#e8491d 3px solid;
height: 100%;
}
aside#New{
padding: 27%;
height: 100%;
width: 100%;
font-family: cursive;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title> Landschaft </title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--Body-->
<body>
<div class="wrapper">
<nav>
<div class="hamburger" onclick="toggleMenu(this.parentNode);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
><a href="about.html">СЪБИТИЯ</a
><a href="index.html">ПЪТЕКИ</a
><a href="index.html">ФОРУМ</a
><a href="index.html">ВРЪЗКИ</a
><a class="active" href="index.html">ВХОД</a>
</nav>
<!--Section - Slideshow-->
<section class="sec1"></section>
<section class="content">
<div class="slider">
<figure>
<div class="slide">
<img src="img/slideshow1.jpg">
</div>
<div class="slide">
<img src="img/slideshow2.jpg">
</div>
<div class="slide">
<img src="img/slideshow3.jpg">
</div>
<div class="slide">
<img src="img/slideshow4.jpg">
</div>
<div class="slide">
<img src="img/slideshow5.jpg">
</div>
</figure>
</div>
</section>
<!--Section Welcome Video-->
<section class="Welcome">
<article id="video">
<video width="295" height="238" controls autopl>
<source src="video.mp4" type="video/mp4">
</video>
</article>
<aside id="welcometext">
<h2><center>Welcome</center></h2>
<center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
</aside>
</section>
<!--Section News-->
<section class="News">
<article id="News1">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
</article>
<aside id="New">
<p> dsadas das </p>
</aside>
</section>
</div>
</body>
</html>

Adding a z-index rule to your nav element solved the problem on my end.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
z-index: 100;
}
Here is a little read on the subject

Give your header/nav a z-index:
nav {z-index:100}
Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.

Animate divs on load and then rotate inside a parent div

I have making a simple skills block on my website. I have skillsWheel class on parent div and then I have an inner div with h2 with a class of Skills. skillsWheel also includes 8 more divs with a class of skill. I have skills div and all the skill div centred inside the skillsWheel with only skills div showing and skill divs hide behind the skills div. I want the skill divs to show with animation on page load to make a circle around the skills div and then start rotating clock or anti clock wise or both. Any idea what I have to do to accomplish this? So far I have done this much.
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill{
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</body>
</html>

Simply add a keyframe (ensure you use prefixes for cross compatibility)
#keyframes rotate{
from {
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
create a div with class skill_container and add all skill container inside.
and add an animation rules to your container with skill class (prefix is also required)
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
Snippet below
$(document).ready(function() {
$(".skill").css({
width: "70px",
height: "70px"
})
})
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill {
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill_container {
position: absolute;
width: 100%;
height: 100%;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill_container">
<div></div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</div>
</div>
</body>
</html>

How do I center my heading?

My heading, 'sKoolTalk' is out of place and I tried a few ways to center it but didn't work. I tried using position: absolute and aligning it but it's not responsive. I want that heading to be like this:
Here's my code:
function displaySignInError() {
var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
switch (schoolName) {
case 'new horizon gurukul':
window.location = "NHGLogin.php";
break;
default:
var schoolErrorMessage = document.getElementById('schoolErrorMessage');
schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist.";
schoolErrorMessage.style.color = 'red';
}
}
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
body {
height: 100vh;
}
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 50%;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 50%;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 50%;
}
#eklavya {
z-index: -1;
background-color: purple;
float: right;
width: 50%;
height: 50%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
color: green;
text-decoration: none;
position: absolute;
left: 43%;
right: 57%;
font-size: 24px;
z-index: 10;
}
#main-heading h2 span {
color: orange;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="abhimanyu"></div>
<div id="arjun"></div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<header>
<div id="main-head">
<!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK -->
<h2><span>sKool</span>Talk</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body>
</html>

Firstly, I separate your heading two parts with span. Their parent element of h2 width:100%. Children of h2 (spans) width 50%, one of 'float:left', one of 'float:right' and after that text align property set their position on the page.
function displaySignInError() {
var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
switch (schoolName) {
case 'new horizon gurukul':
window.location = "NHGLogin.php";
break;
default:
var schoolErrorMessage = document.getElementById('schoolErrorMessage');
schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist.";
schoolErrorMessage.style.color = 'red';
}
}
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
body {
margin : 0px;
height: 100vh;
}
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 50%;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 50%;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 50%;
}
#eklavya {
z-index: -1;
background-color: purple;
float: right;
width: 50%;
height: 50%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
text-decoration: none;
position: absolute;
font-size: 24px;
z-index: 10;
display: block;
text-align: center;
width: 100%;
}
#main-heading h2 span:first-child {
color: orange;
display: inline-block;
width: 50%;
float: left;
text-align: right;
}
#main-heading h2 span:nth-child(2) {
color: green;
display: inline-block;
width: 50%;
float: right;
text-align: left;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="abhimanyu"></div>
<div id="arjun"></div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<header>
<div id="main-head">
<!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK -->
<h2><span>sKool</span><span>Talk</span></h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body>
</html>

This is if you want your text to be exactly center!
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/resposive.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
body {
height: 100vh;
}
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 50%;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 50%;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 50%;
}
#eklavya {
z-index: -1;
background-color: purple;
float: right;
width: 50%;
height: 50%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
color: green;
text-decoration: none;
position: absolute;
font-size: 24px;
z-index: 10;
text-align : center;
}
#main-head{
position: absolute;
width: 100%;
text-align: center;
top: 10%;
}
#main-heading h2 span {
color: orange;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="abhimanyu"></div>
<div id="arjun"></div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<header>
<div id="main-head">
<h2>sKool Talk</h2>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body>
</html>
This is something i think you is closer to what you have in mind
<html><head>
<title>NHG</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/resposive.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
body {
height: 100vh;
}
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 50%;
text-align: right;
}
#abhimanyu h2 {
position: relative;
top: 10%;
padding-right: 5px;
color: orange;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 50%;
text-align: left;
}
#arjun h2 {
position: relative;
top: 10%;
padding-left: 5px;
color: green;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 50%;
}
#eklavya {
z-index: -1;
background-color: purple;
float: right;
width: 50%;
height: 50%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
color: green;
text-decoration: none;
position: absolute;
font-size: 24px;
z-index: 10;
text-align : center;
}
#main-head{
position: absolute;
width: 100%;
text-align: center;
top: 10%;
}
#main-heading h2 span {
color: orange;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="abhimanyu">
<h2>sKool</h2>
</div>
<div id="arjun">
<h2>sKool</h2>
</div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body></html>

Instead of position: absolute; try text-align : center; on #text-heading

Solution:
#main-heading {
color: green;
text-decoration: none;
text-align:center;
font-size: 24px;
z-index: 30;
position: absolute;
width: 100%;
}
function displaySignInError() {
var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
switch (schoolName) {
case 'new horizon gurukul':
window.location = "NHGLogin.php";
break;
default:
var schoolErrorMessage = document.getElementById('schoolErrorMessage');
schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist.";
schoolErrorMessage.style.color = 'red';
}
}
#import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
body {
height: 100vh;
}
#abhimanyu {
z-index: -1;
background-color: green;
width: 50%;
float: left;
height: 50%;
}
#arjun {
z-index: -1;
background-color: orange;
width: 50%;
float: right;
height: 50%;
}
#bheem {
z-index: -1;
background-color: red;
width: 50%;
float: left;
height: 50%;
}
#eklavya {
z-index: -1;
background-color: purple;
float: right;
width: 50%;
height: 50%;
}
#container {
width: 30em;
background-color: #eee;
height: 30em;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
#wrapper {
width: 30rem;
height: 30rem;
border-radius: 50%;
}
#schoolSubmitButton {
margin-top: 35px;
text-align: center;
background-color: white;
border: 2px solid #fef;
height: 2em;
width: 10em;
}
#schoolName {
margin-bottom: 40px;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#schoolNameBox {
height: 2em;
border: none;
width: 26em;
margin-left: 0;
padding-left: 10px;
}
#schoolSubmitButton p {
position: relative;
top: 50%;
position: relative;
top: 30%;
left: 50%;
transform: translate(-50%, -70%);
transform: -webkit-translate(-50%, -70%);
transform: -ms-translate(-50%, -70%);
}
/*
::-webkit-input-placeholder {
padding-left: 10px;
}
:-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
*/
#schoolErrorMessage {
text-decoration: none;
position: relative;
top: 6em;
color: black;
width: 140%;
float: left;
font-size: 15px;
position: relative;
right: 20%;
}
#schoolNameDiv {
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
text-align: center;
}
#main-heading {
color: green;
text-decoration: none;
text-align:center;
font-size: 24px;
z-index: 30;
position: absolute;
width: 100%;
}
#main-heading h2 span {
color: orange;
}
#schoolAvatar {
height: 9em;
width: 9em;
border-radius: 50%;
position: fixed;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.footerHR {
border-top: 1px solid grey;
position: absolute;
bottom: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="main-head">
<!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK -->
<h2><span>sKool</span>Talk</h2>
</div>
</header>
<div id="abhimanyu"></div>
<div id="arjun"></div>
<br>
<div id="bheem"></div>
<div id="eklavya"></div>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="schoolNameDiv">
<div id="schoolName">
<input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name...">
<br>
<button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
<p>Next</p>
</button>
<br>
</div>
<br>
<p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
<script src="JS/script.js"></script>
</body>
</html>

give #main-head fixed width and :
#main-head {
position :absolute;
top:0;
bottom:0;
left:0;
right:0;
}
OR
#main-head {
width:100px;
margin:0 auto;
}

Categories

Resources