You get the gist, Code snippets, notes and other the exampes for HTML5 Crash Course.
-
-
Save Frajder/3b546b5bf5a1b4c3abebeace8946d8b5 to your computer and use it in GitHub Desktop.
HTML5 Crash Course - Notes, Code snippets and examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Base Styles */ | |
| body { | |
| font-family: 'Arial', sans-serif; /* Font choice for overall text */ | |
| color: #333; /* Primary text color */ | |
| background-color: #f4f4f4; /* Light gray background for the body */ | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: #333; /* Dark background for the header */ | |
| color: #fff; /* White text for the header */ | |
| padding: 20px; /* Padding around the header content */ | |
| text-align: center; /* Center-align text in the header */ | |
| } | |
| /* Navigation Bar */ | |
| nav ul { | |
| list-style: none; /* Remove bullet points from list */ | |
| padding: 0; /* Remove padding from the list */ | |
| margin: 0; /* Remove margin from the list */ | |
| display: flex; /* Arrange list items in a row */ | |
| justify-content: center; /* Center the navigation items */ | |
| } | |
| nav ul li { | |
| margin: 0 15px; /* Margin around each navigation item */ | |
| } | |
| /* Navigation Links */ | |
| nav ul li a { | |
| color: #fff; /* White text for links */ | |
| text-decoration: none; /* Remove underline from links */ | |
| font-weight: bold; /* Bold text for navigation links */ | |
| } | |
| nav ul li a:hover { | |
| color: #ffa500; /* Orange color on hover */ | |
| } | |
| /* Main Content Area */ | |
| main { | |
| padding: 20px; /* Padding around main content */ | |
| background: #fff; /* White background for main content */ | |
| border-radius: 8px; /* Rounded corners for main content */ | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for main content */ | |
| } | |
| /* Article Styles */ | |
| article { | |
| margin-bottom: 20px; /* Space below each article */ | |
| } | |
| article h2 { | |
| color: #333; /* Main heading color */ | |
| border-bottom: 2px solid #333; /* Underline for headings */ | |
| padding-bottom: 10px; /* Padding below headings */ | |
| } | |
| article p { | |
| line-height: 1.6; /* Increased line height for readability */ | |
| } | |
| /* Footer Styles */ | |
| footer { | |
| background: #333; /* Dark background for the footer */ | |
| color: #fff; /* White text for the footer */ | |
| text-align: center; /* Center-align text in the footer */ | |
| padding: 10px 0; /* Padding above and below footer text */ | |
| position: fixed; /* Fixed position at the bottom of the page */ | |
| width: 100%; /* Full width footer */ | |
| bottom: 0; /* Position at the very bottom */ | |
| } | |
| /* Utility Classes */ | |
| .text-center { | |
| text-align: center; /* Center-align text */ | |
| } | |
| .margin-top-20 { | |
| margin-top: 20px; /* Top margin of 20px */ | |
| } | |
| .padding-10 { | |
| padding: 10px; /* Padding of 10px */ | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| header, footer { | |
| text-align: left; /* Left-align text for small screens */ | |
| padding: 10px; /* Reduce padding for small screens */ | |
| } | |
| nav ul { | |
| flex-direction: column; /* Stack navigation items vertically */ | |
| } | |
| nav ul li { | |
| margin: 10px 0; /* Margin around vertical nav items */ | |
| } | |
| main { | |
| padding: 10px; /* Reduce padding for small screens */ | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Styled Form</title> | |
| </head> | |
| <body> | |
| <style> | |
| .styled-form { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| width: 300px; | |
| } | |
| .styled-form label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| } | |
| .styled-form input[type="text"], | |
| .styled-form input[type="email"], | |
| .styled-form input[type="password"] { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 15px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-sizing: border-box; | |
| transition: border-color 0.3s ease-in-out; | |
| } | |
| .styled-form input[type="text"]:focus, | |
| .styled-form input[type="email"]:focus, | |
| .styled-form input[type="password"]:focus { | |
| border-color: #007bff; | |
| outline: none; | |
| } | |
| .styled-form button { | |
| width: 100%; | |
| padding: 10px; | |
| background-color: #007bff; | |
| border: none; | |
| border-radius: 4px; | |
| color: #fff; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease-in-out; | |
| } | |
| .styled-form button:hover { | |
| background-color: #0056b3; | |
| } | |
| </style> | |
| <form class="styled-form"> | |
| <label for="name">Name:</label> | |
| <input type="text" id="name" name="name"> | |
| <label for="email">Email:</label> | |
| <input type="email" id="email" name="email"> | |
| <label for="password">Password:</label> | |
| <input type="password" id="password" name="password"> | |
| <button type="submit">Submit</button> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment