I'm looking to create a black square in middle of website

#1

Hi, I’m looking to create a black background in the middle of my website, something that wouldn’t be included in my

. I just can’t seem to find the answer on my own
I just want to know how I could create a black square without anything in it and then later on add text inside it.

#2

Hi @breakthegreat ,
welcome to the freeCodeCamp forum!

This is one way to create a black square:

<div class="black-square"></div>

.black-square {
  height: 100px;
  width: 100px;
  background-color: black;
}

This is one way to position it in the middle of your page.

body {
  display: flex;
  place-content: center center;
  flex-wrap: wrap;
  height: 100vh;
}

https://jsfiddle.net/109megk5/

1 Like
#3

Alright, I kinda came to a workaround using


width:100px;
	height:45%;
	background-color: #272c33;
	width: 75%;
	position: absolute;
	top: 52%;
	left: 10%;
 border-radius: 20px;}

now im just looking to put text that wouldn’t go over the edge of box, is that possible ?

#4

You can handle that with the overflow property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow Adds a scroll-bar if there is too much text …

1 Like
#5

Arfh I’m now having this white space on the footer
Anyway I can fix it ?

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*{
 margin: 0px; 
 padding: 0px;
 
	}


.wrapper{
	width: 900px;
	
    

	margin: auto;



}

header{
background: linear-gradient(rgba(0,0,0,0.6) ,rgba(0,0,0,0.6)) ,url("images/1.jpeg");
height: 100vh;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
position: relative;

}

.nav-area{
display: inline;
list-style: none;


margin-top: 100px;
}
.nav-area li{
display: inline;

}
.nav-area li a{
color: #FF8C00;

text-decoration: none;
padding: 5px 10px;
font-family: Courrier New;
font-size: 30px;
}

.nav-area li a:hover{
background: #fff;
color: #fff;
   width: 200px;
   height: 100px;
   background: #778899; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   transition: all 0.3s ease 0s;

}
.welcome-text{

	position: absolute;
	width: 600px;
	height: 300px;
	margin: 10% 30%;
	text-align: center;
	margin-bottom: 0px;
	
}
.welcome-text h1{
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	
	font-size: 40px;

}

.welcome-text h1:hover{
color: #FF8C00;
cursor: default;

}

.box-black {

width:100px;
	height:55%;
	background-color: #272c33;
	width: 75%;
	position: absolute;
	top: 39%;
	left: 10%;
 border-radius: 20px;
  
}



.intro-text {

width:100px;
	height:55%;
	
	width: 75%;
	position: absolute;
	top: 40%;
	left: 11%;
font-size: 30px;
font-family: 'Roboto', sans-serif;
color: #929ca0;

}
.separation {
width:100px;
	
	
	
	position: absolute;
	top: 73%;
	left: 11%;
	width: 73%;


}
.rules-text {
width:100px;
	height:55%;
	
	width: 75%;
	position: absolute;
	top: 45%;
	left: 11%;
font-size: 17px;
font-family: 'Roboto', sans-serif;
color: #929ca0;
text-align: left;
display: table;

}


.infos {
width:100px;
	height:55%;
	
	width: 75%;
	position: absolute;
	top: 75%;
	left: 8%;
font-size: 35px;
font-family: 'Roboto', sans-serif;
color: #6a5acd;
text-align: center;


}
.infos a:hover {
background-color: #FF8C00;

border-radius: 20px;
transition: all 0.5s ease 0s;
}

}

image
image1920×701 189 KB

#6

By trying some stuff I figured it was this line that was causing the issue

.infos {

   height:55%;
   
   width: 75%;
   position: absolute; 
   top: 75%;
   left: 8%;
font-size: 25px;
font-family: 'Roboto', sans-serif;
color: #6a5acd;
text-align: center;
}

Can’t find the answer to this issue though

#7

Nervermind I had to remove height: 55%;
MY BAD

#8