mirror of
https://github.com/Nezumi-2711/loi-phan-internship.git
synced 2026-09-22 20:01:33 +00:00
Init sample code training chapter 14
This commit is contained in:
Nezumi
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
|
||||
|
After Width: | Height: | Size: 429 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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=Cabin:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<title>Lists, Tables and Forms</title>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
font-family: 'Cabin', sans-serif;
|
||||
font-size: 90%;
|
||||
color: #666;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-image: url("./assets/images/plus-solid.svg");
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px 30px 5px 10px;
|
||||
border-spacing: 0px;
|
||||
font-size: 90%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
background-color: #e0e9f0;
|
||||
border-top: 1px solid #f1f8fe;
|
||||
border-bottom: 1px solid #cbd2d8;
|
||||
border-right: 1px solid #cbd2d8;
|
||||
}
|
||||
|
||||
tr.head th {
|
||||
color: #fff;
|
||||
background-color: #90b4d6;
|
||||
border-bottom: 2px solid #547ca0;
|
||||
border-right: 1px solid #749abe;
|
||||
border-top: 1px solid #90b4d6;
|
||||
text-align: center;
|
||||
text-shadow: -1px -1px 1px #666;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
td {
|
||||
text-shadow: 1px 1px 1px #fff;
|
||||
}
|
||||
|
||||
tr.even td,
|
||||
tr.even th {
|
||||
background-color: #e8eff5;
|
||||
}
|
||||
|
||||
tr.head th:first-child {
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
tr.head th:last-child {
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-moz-border-radius-topright: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
width: 310px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #d6d6d6;
|
||||
background-color: #ffffff;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-style: italic;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 120px;
|
||||
border: 1px solid #d6d6d6;
|
||||
padding: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="text"]:hover {
|
||||
background-color: #d0e2f0;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
border: 1px solid #006633;
|
||||
background-color: #009966;
|
||||
color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
border: 1px solid #006633;
|
||||
background-color: #00CC33;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
width: 160px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 310px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Poetry Workshops</h1>
|
||||
<p>We will be conducting a number of poetry workshops
|
||||
and symposiums throughout the year.</p>
|
||||
<p>Please note that the following events are free to
|
||||
members:</p>
|
||||
<ul>
|
||||
<li>A Poetic Perspective</li>
|
||||
<li>Walt Whitman at War</li>
|
||||
<li>Found Poems and Outsider Poetry</li>
|
||||
</ul>
|
||||
<table>
|
||||
<tr class="head">
|
||||
<th></th>
|
||||
<th>New York</th>
|
||||
<th>Chicago</th>
|
||||
<th>San Francisco</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>A Poetic Perspective</th>
|
||||
<td>Sat, 4 Feb 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 3 Mar 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 17 Mar 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Walt Whitman at War</th>
|
||||
<td>Sat, 7 Apr 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 5 May 2012<br />11am - 1pm</td>
|
||||
<td>Sat, 19 May 2012<br />11am - 1pm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Found Poems & Outsider Poetry</th>
|
||||
<td>Sat, 9 Jun 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 7 Jul 2012<br />11am - 2pm</td>
|
||||
<td>Sat, 21 Jul 2012<br />11am - 2pm</td>
|
||||
</tr>
|
||||
<tr class="even">
|
||||
<th>Natural Death: An Exploration</th>
|
||||
<td>Sat, 4 Aug 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 8 Sep 2012<br />11am - 4pm</td>
|
||||
<td>Sat, 15 Sep 2012<br />11am - 4pm</td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="http://www.example.com/form.php" method="get">
|
||||
<fieldset>
|
||||
<legend>Register your interest</legend>
|
||||
<p><label class="title" for="name">Your name:</label>
|
||||
<input type="text" name="name" id="name"><br />
|
||||
<label class="title" for="email">Your email:</label>
|
||||
<input type="text" name="email" id="email">
|
||||
</p>
|
||||
<p><label for="location" class="title">Your closest center:</label>
|
||||
<select name="location" id="location">
|
||||
<option value="ny">New York</option>
|
||||
<option value="il">Chicago</option>
|
||||
<option value="ca">San Francisco</option>
|
||||
</select>
|
||||
</p>
|
||||
<span class="title">Are you a member?</span>
|
||||
<label><input type="radio" name="member" value="yes" /> Yes</label>
|
||||
<label><input type="radio" name="member" value="no" /> No</label></p>
|
||||
</fieldset>
|
||||
<div class="submit"><input type="submit" value="Register" /></div>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user