Skip to content

I added some comment here and kept the code clean #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ChayonDas wants to merge 1 commit into
base: principal
Choose a base branch
from
Open

I added some comment here and kept the code clean #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 172 additions & 46 deletions assets/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,205 @@
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {box-sizing: border-box;}
/* Generic Resets for Common Elements */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
background: transparent;
}

*, *:before, *:after {box-sizing: inherit;}
/* Block Elements Display Property */
main, article, aside, figure, footer, header, nav, section, details, summary {
display: block;
}

img {max-width: 100%;}
/* Box Sizing for HTML Element */
html {
box-sizing: border-box;
}

ul {list-style: none;} /* we'll restore bullets as needed for content */
/* Box Sizing Inheritance for All Elements */
*, *:before, *:after {
box-sizing: inherit;
}

blockquote, q {quotes: none;}
/* Responsive Image */
img {
max-width: 100%;
}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
/* List Styles Removal */
ul {
list-style: none;
}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
/* Remove Quotes */
blockquote, q {
quotes: none;
}

del {text-decoration: line-through;}
/* Additional Styling for Quotes */
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
/* Link Styling */
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

table {border-collapse: separate; border-spacing: 0; text-align: left;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
td img {vertical-align: top;}
/* Strikethrough Text Decoration for Deleted Content */
del {
text-decoration: line-through;
}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;}
/* Dotted Border for Abbreviations and Definitions */
abbr[title], dfn[title] {
border-bottom: 1px dotted #000;
cursor: help;
}

input, select {vertical-align: middle;}
/* Table Styles */
table {
border-collapse: separate;
border-spacing: 0;
text-align: left;
}
th {
font-weight: bold;
vertical-align: bottom;
}
td {
font-weight: normal;
vertical-align: top;
}
td img {
vertical-align: top;
}

pre {white-space: pre-line;}
/* Horizontal Rule Styles */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #999;
margin: 1rem 0;
padding: 0;
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
/* Vertical Alignment for Form Elements */
input, select {
vertical-align: middle;
}

small {font-size: .8rem;}
/* Preserve Whitespace in Preformatted Text */
pre {
white-space: pre-line;
}

strong {font-weight: bold;}
/* Vertical Alignment for Radio and Checkbox Inputs */
input[type="radio"] {
vertical-align: text-bottom;
}
input[type="checkbox"] {
vertical-align: bottom;
}

sub, sup {font-size: .8rem; line-height: 0; position: relative;}
sup {top: -0.5rem;}
sub {bottom: -0.25rem;}
/* Font Size Adjustment for Small Text */
small {
font-size: .8rem;
}

pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* Bold Text */
strong {
font-weight: bold;
}

label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
/* Superscript and Subscript Styling */
sub, sup {
font-size: .8rem;
line-height: 0;
position: relative;
}
sup {
top: -0.5rem;
}
sub {
bottom: -0.25rem;
}

button, input, select, textarea {margin: 0;}
/* Monospace Font Family for Code */
pre, code, kbd, samp {
font-family: monospace, sans-serif;
}

ins {background-color: var(--highlight-color); color: #000; text-decoration: none;}
mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;}
/* Cursor Style for Buttons and Form Elements */
label, input[type=button], input[type=submit], input[type=file], button {
cursor: pointer;
}

blockquote {padding: 2rem; border-left: 1px solid #333;}
/* Styling for Inserted and Marked Text */
ins {
background-color: var(--highlight-color);
color: #000;
text-decoration: none;
}
mark {
background-color: var(--highlight-color);
color: #000;
font-style: italic;
font-weight: bold;
}

.clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */
/* Blockquote Styles */
blockquote {
padding: 2rem;
border-left: 1px solid #333;
}

/* ———— END THE GENERIC RESETS ———— */
/* Clearfix for Floats */
.clearfix:after {
content: "";
display: table;
clear: both;
}

/* Root Variables for Color Scheme */
:root {
--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */
--text-color: #333;
--featured-color: #03f;
--featured-color-hover: #69f;
--highlight-color: #fcd700;
--font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--text-color: #333;
--featured-color: #03f;
--featured-color-hover: #69f;
--highlight-color: #fcd700;
}

body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);}
/* Body Styles */
body {
font-size: 16px;
font-family: var(--font-system);
color: var(--text-color);
}

a {color: var(--featured-color);}
a:hover {color: var(--featured-color-hover);}
/* Link Color and Hover Color */
a {
color: var(--featured-color);
}
a:hover {
color: var(--featured-color-hover);
}

/* Media Query for Small Screens */
@media screen and (max-width: 480px) {
/* Styles for small screens go here */
}

/* Media Query for Print Styles */
@media print {
}
/* Styles for print go here */
}
67 changes: 45 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
<!DOCTYPE html>

<!-- HTML5 Reset:
https://github.com/murtaugh/HTML5-Reset

3RD PARTY TOOLS:
<!-- HTML5 Reset: https://github.com/murtaugh/HTML5-Reset -->

<!-- 3RD PARTY TOOLS:
repo management: https://github.com/new
favicon generator: https://favicon.io
social meta tag generators: https://metatags.io — https://megatags.co
analytics providers: https://plausible.io — https://simplyanalytics.com — https://analytics.google.com
free web font providers: https://www.fontsquirrel.com — https://fonts.google.com

-->

<html lang="en">

<head>

<!-- Set character encoding -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Responsive design meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Page title and metadata -->
<title></title>
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />

<!-- Link to external stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />

</head>
Expand All @@ -33,10 +35,13 @@

<div>

<!-- Page header -->
<header>

<!-- Main heading with a link to the homepage -->
<h1><a href="/">Page Title</a></h1>

<!-- Navigation menu -->
<nav>

<ul>
Expand All @@ -48,56 +53,74 @@ <h1><a href="/">Page Title</a></h1>
</nav>

</header>


<!-- Main content section -->
<main>

<!-- Main article section -->
<article>


<!-- Article heading -->
<h1>Article Header</h1>


<!-- Article content -->
<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>


<!-- Subheading within the article -->
<h2>Article Subhead</h2>


<!-- Additional content within the article -->
<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

<!-- Form within the article -->
<form>
<fieldset>

<!-- Legend for the form -->
<legend>Personal Info</legend>


<!-- Input field for Full Name -->
<label for="name">Full Name:</label>
<span class="help-text" id="input-name-help">Single word names are supported.</span>
<input type="text" id="name" name="name" aria-describedby="input-name-help">


<!-- Input field for Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

</fieldset>


<!-- Additional input field for Password -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">

<!-- Checkbox for terms acceptance -->
<input type="checkbox" id="terms" required="required" />
<label for="terms">I have read and accept the <a href="#" target="_blank">terms and conditions</a>.</label>


<!-- Submit button for the form -->
<input type="submit" value="Submit">
</form>

</article>


<!-- Sidebar section -->
<aside>


<!-- Sidebar heading -->
<h2>Sidebar Content</h2>


<!-- Additional content within the sidebar -->
<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

</aside>

</main>

<!-- Page footer -->
<footer>

<!-- Copyright notice -->
<p><small>&copy; 2023 Your Name Here. All Rights Reserved.</small></p>

</footer>
Expand Down