A Simple One page website for a gym, that can be used as landing page
Header with a
Enquire Form with the following type of Input button
<input type = text><input type = email><input type = date><input type = tel>
| <!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"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"> | |
| <link rel="manifest" href="/site.webmanifest"> | |
| <!-- Place this tag in your head or just before your close body tag. --> | |
| <script async defer src="https://buttons.github.io/buttons.js"></script> | |
| <title>Let's Fit Gym</title> | |
| <style> | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| background: url(img/bg.jpg); | |
| background-repeat: no-repeat; | |
| font-family: 'Baloo Bhai 2', cursive; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="left"> | |
| <img src="img/gym.png" alt="Let's Fit Gym Logo" id="logo"> | |
| <div>Let's Fit Gym</div> | |
| </div> | |
| <div class="mid"> | |
| <ul class="navbar"> | |
| <li class="items"><a href="#" class="active">Home</a></li> | |
| <li class="items"><a href="#">About US</a></li> | |
| <li class="items"><a href="#">Fitness Calculator</a></li> | |
| <li class="items"><a href="#">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div class="right"> | |
| <button class="btn">Call Us Now</button><button class="btn">Write to Us</button> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <div class="container"> | |
| <div class="form1"> | |
| <h1>Become Fit !</h1> | |
| <h2>||| Join the Gym Now |||</h2> | |
| <form action="/php/enquireform.php"> | |
| <div class="form-group"> | |
| <input type="text" name="" id="" placeholder="What's Your Name?"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="" id="" placeholder="What's Your Gender?"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" name="" id="" placeholder="Enter your email" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="tel" name="" id="" placeholder="Enter your Phone Number"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="date" name="" id="" max="2018-12-31" placeholder="What's Your date Of Birth" | |
| required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="" id="" placeholder="What's your Locality?"> | |
| </div> | |
| <button class="btn">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="container2"> | |
| <!-- Place this tag where you want the button to render. --> | |
| <a class="github-button" href="https://github.com/SubhanRaj/Gym_Website_Project" | |
| data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" | |
| aria-label="Star SubhanRaj/Gym_Website_Project on GitHub">Star</a> | |
| <!-- Place this tag where you want the button to render. --> | |
| <a class="github-button" href="https://github.com/SubhanRaj/Gym_Website_Project/fork" | |
| data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" | |
| aria-label="Fork SubhanRaj/Gym_Website_Project on GitHub">Fork</a> | |
| <!-- Place this tag where you want the button to render. --> | |
| <a class="github-button" href="https://github.com/SubhanRaj/Gym_Website_Project/generate" | |
| data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" | |
| aria-label="Use this template SubhanRaj/Gym_Website_Project on GitHub">Use this template</a> | |
| </div> | |
| </main> | |
| </body> | |
| </html> |
| @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap'); | |
| /* CSS Reset */ | |
| .header { | |
| color: white; | |
| } | |
| .left { | |
| /* border: 2px solid red; */ | |
| /* Boders are just for guidence during initial build */ | |
| display: inline-block; | |
| position: absolute; | |
| left: 60px; | |
| top: 10px; | |
| } | |
| .left img { | |
| width: 150px; | |
| filter: invert(100%); | |
| } | |
| .left div { | |
| text-align: center; | |
| font-size: 22px; | |
| line-height: 0px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| } | |
| .mid { | |
| display: block; | |
| width: 55%; | |
| margin: 20px auto; | |
| /* border: 2px solid green; */ | |
| } | |
| .navbar { | |
| display: inline; | |
| } | |
| .navbar li { | |
| font-size: 25px; | |
| display: inline; | |
| list-style: none; | |
| } | |
| .navbar li a { | |
| text-decoration: none; | |
| color: white; | |
| padding: 34px 23px; | |
| } | |
| .navbar li a:hover { | |
| text-decoration: underline; | |
| } | |
| .navbar li a.active { | |
| text-decoration: underline; | |
| } | |
| .right { | |
| /* border: 2px solid blue; */ | |
| display: inline-block; | |
| position: fixed; | |
| right: 34px; | |
| top: 10px; | |
| } | |
| .btn { | |
| margin: 10px 5px; | |
| background-color: black; | |
| color: white; | |
| padding: 4px 14px; | |
| border: 2px solid grey; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-family: 'Baloo Bhai 2', | |
| cursive; | |
| } | |
| .btn:hover { | |
| background-color: rgb(19, 18, 18); | |
| } | |
| .container { | |
| color: white; | |
| border: 2px solid white; | |
| margin: 100px 75px; | |
| padding: 50px; | |
| width: 33%; | |
| height: 450px; | |
| float: left; | |
| border-radius: 30px; | |
| } | |
| h1 { | |
| margin: auto; | |
| text-align: center; | |
| width: 50%; | |
| } | |
| h2 { | |
| margin: auto; | |
| text-align: center; | |
| width: 75%; | |
| } | |
| .form-group input { | |
| text-align: center; | |
| display: block; | |
| width: 92%; | |
| border: 2px solid rgb(0, 0, 0); | |
| border-radius: 5px; | |
| margin: 11px auto; | |
| padding: px; | |
| font-size: 20px; | |
| font-family: 'Baloo Bhai 2', cursive; | |
| } | |
| .container button { | |
| display: block; | |
| width: 92%; | |
| margin: 25px auto; | |
| } | |
| .container2 { | |
| width: 150px; | |
| display: block; | |
| position: fixed; | |
| right: 5px; | |
| padding: 10px; | |
| top: 80%; | |
| margin: 10px auto; | |
| /* border: 2px solid white; */ | |
| text-align: center; | |
| } |
Love it