Website not expanding to show information hidden by jQuery - javascript

I'm learning Javascript/jQuery and trying to make it so that after the submit button is clicked, the website expands and shows the information related to the search (I have not made that part yet, however I'm using a test div to show where it would go, and it's not showing up in full. However, the website is not expanding and no scroll features are showing up.
This is the HTML:
<!DOCTYPE html>
<html lang="end">
<head>
<meta charset="utf-8" />
<title>League of Legends Summoner Stats</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<script src="script.js"></script>
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br>this is another test
<br>another
</section>
</div>
</body>
</html>
This is the CSS:
body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display:inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}
This is the Javascript:
$(function () {
$("#stats").hide();
});
document.getElementById('search_button').onclick = function () {
var search = document.getElementById('summoner_name').value;
$(function () {
$("#stats").show();
});
}
I'm new to HTML/CSS/JS so my code is probably all sorts of messed up.


Since using jQuery, use it for registering the click handlers.... also the problem is the styles applied to #stats
$(function() {
$("#stats").hide();
$('#search_button').click(function() {
$("#stats").show();
});
});
body {
background-image: url("background.jpg");
width: 100%;
background-size: 100%;
}
.region_selector {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
/* bring your own prefixes */
transform: translate(-100%, -50%);
display: inline;
}
#summoner_name {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(5%, -50%);
display: inline;
}
.summoner {
font-size: 14px;
border-width: 2px;
border-radius: 5px;
}
#search_button {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 100%);
display: inline-block;
margin: 0 10px 0 0;
padding: 5px 15px;
font-size: 15px;
color: white;
background-color: #1947D1;
font-family: Tahoma;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 5px;
border-color: #1947D1;
}
#title {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -110%);
display: inline;
color: white;
font-size: 48px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#subtitle {
position: fixed;
top: 50%;
left: 50%;
font-size: 20px;
/* bring your own prefixes */
transform: translate(-50%, -130%);
font-family: tahoma;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: inline;
color: #009933;
font-style: bold;
}
#stats {
position: fixed;
top: 1px;
<!--here is the problem --> left: 50%;
/* bring your own prefixes */
transform: translate(-50%, 200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
<select class="region_selector">
<option value="NA">North America</option>
<option value="EUW">EU West</option>
<option value="EUNE">EU East</option>
<option value="KR">Korea</option>
</select>
</div>
<div id="title">
<h1>LoL Stat Find</h1>
</div>
<div id="subtitle">
<h3>Quickly Find Summoner Stats!</h3>
</div>
<button type="submit" id="search_button">Search</button>
<input name="summoner_name" type="text" maxlength="512" id="summoner_name" placeholder="Summoner Name" class="summoner" />
<div id="stats">
<section id="main">
<h1>THIS IS A TEST</h1>
some more testing
<br/>this is another test
<br/>another
</section>
</div>

Related

Animated hamburger navigation

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>

How can I access a other html file when the device width equals the width of a mobile?

So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 30%;
left: center;
width: 98%;
height: 50%;
}
html {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
margin-top: 20px;
margin: 1%;
box-shadow: 0 1px 10px white, 0 0 40px black, 0 0 80px white;
color: black;
height: 96%;
width: 98%;
}
body {
background-color: white;
float: center;
}
h1 {
color: black;
text-align: center;
font-size: 25px;
margin-bottom: 5px;
text-shadow: 1px 1px 4px gray, 1px 1px 4px white;
}
p {
color: black;
text-align: center;
margin-top: 0px;
font-size: 15px;
}
header {
padding: 1px;
margin: auto;
box-shadow: 0 0 10px white, 0 0 20px white;
}
nav {
margin-left: auto;
margin-top: 50px;
margin-bottom: auto;
float: left;
background-color: white;
height: auto;
width: auto;
}
article {
float: center;
margin-top: 50px;
margin-bottom: auto;
width: auto;
height: 100%;
}
/*NAV Menu*/
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color: black;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: black;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: rgb(0, 0, 0, 0.2);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*Responsive*/
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
footer {
float: center;
margin: auto;
margin-top: 60%;
}
p1 {
text-align: left;
}
.style {
font-size: 30px;
cursor: pointer;
font-family: monospace, arial;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*LOGO*/
img.ri {
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
border-radius: 3px;
width: 100px;
height: 100px;
}
img.ri:empty {
top: 55%;
left: 49%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
html {
background-image: url("C:/Users/Joalu/Desktop/WebApp/img/indexbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body {
margin: 0;
}
header {
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0, 0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0, 0.5);
/* Green background */
border: 0.5px solid rgb(0, 0, 0, 0.5);
color: white;
/* White text */
padding: 20px 33px;
/* Some padding */
cursor: pointer;
/* Pointer/hand icon */
float: left;
/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0, 0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0, 0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri {
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty {
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover {
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0, 0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/MainCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="image/favicon.png" sizes="32x32">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>
scxry
</title>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/12345.mp4" type="video/mp4">
</video>
</div>
<header>
<span class="style" onclick="openNav()">☰</span>
</header>
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "webapp.html";
}
</script>
<nav>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
Home
Store
Social Media
Contact
FAQ
<p>scxry cmpny est. 2020
<p>
</div>
</div>
</nav>
<img src="image/scxrylogo800back.png" class="ri" />
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
#media only screen and (max-width: 500px) {
html{
background-image: url("C:/Users/Joalu/Desktop/scxryshop.de/image/webappbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body{
margin: 0;
}
header{
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0,0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0,0.5);
margin-top: 30px ;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0,0.5); /* Green background */
border: 0.5px solid rgb(0, 0, 0,0.5);
color: white; /* White text */
padding: 20px 33px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left;/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0,0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0,0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri{
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty{
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover{
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0,0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
#media only screen and (max-width: 1920px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/webappcss.css" type="text/CSS" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="https://www.scxryshop.de/">
<button class="btnheader">
<h1>scxry</h1>
</button>
</a>
</header>
<body>
<div class="btn-group">
<a href="https://www.scxryshop.de/">
<button class="btn1">Media</button>
</a>
<a href="https://www.scxryshop.de/About.html">
<button class="btn2">FAQ</button>
</a>
<a href="https://www.scxryshop.de/Contact.html">
<button class="btn3">Contact</button>
</a>
<button class="btn4">About</button>
</div>
<img src="image/custom.png" class="ri" style="height: auto">
<div style="text-align:center">
<a href="https://www.scxryshop.de/">
<span class="dot"></span>
</a>
</div>
<h3>Blog</h3>
<div class="bordr">
<p>This new mobile update will provide you <br> with the
best experience.<br> Be sure to explore the whole website,<br>
some personal information about me:</p>
<p>I'm 15 years old and I'm a student at JKR Wendlingen <br>
I will finish my school soon and will then go <br>
to the MES in Kirchheim.</p>
<p>I was thinking of selling some 3D printed <br>
products because you can almost make everything <br>
therefor prototyping is no problem.</p>
<p>Also I'm looking forward to study abroad <br> and go to the
US. Thank you so much for visting <br>
this website if you need any help <br>
feel free to contact me.
</p>
<p><b>THANK YOU!</b></p>
</div>
<script type="text/javascript">
if (screen.width >= 500) {
document.location = "index.html";
}
</script>
</body>
</html>

There are various elements and techniques to responsive design (changing content and/or layout across different device widths). Try not to think about it as a different HTML page but elements on the same page that show and hide according to the device width.
For example: -
<div class="desktop-content">
<p>This is the content someone will see on a desktop</p>
</div>
<div class="mobile-content">
<p>This is the mobile content</p>
</div>
And then with CSS you can then do something like this: -
.mobile-content{
display:none;
}
#media only screen and (max-width: 500px) {
.desktop-content{
display:none
}
.mobile-content{
display:block;
}
}
The disadvantage here is that you are asking the browser to load both sets of content but only displaying one so if there are large images or a lot of content involved another approach may be better.
If you MUST have 2 separate HTML files then you can do a JavaScript redirect based on the width of the window to the correct one ... but I would not recommend this approach.

Instead on the main page you can use javascript to redirect the user
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "other.html";
} else {
document.location = "index.html";
}
</script>

Change Font color onclick Radio buttons

We are displaying text & two radio buttons in page....
Once we click on Radio buttons, we are changing background color of page according to radio button....
Requirement :
Instead of Background color, i want to change the text color onclick radio button....
I tried below , but it did't worked :
.orange input:checked ~ .text {
color: #F4511E;
}
Code Snippet
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
.orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
}
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

You need to use JS/jQuery for this because > + ~ this are siblings selector so it only select item that are next to it
+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector
UPDATED PEN
$('input[type="radio"]').on('click', function() {
let color = $(this).parent().find('div.button span').css('background-color');
$('.text').css('color', color);
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
/* .orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
} */
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Use below jQuery using siblings
$('input[type="radio"]').change(function () {
if($(this).is(":checked") && $(this).val() == 'amber'){
$(this).parent().siblings('div.text').css('color', '#FFB300');
}
else{
$(this).parent().siblings('div.text').css('color', '#F4511E');
}
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

You need jQuery/js for that - This is a Solution with jQuery:
$(document).ready(function() {
var text = $('.text')
$('input:radio').change(function() {
if ($(this).is(':checked')) {
var color = $(this).val();
text.css('color', color);
}
});
});
Fiddle here: http://jsfiddle.net/tpq16r5L/4/
Alos please be aware that amber is no usable color, so I changed that for exemplary usage to green

Updated answer is here
function myColour(clr)
{
alert(clr);
if(clr == 'orange')
document.getElementsByClassName("text")[0].style.color = '#F4511E'
else if(clr == 'amber')
document.getElementsByClassName("text")[0].style.color = '#FFB300'
else
document.getElementsByClassName("text")[0].style.color = 'black'
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<body>
<div class="text">text</div>
<label class="orange">
<input onclick="myColour('orange')" type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input onclick="myColour('amber')" type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

alert only if i click the icon not the whole row

I want to get an alert when i click the icon not the whole row but for some reason I am getting it on the whole row. What am I doing wrong?
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
http://jsfiddle.net/hgu02x0b/1/

You have the span element displayed as block so it is covering the container width. you can take this out and text-align all children elements in .footer in the center
$("#scroll-top").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
display: inline-block;
position: relative;
left: 50%;
-moz-transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>

You gave the <span id="scroll-top"> element display: block, which makes it take full width.
So if you change your click handler to $("i.fa-chevron-up").click(...) it will work
Updated fiddle
Or you can change <span id="scroll-top"> to display: inline-block and set text-align: center on the footer
Updated fiddle
Or, since the icon has a fixed width, give <span id="scroll-top"> the same width, width: 34px and center it using margin: 0 auto
Updated fiddle

You can be more specific on the element you are targeting, at the moment you are targeting the element with the id of #scroll-top but you can be more specific and target the icon element within that #scroll-top i
$("#scroll-top i").click(function() {
alert('test');
});
.footer {
background-color: black;
color: white;
padding-top: 40px;
}
.footer .fa-round {
padding: 0;
border-radius: 50%;
color: white;
background-color: red;
font-size: 1.3em;
line-height: 1.6em;
height: 34px;
width: 34px;
}
.footer #scroll-top {
display: block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<span id="scroll-top">
<i class="fa fa-round fa-chevron-up"></i>
</span>
</div>

The span is set to display: block. This makes it take up the full row. You can change the jQuery to be more precise:
$("#scroll-top i").click(function() {
alert('test');
});
fiddle

Changed it to display:inline-block. http://jsfiddle.net/hgu02x0b/2/
.footer #scroll-top {
display: inline-block;
cursor: pointer;
z-index: 99999999;
text-align: center;
position: relative;
top: -50px;
left: 50%;
margin-left: -17px;
}
Hope this helps

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