Posts

Showing posts from January, 2022

HTML Forms

Image
                         HTML Forms  <html> <head><title>forms</title></head> <body> <center> <form action=mailto:..@gmail.com"method="post"> First name:<input type="text"name="first_name"/> Last name:<input type="text"name="last_name"/> <h2>Select Your Categories <h2> <h4>Age Category <h4> <input type="radio"name="age"value="12-15"/>12-15 <input type="radio"name="age"value="16-18"/>16-18 <input type="radio"name="age"value="19-25"/>19-25 <h4>Occupation Category <h4> <input type="checkbox"name="s1"value="Student"/>Student <input type="checkbox"name="s1"value="Teacher"/>Teacher  <input type="checkbox"name="s1"value="Manager"/>M...

Blog using HTML page

Image
                        A blog using an HTML page  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {   box-sizing: border-box; } /* Add a gray background color with some padding */ body {   font-family: Arial;   padding: 20px;   background: #f1f1f1; } /* Header/Blog Title */ .header {   padding: 30px;   font-size: 40px;   text-align: center;   background: white; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn {      float: left;   width: 75%; } /* Right column */ .rightcolumn {   float: left;   width: 25%;   padding-left: 20px; } /* Fake image */ .fakeimg {   background-color: #aaa;   width: 100%;   padding: 20px; } /* Add a card effect for articles */ .card {    background-color: white; ...

Code for a dynamic website

Image
                     Code for a dynamic website  <!DOCTYPE html> <html> <head> <style> * {   box-sizing: border-box; } body {   font-family: Arial;   padding: 10px;   background: #f1f1f1; } /* Header/Blog Title */ .header {   padding: 30px;   text-align: center;   background: white; } .header h1 {   font-size: 50px; } /* Style the top navigation bar */ .topnav {   overflow: hidden;   background-color: #333; } /* Style the topnav links */ .topnav a {   float: left;   display: block;   color: #f2f2f2;   text-align: center;   padding: 14px 16px;   text-decoration: none; } /* Change color on hover */ .topnav a:hover {   background-color: #ddd;   color: black; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn {      float: left;   width: 75%; } /* Right co...