White Space on Website #31475

AbdulMevawala · 2020-08-14T03:24:37Z

AbdulMevawala
Aug 14, 2020

Hi, I'm creating my first website using html, css, and a little bit of java script. on one of the pages of my website, there is a lot of whitespace that is showing up at the bottom the page as so.

This is the code i have written for HTML

<!DOCTYPE html>
<html>
<head>
	<title>AH.Pegasus</title>
	<link rel="stylesheet" type="text/css" href="aboutcss.css">
</head>
	<img src="Logo.png" alt="AH.Pegasus">
<a href="index.html">
	<h4>Home</h4>
</a>
<a href="about.html">
	<h4>About</h4>
</a>
<a href="services.html">
	<h4>Services</h4>
</a>
<a href="location.html">
	<h4>Location</h4>
</a>
<a href="contact.html">
<button class="contact">Contact Us</button>
</a>
<body>
	<div class="banner">
  		<div class="banner-text-1">About Us</div></div>
  		<div class="banner-text-2">Welcome to AH.Pegasus</div>
	</div>
	
	<div class="WhoAreWe">
		<h2>Who Are We</h2>
		<svg width="50" height="5">
			<rect width="50" height="5" style="fill:rgb(0,0,255);" />
		</svg>
		<p>Established in 2019 with a vision to<br>
		grow and empower the industry’s most<br> 
		advanced information technologies.</p>
	</div>

	<div class="OurMission">
		<h2>Our Mission</h2>
		<svg width="50" height="5">
			<rect width="50" height="5" style="fill:rgb(0,0,255);" />
		</svg>
		<p>Take your ideas to the next level using<br>
		cutting edge tools in growing<br>
		technology. </p>
	</div>

	<div class="WhatWeValue">
		<h2>What We Value</h2>
		<svg width="50" height="5">
			<rect width="50" height="5" style="fill:rgb(0,0,255);" />
		</svg>
		<p>Client satisfaction and take pride in<br> 
		authentic and ethical work.</p>
	</div>

	<div class="WhyChooseUs">
		<div class="whychooseus">
			<h3><span style="font-weight:normal">Why Choose Us?</span></h3>
			<svg width="70" height="2"style="transform: translate(0px, -40px);" >
				<rect width="70" height="2" style="fill:rgb(0,0,255);" />
			</svg>
		</div>
	</div>

	<div class="pic">
		<img src="productivity.jpg" width="50%" height="600">
	</div>

	<button class="collapsible">Quality Output</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">24x7 Live Support</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Result Oriented Projects</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Cost Optimized</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Award Winning Support Team</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Experienced Professionals</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible1">AWS & Microsoft Azure Certified</button>
<div class="content1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

	<svg width="300" height="10" style="transform: translate(500px, -2490px);">
		<rect width="300" height="10" style="fill:rgb(216,216,216);"/>
	</svg>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

var coll = document.getElementsByClassName("collapsible1");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>
</body>
</html>

And This is the code for CSS

img {
	border-radius: 8px;
	margin-left: 200px;
	margin-top: 5px;
}

h4 {
	display: inline-block;
	margin-left: 30px;
	position: relative;
	left: 410px;
	top: -60px;
	font-size: 14px;
	font-weight: normal;
	font-family: helvetica;
}

h1 {
	text-align: center;
	font-size: 60px;
	font-family: helvetica;
	position: relative;
	top: -50px;
	font-weight: 900;
}

body {
	background-color: #D8D8D8
}

body {
	overflow-x: hidden;
}

.contact {
	border: none;
	border-radius: 24px;
	background-color: blue;
	padding: 12px 30px;
	font-size: 16px;
	cursor: pointer;
	color: white;
	transform: translate(420px, -60px);
}

.contact:hover{
	background: #303030;
}


body, html {
    height: 100%;
}

.banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("AboutUs wala page.jpg");

  height: 50%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.banner-text-1 {
	text-align: center;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-138px, 0px);
	font-size: 60px;
	font-weight: bold;
	font-family: helvetica;
	animation-name: textmove;
	animation-duration: 3s;
}

@keyframes textmove{
	from{transform: translate(-738px, 0px);
		opacity: 0;}
	to{transform: translate(-138px, 0px);
		opacity: 1;}
}

.banner-text-2 {
	text-align: center;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-138px, 50px);
	font-size: 25px;
	font-family: helvetica;
	animation-name: textmove2;
	animation-duration: 3s;
}

@keyframes textmove2{
	from{transform: translate(538px, 50px);
		opacity: 0;}
	to{transform: translate(-138px, 50px);
		opacity: 1;}
}

.WhoAreWe {
	text-align: center;
	transform: translate(-400px, 50px);
	font-family: helvetica;
}

.OurMission {
	text-align: center;
	font-family: helvetica;
	transform: translate(0, -105px);
}

.WhatWeValue {
	text-align: center;
	font-family: helvetica;
	transform: translate(400px, -260px);
}

.pic {
	transform: translate(-200px, -805px);
}

.WhyChooseUs {
	height: 600px;
	width: 100%;
	background-color: #BCBCBC;
	transform: translate(0px, -200px);
}

.whychooseus {
	font-size: 30px;
	font-family: Helvetica;
	transform: translate(880px, 120px);
}

.collapsible {
  background-color: #BCBCBC;
  color: black;
  cursor: pointer;
  padding: 12px;
  width: 40%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-left: black 1px solid;
  border-right: black 1px solid;
  border-top: black 1px solid;
  transform: translate(880px, -1200px);
}

.collapsible1 {
  background-color: #BCBCBC;
  color: black;
  cursor: pointer;
  padding: 12px;
  width: 40%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border: black 1px solid;
  transform: translate(880px, -1200px);
}


.active, .collapsible:hover {
  background-color: #555;
}
.active, .collapsible1:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.collapsible1:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #BCBCBC;
  width: 38.5%;
  transform: translate(880px, -1200px);
  border-left: 0.5px black solid;
  border-right: 0.5px black solid;
}

.content1 {
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #BCBCBC;
  width: 38.5%;
  transform: translate(880px, -1200px);
  border-left: 0.5px black solid;
  border-right: 0.5px black solid;
  border-bottom: 0.5px black solid;
}

I know its a lot, but ive been stuck with this for a while now, if anyone could help, it would greatly be appreciated

Answered by Deckluhm

Aug 15, 2020

This is the Bootstrap repository and since your website isn't using Bootstrap, there are few chances you will get help here (in addition to being kinda off-topic).

You should ask for help on a web development forum or on StackOverflow.

View full answer

Deckluhm · 2020-08-15T10:34:46Z

Deckluhm
Aug 15, 2020

This is the Bootstrap repository and since your website isn't using Bootstrap, there are few chances you will get help here (in addition to being kinda off-topic).

You should ask for help on a web development forum or on StackOverflow.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

White Space on Website #31475

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Bootstrap

White Space on Website #31475

AbdulMevawala Aug 14, 2020

Replies: 1 comment

Deckluhm Aug 15, 2020

AbdulMevawala
Aug 14, 2020

Deckluhm
Aug 15, 2020