I'm a student that is currently new at coding with html and css and we are required to work on a project to make a website (without posting). I happened to just stumble across a small issue though...
I'd like to reduce the width of these boxes so that they'll fit in line with each other rather than having them aligned like this. It doesn't look very attractive. Does anyone have a solution? Here's the code:
.superbutton{
opacity: 100;
display: flex;
padding: 10px 30px;
color: #294f65;
background-color: transparent;
border: 2px solid #294f65;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .1rem;
transition: .6s ease background-color;
z-index: +99;
transition: .5s;
margin-bottom: 40px;
margin-top: 1px;
transform: translate(0,0%);
position: relative;
text-decoration: none;
}
.superbutton:hover{
color: white;
background-color: #294f65;
padding: 15px 35px;
transition: 0.5s;
}
.super{
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
.superbutton:active{
color: white;
background-color: #294f65;
padding: 12px 32px;
transition: 0.1s;
}
#tickets {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
#ticketstop .sectiontitle h1{
font-size: 2rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
.sectiontitle span{
color: #347f7d;
}
#tickets .sectiontitle{
font-size: 2rem;
font-weight: 300;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
#tickets .sectiontitle span{
color: #347f7d;
}
#tickets p {
text-align: justify;
}
#tickets .ticketsbottom{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
transform: translate(0,-30%);
}
#tickets .ticketsitem {
flex-basis: 15%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
border-radius: 10px;
background-image: url(./ticket.jpg);
background-size: cover;
margin: 5px 1%;
position: relative;
z-index: +1;
transition: .2s;
}
#tickets .ticketsitem::after{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
opacity: .8;
z-index: -1;
border-radius: 10px;
}
#tickets .ticketsbottom .icon{
height: 80px;
width: 20px;
margin-bottom: 25px;
}
#tickets .ticketsbottom .icon img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
}
#tickets .ticketsitem h2{
font-size: 2rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#tickets .ticketsitem p{
color: white;
text-align: left;
font-size: 1.4rem;
line-height: 1.9rem;
white-space: nowrap;
}
#tickets .ticketsitem:hover{
position: relative;
padding: 20px;
transition: 0.2s;
}
/* END TICKETS Section */
/*above tickets*/
.abovepic{
text-align: center;
transform: translate(0,-35%);
}
/*below tickets*/<section id="tickets">
<div id="tickets container">
<div class="ticketsbottom">
<div class="ticketsitem">
<div class="icon">
<img src="helios.png"/>
</div>
<h2>HELIOS</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
<div class="ticketsitem">
<div class="icon">
<img src="hot1.png"/>
</div>
<h2>COAL</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
<div class="ticketsitem">
<div class="icon">
<img src="remix.png"/>
</div>
<h2>REMIX</h2>
<p>- RTX 3090<br>- i9 11900KF 3.5GHz<br>- 32GB Corsair Memory<br>- Samsung 2TB SSD OS Drive</p>
<a href="#music" type="button" class="superbutton" target="_blank">BUY NOW</a>
</div>
</div>
</div>
</section>