This is my website project code.
- Santosh Phaiju
- Aug 19, 2021
- 2 min read
This is HTML page code.
<!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="style1.css"> <script src="script1.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet"> <title>Sanat fitness</title> </head> <body> <header> <!-- Left box for logo --> <div class="left"> <img src="gym2re.png" alt=""> <div>Sanat Fitness</div> </div> <!-- mid box for navbar --> <div class="mid"> <nav class="navbar"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Fitness Calculator</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> <!-- right box is for buttons --> <div class="right"> <button class="btn">Contact us now</button> <button class="btn">Help</button> </div> </header> <div class="container"> <h3>Join the best GYM in the Kathmandu Now.</h3> <form action="backend.php"> <div class="form-group"> <input type="text" name="text" id="myName" placeholder="Enter your name..." required> </div> <div class="form-group"> <input type="text" name="text" id="myEmail" placeholder="Enter your email..." required> </div> <div class="form-group"> <input type="text" name="text" id="myNumber" placeholder="Enter your number..." required> </div> <div class="form-group"> <input type="text" name="text" id="myLocality" placeholder="Enter your locality..." required> </div> <button class="btn" >Submit</button> </form> </div> </body> </html>
\
This is CSS page code.
body{ margin: 0; padding: 0; color: white; background-image: url(bg.jpg); font-family: 'Ubuntu', sans-serif; } .left{ display: inline-block; position: absolute; top: 8px; left: 34px; } .left img{ width: 70px; filter: invert(100%); margin: auto; display: block; } .left div{ text-align: center; margin-top: 10px; font-size: 25px; } .mid{ display: block; margin: 8px auto; width: 38%; } .right{ display: inline-block; position: absolute; top: 8px; right: 34px; } .navbar{ display: inline-block; } .navbar li{ display: inline-block; list-style: none; font-size: 20px; } .navbar li a{ text-decoration: none; color: white; padding: 0px 13px; } .navbar li a:hover, .navbar li a.active{ color: gray; text-decoration: underline; } .btn{ margin: 14px 9px; background-color: black; color: white; padding: 4px 14px; border: 2px solid grey; border-radius: 10px; font-size: 15px; cursor: pointer; font-family: 'Ubuntu', sans-serif; } .btn:hover{ background-color: rgb(54, 45, 45); } .container{ border: 2px solid #ffffff; height: 290px; border-radius: 10px; width: 430px; margin: 130px 87.1px; padding: 10px; } .container h3{ text-align: center; } .form-group input{ text-align: center; display: block; width: 300px; padding: 1px; border: 2px solid black; margin: 11px auto; font-size: 20px; border-radius: 8px; font-family: 'Ubuntu', sans-serif; } .container button{ display: block; width: 40%; margin: 25px auto; }
This is the website how it looks.
Comments