GYM WEBSITE TEMPLATE FOR FREE WITH ALL SOURCE CODE AVAILABLE **free**
| use backgrounds from rar file at the bottom <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BODYFLEX GYM | BEST GYM IN ASIA</title> | |
| <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png"> | |
| <link rel="manifest" href="assets/favicon/site.webmanifest"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| color: white; | |
| font-family: 'Baloo Bhai 2', cursive; | |
| overflow: visible; | |
| } | |
| header { | |
| background-image: url('assets/bg2.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: 100%; | |
| height: 700px; | |
| width: 100%; | |
| } | |
| .left { | |
| display: inline-block; | |
| } | |
| .left img { | |
| width: 85px; | |
| -webkit-filter: invert(100%); | |
| filter: invert(100%); | |
| margin: 18px 1px 1px 21px; | |
| cursor: pointer; | |
| } | |
| .mid { | |
| display: block; | |
| width: 38%; | |
| margin: auto; | |
| } | |
| .right { | |
| display: inline-block; | |
| position: absolute; | |
| top: 20px; | |
| right: 23px; | |
| } | |
| .navbar ul { | |
| padding: 0px; | |
| margin: -36px 0px 0px 0px; | |
| } | |
| .navbar li { | |
| display: inline-block; | |
| border-right: 2px solid white; | |
| margin: 1px 4px; | |
| padding: 1px 15px; | |
| } | |
| .navbar li:last-child { | |
| border: none; | |
| } | |
| .navbar li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: bolder; | |
| font-size: 25px; | |
| } | |
| .navbar li a:hover, | |
| .navbar li a.active { | |
| color: rgb(192, 11, 11); | |
| text-decoration: underline; | |
| font-size: 25px; | |
| } | |
| /* .navbar li a.active { | |
| color: rgb(192, 11, 11); | |
| text-decoration: underline; | |
| font-size: 25px; }*/ | |
| .btn { | |
| padding: 8px; | |
| margin: 2px 15px 0px 8px; | |
| cursor: pointer; | |
| color: black; | |
| background-color: rgb(250, 202, 45); | |
| font-family: 'Baloo Bhai 2', cursive; | |
| font-weight: bold; | |
| font-size: 18px; | |
| border-radius: 10px; | |
| border: 2px solid black; | |
| } | |
| .btn a { | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .btn:hover { | |
| padding: 8px; | |
| margin: 2px 15px 0px 8px; | |
| cursor: pointer; | |
| color: rgb(0, 0, 0); | |
| background-color: rgb(138, 255, 83); | |
| font-family: 'Baloo Bhai 2', cursive; | |
| font-weight: bold; | |
| font-size: 18px; | |
| border-radius: 10px; | |
| border: 2px solid black; | |
| } | |
| .sale { | |
| background-image: url('assets/young-fitness-man-studio.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: 100%; | |
| height: 365px; | |
| margin: 5px 0px 0px 0px; | |
| } | |
| .sale p { | |
| font-size: 48px; | |
| padding: 93px 1px 0px 72px; | |
| margin: 0px; | |
| font-family: 'Caveat', cursive; | |
| word-spacing: 6px; | |
| letter-spacing: 1px; | |
| } | |
| .sale p span { | |
| font-size: 48px; | |
| margin: 0px; | |
| font-family: 'Caveat', cursive; | |
| color: red; | |
| } | |
| .equipment { | |
| background-image: url('assets/gymmachines.jpg'); | |
| background-size: 100%; | |
| height: 700px; | |
| width: 100%; | |
| margin: 5px 0px 0px 0px; | |
| } | |
| .equipment p { | |
| color: black; | |
| display: block; | |
| width: 45%; | |
| margin: 9px auto; | |
| font-size: 42px; | |
| font-weight: bolder; | |
| word-spacing: 2px; | |
| font-family: 'Permanent Marker', cursive; | |
| text-align: center; | |
| padding: 125px 0px; | |
| } | |
| .team { | |
| background-image: url('assets/team.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: 100%; | |
| height: 350px; | |
| margin: 5px 0px 0px 0px; | |
| } | |
| .team p { | |
| display: block; | |
| width: 30%; | |
| margin: 9px auto; | |
| font-size: 32px; | |
| font-weight: bolder; | |
| word-spacing: 3px; | |
| font-family: 'Permanent Marker', cursive; | |
| text-align: center; | |
| padding: 100px 0px; | |
| color: rgb(255, 255, 255); | |
| letter-spacing: 2px; | |
| } | |
| .team p span { | |
| color: rgb(149, 0, 0); | |
| } | |
| .main { | |
| background-image: url('assets/startnow1.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: 100%; | |
| height: 700px; | |
| width: 100%; | |
| margin: 5px 0px 0px 0px; | |
| } | |
| .banneer { | |
| display: block; | |
| width: 25%; | |
| margin: 9px auto; | |
| font-size: 32px; | |
| font-weight: bolder; | |
| word-spacing: 2px; | |
| font-family: 'Baloo Bhai 2', cursive; | |
| text-align: center; | |
| padding: 150px 0px; | |
| color: rgb(0, 0, 0); | |
| } | |
| .btn2 { | |
| padding: 15px; | |
| margin: 25px 15px 0px 8px; | |
| cursor: pointer; | |
| color: black; | |
| background-color: rgb(36, 229, 255); | |
| font-family: 'Baloo Bhai 2', cursive; | |
| font-weight: bolder; | |
| font-size: 18px; | |
| border-radius: 10px; | |
| border: 2px solid black; | |
| } | |
| .btn2:hover { | |
| padding: 15px; | |
| margin: 25px 15px 0px 8px; | |
| cursor: pointer; | |
| color: rgb(55, 255, 0); | |
| background-color: rgb(85, 255, 6); | |
| font-family: 'Baloo Bhai 2', cursive; | |
| font-weight: bolder; | |
| font-size: 18px; | |
| border-radius: 10px; | |
| border: 2px solid black; | |
| } | |
| .btn2 a { | |
| text-decoration: none; | |
| color: black; | |
| } | |
| /* ********footer ***** */ | |
| /* .end { | |
| background-image: url('assets/Black.png'); | |
| width: 100%; | |
| height: 600px; | |
| } */ | |
| .end { | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: #111; | |
| height: auto; | |
| width: 100vw; | |
| padding-top: 40px; | |
| color: #fff; | |
| } | |
| .footer-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .footer-content h3 { | |
| font-size: 2.1rem; | |
| font-weight: 500; | |
| text-transform: capitalize; | |
| line-height: 3rem; | |
| } | |
| .footer-content p { | |
| max-width: 500px; | |
| margin: 10px auto; | |
| line-height: 28px; | |
| font-size: 14px; | |
| color: #cacdd2; | |
| } | |
| .socials { | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 1rem 0 3rem 0; | |
| } | |
| .socials li { | |
| margin: 0 10px; | |
| } | |
| .socials a { | |
| text-decoration: none; | |
| color: #fff; | |
| border: 1.1px solid white; | |
| padding: 5px; | |
| border-radius: 50%; | |
| } | |
| .socials a i { | |
| font-size: 1.1rem; | |
| width: 20px; | |
| transition: color .4s ease; | |
| } | |
| .socials a:hover i { | |
| color: aqua; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="left"> | |
| <a href="index.html"><img src="assets/logo.png" alt="GYM LOGO"></a> | |
| </div> | |
| <div class="mid"> | |
| <div class="navbar"> | |
| <ul> | |
| <li><a href="index.html">Home</a> </li> | |
| <li><a href="https://www.puregym.com/blog/" target="_blank">Blog</a> </li> | |
| <li><a href="links/aboutus.html" target="_blank">About Us</a> </li> | |
| <li><a href="https://forms.gle/vbzXnDupr7E5VVvSA" target="_blank">Contact Us</a> </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="right"> | |
| <button class="btn"><a href="tel:8196815959">Call Now</a> </button> | |
| <button class="btn"><a | |
| href="https://www.google.com/maps/place/Khalsa+College/@31.6334655,74.8336454,17z/data=!4m12!1m6!3m5!1s0x391964d08f767f03:0x22fae2514c5bd5bc!2sKhalsa+College!8m2!3d31.633461!4d74.8358341!3m4!1s0x391964d08f767f03:0x22fae2514c5bd5bc!8m2!3d31.633461!4d74.8358341" | |
| target="_blank">Visit US</a></button> | |
| </div> | |
| </header> | |
| <section class="sale"> | |
| <p>CELEBRATING NEW YEAR 2022 <br> ENROLL NOW TO GET <span>22% OFF!!</span></p> | |
| </section> | |
| <section class="equipment"> | |
| <p>BEST CLASS EQUIPMENT TO REMOVE EVERY BARRIER!!</p> | |
| </section> | |
| <section class="team"> | |
| <p><span>PROFESSIONAL</span> TRAINERS FOR YOU!!</p> | |
| </section> | |
| <section class="main"> | |
| <div class="banneer"> | |
| Make fitness a habit. Motivation is what gets you started. Habit is what keeps you going.<br>- Jim Ryin.<br> | |
| <button class="btn2"><a href="https://forms.gle/vbzXnDupr7E5VVvSA" target="_blank">JOIN NOW</a> </button> | |
| </div> | |
| </section> | |
| <section class="end"> | |
| <div class="footer-content"> | |
| <h3>®BODYFLEX GYM</h3> | |
| <p>The whole website is coded and developed under the © copyright of Aulakh International Pvt. | |
| Ltd.and the pictures are Licensed from Shutterstock and other free stock images providers.if you | |
| have any probleam please cheakout About section. | |
| <br> | |
| ©Aulakh International Pvt. Ltd.<br> | |
| Founder: SUKHMEET AULAKH | |
| </p> | |
| <ul class="socials"> | |
| <li><a href="#"><i class="fa fa-facebook"></i></a></li> | |
| <li><a href="#"><i class="fa fa-twitter"></i></a></li> | |
| <li><a href="#"><i class="fa fa-google-plus"></i></a></li> | |
| <li><a href="#"><i class="fa fa-youtube"></i></a></li> | |
| <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
Comments