Skip to content

Html&css #6

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
ChloeXiao0409 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Html&css #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b672c74
HTML Change Collect
ChloeXiao0409 Oct 11, 2023
27930e5
Merge pull request #5 from ChloeXiao0409/main
ChloeXiao0409 Oct 11, 2023
b594047
Merge branch 'HTML&CSS' of https://github.com/ChloeXiao0409/Personal_…
ChloeXiao0409 Oct 11, 2023
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
16 changes: 16 additions & 0 deletions About.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
</head>

<body>
<h1>About Me</h1>
<p>I am a human!</p>
<a href="Chickens.html">Go Home</a>
</body>

</html>
109 changes: 109 additions & 0 deletions Chickens.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>

<html>

<head>
<title>No Chicken, only dogs!</title>
</head>

<body>
<nav>
<ul>
<li><a href="Home">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
</nav>
<main>
<a href="Emmetdemo.html">demo to see the quick code.</code></a>
<h1>1 &lt; 6 &gt; 4 &hearts;</h1>
<h1>Golden Retriever</h1>
<hr>
<!--ALt attribute wll be read by screenreader-->
<div>
<a href="http://www.bing.com">I AM A LINK TO BING!</a>
<a href="about.html">I AM A LINK TO ABOUT PAGE</a>
</div>
<p>
<b>
Golden Retrievers:
</b>
What's Good About 'Em, What's Bad About 'Em
Golden Retriever temperament,
<aside> personality, training,behavior, pros and cons, advice, and information,</aside>
by Michele Welton, Dog Trainer, Behavioral Consultant,
Author of 15 Dog Books <sup>[20]</sup>
I like H<sub>2</sub>O.
</p>
<aside>
<p>My Fox</p>
<img src="picture/狐狐.jpg" width="200px" alt="The cartoon fox I have drew before">A fox
</aside>
<p>
<div><sup>1</sup>/<sub>2</sub> + 1/2 = 1</div>
</p>
<a href="">ababab</a>

<a href="">cbcbcb</a>
<p>hdgwbdewxdgni</p>

<h2>Doggy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adip
isicing elit. Vel doloribus eaque, itaque i
usto dolor reprehenderit alias illo a volup
tas eum explicabo ipsa, quae molestiae.
Minima suscipit ad numquam accusantium c
upiditate?Loremfacere eos itaque neque quia ass
umenda deserunt.
</p>
<h2>Type</h2>
<h3>Behavior</h3>
<h4>Social behavior</h4>
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Cum, nostrum dolores corrupti quos perspiciatis, dolorem assumenda consequatur
voluptatibus
quisquam quibusdam atem laudantium odio rerum? Dolores ad nostrum reiciendis similique cupiditate?
Rerum ab, voluptates praesentium rem f
acilis tenetur ipsam ad voluptatem quam exercitat
Ut distinctio nostrum unde at voluptate
s vero ducimus? Eum dicta corporis optio o
dit cum neque distinctio laudantium quos nemo id
ipsum, corrupti natus consequatur to
tempora adipisci. Placeat!
</p>
<h2>Breeds</h2>
<ol>
<li>Happy
<ul>
<li>Great</li>
<li>OK</li>
<li>Not bad</li>
</ul>
</li>
<li>Sad</li>
<li>Angry</li>
</ol>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.9303e94c9a3dec617e7f08127f50a87d?rik=SAbqxztCz8ZXEA&pid=ImgRaw&r=0"
width="200px">

</body>

</html>


<!--!+tab-->
<!DOCTYPE html>
<html lang=" en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
</main>

</body>

</html>
31 changes: 31 additions & 0 deletions Emmetdemo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet demo</title>
</head>

<body>
<main>
<section>
<h1></h1>
</section>
</main>
<h1></h1>
<h2></h2>
<h2></h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li><a href="www.1.com">Click Me</a></li>
<li><a href="www.2.com">Click Me</a></li>
<li><a href="www.3.com">Click Me</a></li>
</ol>
</body>

</html>
92 changes: 92 additions & 0 deletions Forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms Demo</title>
</head>

<body>
<h1>Forms</h1>

<form action="/tacos">
<div>
<label for="username">Enter a username:</label>
<input id="username" name="username" type="text" placeholder="username">
</div>
<div>
<label for="password">Enter a password:</label>
<input id="password" type="password" placeholder="password">
</div>
<p>
<label for="color">Choose a color:</label>
<input id="color" type="color">
</p>
<p>
<label for="number">Choose a number:</label>
<input id="number" type="number" placeholder="enter a number" min="1" max="10">
</p>
<button type="submit">Submit</button>
<input type="submit" value="Click me!">
</form>
<form action="https://cn.bing.com/search">
<input type="text" name="q">
<button>Search Bing</button>
</form>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>Search Baidu</button>
</form>

<h2>More Inputs!</h2>
<form action="/bird">
<input type="checkbox" name="agree_tos" id="agree" checked>
<label for="agree">I agree everthing!</label>
<p>
<input type="radio" name="size" id="s" value="s">
<label for="s">S</label>
</p>
<p>
<input type="radio" name="size" id="m" value="m">
<label for="m">M</label>
</p>
<p>
<input type="radio" name="size" id="l" value="l">
<label for="l">L</label>
</p>
<p>
<label for="meal">Please select an entree:</label>
<select name="meal" id="meal">
<option value="">--Please to choose an option--</option>
<option value="fish">Fish</option>
<option value="steak">Steak</option>
<option value="bread">Bread</option>
</p>
<p>
<label for="cheese">Amount of Cheese:</label>
<input type="range" name="chesse_level" id="cheese" min="1" max="10" step="4">
</p>
<p>
<label for="Requests">Any Special Requests:</label>
<textarea name="additional_message" id="Requests" cols="10" rows="5"
placeholder="text anything!"></textarea>
</p>
<button>Submit</button>
</form>

<h2>Validation Demo</h2>
<form action="/dummy">
<label for="first">Enter First Name</label>
<input type="text" name="first" id="first" required>
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username" minlength="5">
</p>

<button>Submit</button>
</form>

</body>

</html>
54 changes: 54 additions & 0 deletions Marathon_Registration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marathon Registration Form</title>
</head>

<body>
<h1>Race Registration!</h1>
<form action="">
<div>
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="username_firstname" required>
<label for="last_name">Last Name</label>
<input type="text" id="last_name" name="username_lastname" required>
</div>
<p>
Select a Race:
</p>
<p>
<input type="radio" name="select_race" id="race1" value="Fun Run 5k">
<label for="race1">Fun Run 5k</label>
</p>
<p>
<input type="radio" name="select_race" id="race2" value="Half Marathon">
<label for="race2">Half Marathon</label>
</p>
<p>
<input type="radio" name="select_race" id="race3" value="Full Marathon">
<label for="race3">Full Marathon</label>
</p>
<p>
<label for="Email">Email</label>
<input type="email" name="user_email" id="Email" required>
<label for="Password">Password</label>
<input type="password" name="user_password" id="Password" required>
</p>
<div>
<label for="age">Select Age Group</label>
<select id="age" name="age_group">
<option value="under 18">under 18</option>
<option value="18-30">18 to 30</option>
<option value="above 30">above 30</option>
</select>
</div>
<div>
<button>Register!</button>
<input type="submit" value="Register!">
</form>
</body>

</html>
75 changes: 75 additions & 0 deletions Table_demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heaviest Bird</title>
</head>

<body>
<h1>Heaviest Bird</h1>
<table>
<thead>
<tr>
<th>Animal Name</th>
<th>Average Weight</th>
<th>Flighted</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ostrich</td>
<td>104</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90</td>
<td>No</td>
</tr>
<tr>
<td>Wild Turkey</td>
<td>13.5</td>
<td>Yes</td>
</tr>
</tbody>
</table>

<h2>V2</h2>
<table>
<thead>
<tr>
<th rowspan="2">Animal Name</th>
<th colspan="2">Average Mass</th>
<th rowspan="2">Flighted</th>
</tr>
<tr>
<th>KG</th>
<th>LB</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ostrich</td>
<td>104</td>
<td>230</td>
<td>No</td>
</tr>
<tr>
<td>Somali Ostrich</td>
<td>90</td>
<td>200</td>
<td>No</td>
</tr>
<tr>
<td>Wild Turkey</td>
<td>13.5</td>
<td>29.8</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</body>

</html>
Loading