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.
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
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 ?
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
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;
}
}
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
Nervermind I had to remove height: 55%;
MY BAD