<!DOCTYPE html>
HTML Sandbox
Heading with a h1 tag
Heading with h2 tag
Heading with h3 tag
Heading with h4 tag
Heading with h5 tag
Heading with h6 tag
<hr>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, enim fugiat
culpa placeat quis mollitia dignissimos? Soluta quo, quod laborum inventore odit
hic porro sit aperiam sapiente deserunt, velit error?</p>
<hr>
<a href="http://google.com"target="_blank">click me</a>
<ul>
<li>List Item One</li>
<li>List Item One</li>
<li>List Item One</li>
</ul>
<ol>
<li>List Item One</li>
<li>List ITem ONe</li>
</ol>
<p>This word is going to be <strong>bold</strong></p>
<p> This word is going to be <em>itallics</em></p>
<p>This word is going to be <mark>highlight</mark></p>
<p>This word id going to be <sub>subscript</sub></p>
<p>This word is going to be <small>small</small></p>
<p>This word is going to be <u>underline</u></p>
<p>This word is going to be <sup>superscript</sup></p>
<hr>
<strong>This text is bold</strong>
<em>This text is itallic</em>
<u>This text is underlined</u>
<hr>
<!-- LINE BREAKS: Self closing and use <br> -->
<!-- Lines to seperate your content <hr> : Self Closing -->
<!-- Grouping Element <div> -->
<div>
<h1>This is come text</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cumque accusamus nam nisi beatae commodi, natus deleniti aliquid,
molestiae ullam perferendis nobis officia odio id distinctio dolorum!
Optio aliquam id illo?</p>
</div>
<!--CLASSES AND ID's: Identify a group of elements for multiple purpose -->
<hr>
<div class="hello">
<h1>Hello</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni nam corporis error minus.
Dolorum possimus libero, quasi magni minus nam ea! Ipsum neque
obcaecati odio necessitatibus deleniti at sapiente explicabo!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia deleniti officia
ipsa nobis unde perferendis cumque natus praesentium non.
Nam inventore minima magni atque debitis qui architecto quaerat. Ipsa, eligendi.</p>
</div>
<div id="hello -2">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat explicabo ipsa
doloremque facilis quisquam nihil animi dolorem, porro inventore neque delectus repudiandae ullam
obcaecati molestias veniam deleniti! Eos, quis perferendis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, non? Eius tempore ipsa ab
atque impedit, accusamus quam excepturi magni asperiores. Voluptate itaque repudiandae
facilis minima. Non eius illo at.</p>
</div>
<hr>
<!-- Blog Article -->
<div class"article">
<h3>some Title</h3>
<small>Posted by: Name</small>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque recusandae nulla
32assumenda doloribus corrupti saepe, unde illo eum quasi autem corporis reiciendis
nobis nisi eligendi nam deleniti natus vitae blanditiis.
</p>
<a href="#">Learn More</a>
</div>
<br>
<hr>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>123-456-789</td>
</tr>
<tr>
<td>2</td>
<td>tom</td>
<td>987-989-345</td>
</tr>
<tr>
<td>3</td>
<td>harry</td>
<td>678-456-344</td>
</tr>
</tbody>
</table>
<!-- buttons -->
<button>Click</button>
<button disabled>Disabled</button>
<button reset>Reset</button>
<hr>
<!-- FROM -->
<form>
<lable>First Name</lable>
<br>
<input type="text" placeholder="Enter first Name (xxxx)">
<br>
<br>
<label for="Email">Email</label>
<br>
<input type="email" required>
<br>
<input type="submit" value="Submit" >
<!-- Form Select List -->
<select>
<option value="" disabled selected>--Select--</option>
<option value="">option one</option>
<option value="">option two</option>
<option valur="">option three</option>
</select>
<br>
<br>
<label for="Message">Message</label>
<br>
<textarea></textarea>
<br>
<br>
<input type="submit" value="Submit">
</form>
<br>
<!-- images -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhze-QNnca2liBrhRj4CjswGZSkqbhvSDJsQ&usqp=CAU" alt="image of a flower">
<!-- Navbar -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<div style="margin-bottom: 500px"></div>
</body>
*ABOUT PAGE
*
<!DOCTYPE html>
About page
My About Page
This is about section
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sequi,
enim aspernatur similique voluptate amet assumenda distinctio ab harum, qui error libero.
Error, dolore minus facere accusantium rerum debitis autem?
- Item one
- Item two
Copyright © 2022; All Rights Reserved
** EXTERNAL CSS**
<!DOCTYPE html>
CSS Sandbox
<link rel="stylesheet" href="../css/intro.css">
Intro Page
Button
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque provident architecto modi reiciendis deserunt,
illo asperiores laborum dolorum et veniam cupiditate? Id harum odio corrupti, dicta laboriosam ut
corporis amet!
<form>
<label for="First Name">First Name</label>
<input type="text" placeholder="Enter First Name">
<label for="Last Name">Last Name</label>
<input type="text"placeholder="Enter Last Name">
<label for="Email">Email Address</label>
<input type="email"placeholder="Enter Email Address">
<input type="submit" value="Submit" class="button">
</form>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>Smith</td>
</tr>
<tr>
<td>John</td>
<td>Roll</td>
</tr>
</tbody>
</table>
</section>
REFERENCE LINK
*{
margin:0;
padding:0;
}
body {
font-family: sans-serif;
}
.header{
background-color: red;
color:white;
padding: 20px;
}
button{
margin-top: 10px;
margin-top: 10px;
padding: 10px 20px;
border: 1px solid transparent;
background: #333;
color:azure;
border-radius: 5px;
cursor: pointer;
transition: all 1s;
display: block;
}
.button:hover {
background: transparent;
color:black;
border: 1px solid black;
}
form {
margin: 10px;
margin-top: 20px;
}
form label {
display: block;
margin: 5px 0;
}
from input[type="text"],
input[type="email"] {
padding: 7px 1px;
margin: 3px 0;
width: 100%;
border-radius: 5px;
border: 1px solid #ccc;
}
table{
width: 100%;
border: 1px soild #333;
margin:auto;
}
table td, th {
background-color: #f4f4f4;
}
table th {
border-bottom: 1px solid #333;
}
Top comments (0)