HTML tutorial for complete beginners
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ecoride</title> <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=Google+Sans:wght@400;700&display=swap" rel="stylesheet"> <style> body{ margin:0; font-family:"Google Sans", sans-serif; } .hero{ height:100vh; display:flex; align-items:center; } .hero-section { display: flex; flex-direction: row; justify-content: space-between; /* Distributes content evenly */ align-items: center; /* Centers items vertically */ min-height: calc(100vh - 50px); /* Controls how far the text sits from the left screen edge */ padding-left: 3%; /* Using a percentage keeps it responsive on different screens */ padding-right: 40px; box-sizing: border-box; } .text-wrapper { text-align: left; max-width: 600px; } /* Heading styles */ .main-title { color: #008f39; font-family: sans-serif; font-size: 3.5rem; font-weight: bold; line-height: 1.1; margin: 0 0 24px 0; } /* Paragraph styles */ .sub-text { color: #111111; font-family: sans-serif; font-size: 1.1rem; line-height: 1.5; margin: 0; } body { margin: 0; padding: 0; } img { display: block; margin-left: auto; margin-right: 12px; opacity: 0; transform: translateY(20px); animation: fadeUp 1s ease-out forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } button { padding: 1.3em 3em; font-size: 12px; text-transform: uppercase; letter-spacing: 2.5px; font-weight: 500; color: #000; background-color: #fff; border: none; border-radius: 45px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; cursor: pointer; outline: none; } button:hover { background-color: #23c483; box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4); color: #fff; transform: translateY(-7px); } button:active { transform: translateY(-1px); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; position: fixed; top: 0; width: 100%; } ul li { float: left; } ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul li a:hover:not(.active) { background-color: #111; } ul li a.active { background-color: #04AA6D; } </style> </head> <body> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div class="hero-section"> <div class="text-wrapper"> <h1 class="main-title">The Future Of<br>Urban Mobility</h1> <p class="sub-text"> Discover electric bikes built for speed, comfort, and everyday adventures — designed for a smarter and sustainable future. </p> <br> <button id="learnMoreButton"> Learn More </button> <button> Book a Ride </button> </div> <img src="bike.png" alt="Paris" style="width:50%;"> </div> <style> .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); } .modal-content { background-color: #fff; margin: 12% auto; padding: 20px; border-radius: 12px; width: 90%; max-width: 500px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .close-button { float: right; font-size: 24px; font-weight: bold; cursor: pointer; } .close-button:hover { color: #008f39; } </style> <div id="learnMoreModal" class="modal"> <div class="modal-content"> <span class="close-button" id="closeModal">×</span> <h2>Learn More</h2> <p>Explore our electric bikes designed for urban mobility, comfort, and sustainability.</p> </div> </div> <script> const learnMoreBtn = document.getElementById('learnMoreButton'); const modal = document.getElementById('learnMoreModal'); const closeModal = document.getElementById('closeModal'); learnMoreBtn.addEventListener('click', function() { modal.style.display = 'block'; }); closeModal.addEventListener('click', function() { modal.style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target === modal) { modal.style.display = 'none'; } }); </script> </body> </html>