Could anybody have a look at my HTML code and tell if it's build upon the correct semantic way using the right tags, and not using unnecessary divs?
I'm still not sure if there any divs in my code which don't need to be there.
.main-club-bar-music-festival {
overflow: auto;
}
.main-club-bar-music-festival h3 {
margin: 0;
}
.img-club-air {
position: relative;
}
.img-club-air img {
width: 100%;
}
.img-club-air a:first-child {
position: absolute;
margin: 10px;
width: 60px;
right: 0;
bottom: 0;
z-index: 1;
}
.img-club-air h2 {
position: absolute;
bottom: 0;
font-size: 20px;
width: 100%;
padding: 10px;
color: white;
font-family: "LemonMilk"
}
#paragraph-p {
padding: 20px;
margin: 0;
clear: both;
}
.info-rent-a-bike {
width: 200px;
margin: 20px auto;
text-align: center;
background-color: #eb6c74;
display: block;
}
.info-rent-a-bike p {
margin: 0;
padding: 10px;
color: white;
text-transform: capitalize;
transform: translateX(-5%);
}
.info-rent-a-bike img {
margin-top: 10px;
margin-left: 5px;
height: 38px;
float: left;
}
.show-me-the-way {
display: block;
width: 200px;
margin: 20px auto;
text-align: center;
background-color: #eb6c74;
}
.show-me-the-way p {
margin: 0;
padding: 10px;
color: white;
text-transform: capitalize;
}
.show-me-the-way img {
height: 38px;
float: left;
}
.info-block {
background-color: #eb6c74;
color: white;
padding: 10px 20px;
text-transform: uppercase;
font-family: "NeueHaasGrotesk Light";
}
.address-club {
margin-bottom: 16px;
}
.address-club p {
padding: 10px 20px 0 20px;
margin-bottom: 0;
}
.address-club img {
height: 40px;
margin-left: 10px;
float: left;
margin-right: 10px;
}
.address-club a {
line-height: 40px;
display: block;
color: #3b3b3b;
text-decoration: underline;
}
.address-club a[target=_blank] {
padding-left: 20px;
color: #0000EE;
}
.padding-info-club {
padding: 20px;
}
.regular-info-left li:nth-child(2) {
margin: 2px 0;
}
.regular-info-right li:nth-child(2) {
margin: 2px 0;
}
.regular-info-left {
float: left;
width: 49.5%;
text-align: center;
color: white;
margin: 0;
padding: 0;
list-style: none;
}
.regular-info-left p {
margin: 0;
}
.regular-info-left p {
background-color: #3b3b3b;
height: 50px;
line-height: 50px;
text-transform: uppercase;
}
.regular-info-right {
float: right;
width: 49.5%;
text-align: center;
color: white;
margin: 0;
padding: 0;
list-style: none;
}
.regular-info-right p:nth-child(1) {
margin: 0;
}
.regular-info-right p:nth-child(2) {
margin: 2px 0;
}
.regular-info-right p:nth-child(3) {
margin: 2px 0;
}
.regular-info-right p {
background-color: #3b3b3b;
height: 50px;
line-height: 50px;
text-transform: uppercase;
}
.info-feedback-on-page {
margin: 10px 0;
border-top: 1px solid #eb6c74;
border-bottom: 1px solid #eb6c74;
padding: 0px 0px 10px 20px;
}
.info-feedback-on-page button {
border-radius: 40%;
background-color: transparent;
margin-right: 10px;
}
#button-yes {
background-color: white;
border-radius: 28px;
border: 2px solid #44c767;
color: #44c767;
font-size: 15px;
padding: 10px 25px;
outline: 0;
}
#button-yes:active {
position: relative;
top: 2px;
outline: 0;
}
#button-no {
background-color: white;
border-radius: 28px;
border: 2px solid #e35656;
color: #e35656;
font-size: 15px;
padding: 10px 25px;
outline: 0;
}
#button-no:active {
position: relative;
top: 2px;
outline: 0;
}
<main class="main-club-bar-music-festival">
<div class="img-club-air">
<a href="favourites.html"><img src="img/favorite-icon-add.svg" alt="add to favourites"></a>
<img src="img/club-panama.jpg" alt="Club Panama">
<h2>panama</h2>
</div>
<h3 class="info-block">regular info</h3>
<ul class="regular-info-left">
<li>
<p>dancing</p>
</li>
<li>
<p>go out with mates</p>
</li>
<li>
<p>expensive</p>
</li>
</ul>
<ul class="regular-info-right">
<li>
<p>edm</p>
</li>
<li>
<p>locals/foreigners</p>
</li>
<li>
<p>groups</p>
</li>
</ul>
<p id="paragraph-p">Panama chose a bit of a peculiar spot to open a nightclub. Located outside the city centre, Panama created a diversified nightclub. The nightclub holds a lot of parties varying from electronic tp 80's and 90s parties. Panama also houses HappyHappyJoyJoy, an asian shared dining restaurant</p>
<a class="info-rent-a-bike" href="http://www.ov-fiets.nl/huurlocaties?locatie=amsterdam&POST_AUTOCOMPLETE=%2Fhuurlocaties.xml" target="_blank">
<img src="img/bicycle-icon.svg" alt="OV-Bicycle">
<p>rent ov-bike
<br>€ 3,85,-/24 hour</p>
</a>
<a class="show-me-the-way" href="https://goo.gl/maps/EiZDqD3UDK72">
<img src="img/location-icon.svg" alt="your location to destination">
<p>show me the way</p>
</a>
<h3 class="info-block">average price for a drink</h3>
<p class="padding-info-club">- € 2,30,-</p>
<h3 class="info-block">entrance</h3>
<p class="padding-info-club">- € 5,00,-</p>
<h3 class="info-block">address</h3>
<div class="address-club">
<p>Panama
<br> Oostelijke Handelskade 4
</p>
<a href="http://www.panama.nl" target="_blank">www.panama.nl</a>
<a href="tel:0203118686">020 311 86 86<img src="img/phone-icon.svg" alt="call-icon"></a>
</div>
<h3 class="info-block">opening hours</h3>
<p class="padding-info-club">Fr - Su: 21:00 - 05:00pm</p>
<div class="info-feedback-on-page">
<p>Was this information usefull for you as an international student?</p>
<button id="button-yes">yes</button>
<button id="button-no">no</button>
</div>
</main>