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

[Feed](https://hashnode.com/feed) /

Discussion

# [HTML tutorial for complete beginners](https://html-tutorial-1.hashnode.dev/html-tutorial-for-complete-beginners?utm_source=hashnode&utm_medium=feed)

<!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">&times;</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>

Jun 15 · 1 min read · html-tutorial-1.hashnode.dev  
Read the article

## Written by

[Alex W.](https://hashnode.com/@alexw12)

@alexw12

  
[View profile](https://hashnode.com/@alexw12)

## Responses

Markdown supported · ⌘↵ to post

No responses yet.
