html project909

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Golds Gym</title>
<style>

body {
  background-image: url("https://www.datocms-assets.com/7389/1537379200-intro-background.jpg?w=2560&lossless=0&q=85");
  background-repeat: repeat-x;

  }


.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
     opacity: 0.8; /*made opacity so it's a bit transparent */
    border: 2px solid  #d4af37; /*gave it a outline*/
    border-radius: 25px; /*rounded corners*/
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #d4af37;
}


@media screen and (max-width: 500px)
{
  .navbar a {
    float: none;
    display: block;
  }
}

    /* the socials style */
    .socials {
        margin-top:30px;
        height: 3px;
        float: right;
        width: 3%; }

.socials li
{ display: inline;}


      #logo-main {
    display: block;
    margin: 2px auto;
  }

    section {  /*this is section*/
  width: 30%;
  float: left;
  margin: 1% 1%;
  text-align: center;
 color:aliceblue
}

    #mobiletext {
	style="font-size:4vw;
	  font-family: "Times New Roman", Times, serif;


	}


	#shadowtext{
	text-shadow: 0 0 40px #e7bd42;
	color:white;
	style="font-size:4vw;
	  font-family: "Times New Roman", Times, serif;
}


	ol {
  background: #e7bd42;
  padding: 20px;
 color: white;
   border: 2px solid  #d4af37; /*gave it a outline*/
    border-radius: 25px; /*rounded corners*/

}
ol li {
  background: #555;
  padding: 5px;
  margin-left: 35px;
  opacity: 0.8;
     border: 2px solid  #d4af37; /*gave it a outline*/
    border-radius: 25px; /*rounded corners*/
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
   color: white;
  width: 100%;
   text-align: center;
  background-color: #d4af37;
    opacity: 0.8;
}


</style>
<body>


 <img id="logo-main" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3f/Gold%27s_Gym_logo.svg/1200px-Gold%27s_Gym_logo.svg.png" width="150" alt="GYM LOGO">


<nav>
<div class="navbar">
  <a href="#"></i> Home</a>
  <a href="1"></i> Search</a>
  <a href="2"></i> Contact</a>
  <a href="3"></i> Login</a>
</div>
</nav>


   <section>
            <img src="https://i.imgur.com/6zE8giP.png" style="width:30%;height:auto;">
            <h1 id="mobiletext">Open 24/7</h1>
              <p>Open 24/7 we are never closed come any time of the day</p>

                  </section>

            <section>
              <img src="https://i.imgur.com/Xxk5O0M.png" style="max-width:30%;height:auto;">
             <h1 id="mobiletext">Open to everyone</h1>
              <p>Beginner freindly, dont be afraid to ask for help!</p>
            </section>

            <section>
              <img src="https://i.imgur.com/CBP8EDK.png" style="max-width:30%;height:auto;">
             <h1 id="mobiletext">Free diet help</h1>
              <p>We have dietologists in the gym who are willing to help you with your diet</p>
            </section>


<h1 id="shadowtext">Rules of the gym:</h1>

<ol>
  <li>Bring towels</li>
  <li>Rerack weights</li>
  <li>Ask before taking a machine</li>
  <li>Be polite</li>
  <li>Be respectful toward other members</li>
  <li>Be respectful towards staff</li>

</ol>

<footer>
<div class="footer">
  <p>Golds Gym©</p>
</div>
 </footer>


</body>
</html>