Day 200
Day two of CSS... Slow day
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
<!DOCTYPE html>
<html lang="en">
<head>
<title>All HTML Tags</title>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Sean Connelly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
background: white;
width: 500px;
margin: 50px auto;
padding: 0;
}
.menu li {
display: inline-block;
list-style: none;
color: #fff;
}
.menu-with-links {
color: #fff;
}
p {
margin: 0 auto;
width: 500px;
line-height: 1.5;
margin-bottom: 50px;
}
/* Using the style tag in the head section is the second way to add styling to your HTML. */
#css2 {
color: yellow;
}
</style>
<!-- Linking to an external style sheet is the third way to add style to your HTML. -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!-- Text tags -->
<h1>THE PAGE!</h1>
<h2>THE PAGE!</h2>
<h3>THE PAGE!</h3>
<h4>THE PAGE!</h4>
<h5>THE PAGE!</h5>
<h6>THE PAGE!</h6>
<p> The <strong>Trade Commission</strong> is divided over the degree to which Mark Zuckerberg should be held liable for his company’s <em>mishandling</em> of users’ data.</p>
<p> The case is being watched as a <span style="color: red;">litmus test</span> on how the U.S. government will police the country’s tech giants.
</p>
<!-- List tags -->
<ul>
<li>Home</li>
<li>
<ol>
<li>Honda</li>
<li>BMW</li>
<li>Mercedes</li>
</ol>
</li>
</ul>
<!-- Image tag -->
<img src="https://i.pinimg.com/originals/d0/e1/39/d0e139570afa79e2d9525df162c39a43.jpg" alt="Vegeta from Dragon Ball Z" style="width: 100px;" />
<!-- Container tags -->
<header style="background: red; height: 100px; padding: 25px;">
<nav style="background: white; height: 100px;">
menu
</nav>
</header>
<div style="background: blue; height: 500px;">
Content Area
</div>
<footer style="background: green; height: 200px;">
copyright
</footer>
<!-- Anchor tag -->
<a href="http://www.google.com" target="new">Google site 1</a>
<a href="http://www.google.com" target="_blank">Google site 2</a>
<a href="http://www.google.com" target="new">
<div>
<h1>
ANOTHER LINK TO GOOGLE
</h1>
</div>
</a>
<!-- Table tags -->
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Total Balance</th>
</tr>
<tr>
<td>Sean</td>
<td>Connelly</td>
<td>$109.00</td>
</tr>
<tr>
<td>Mary</td>
<td>Connelly</td>
<td>$509.00</td>
</tr>
<tr>
<td>Kieran</td>
<td>Ethington</td>
<td>$59.00</td>
</tr>
</table>
<!-- HTML Forms -->
<form action="#" method="POST">
<div>
<label for="name"> Name </label>
<input type="text" name="name" placeholder="John Doe" value="" />
</div>
<div>
<label for="pword"> Password </label>
<input type="password" name="pword" placeholder="ErgU8*1oM!" value="" required />
</div>
<div>
<label for="email"> Email </label>
<input type="email" name="email" placeholder="john@gmail.com" value="" />
</div>
<div>
<label for="gender"> Gender </label>
<select name="gender">
<option value="male"> Male </option>
<option value="female" selected> Female </option>
</select>
</div>
<div>
<label for="relation1"> Relationship Status </label> <br>
<input type="checkbox" name="relation1" value="single"> Single <br>
<input type="checkbox" name="relation1" value="married"> Married <br>
</div>
<div>
<label for="relation2"> Relationship Status </label> <br>
<input type="radio" name="relation2" value="single" checked> Single <br>
<input type="radio" name="relation2" value="married"> Married <br>
</div>
<div>
<label for="description"> Description </label>
<textarea name="description" cols="100" rows="15"></textarea>
</div>
<div>
<input type="submit" value="SUBMIT" />
</div>
</form>
<!-- Links and Scripts -->
<!-- links are to be used in the head section to use linked files and resources -->
<!-- Example... <link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet"> -->
<!-- Script tag does the same thing but is used to execute a scripting language such as JavaScript. -->
<!-- Most commonly used at the bottom of the body section -->
<!-- Branding Elements -->
<ul class="menu menu-with-links">
<li>
<a href="#intro">Intro</a>
</li>
<li>
<a href="#body">Body</a>
</li>
<li>
<a href="#conclusion">Conclusion</a>
</li>
</ul>
<div>
<p id="intro">
Intro - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu velit quis justo condimentum egestas. Nulla est arcu, bibendum ac neque quis, porttitor mollis mauris. Mauris auctor orci ut enim imperdiet blandit. Praesent facilisis feugiat nunc sit amet condimentum. Cras pellentesque tempus elit eget pretium. Nunc accumsan erat erat, sit amet dignissim mi laoreet in. Fusce in lacus in enim pretium vestibulum a sed eros.
</p>
<p id="body">
Body - Vivamus maximus diam metus, ac cursus libero facilisis at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempor consectetur dolor at finibus. Sed vitae condimentum massa. Phasellus vel augue in neque gravida lacinia. Suspendisse aliquet risus ut fringilla semper. Curabitur et velit non sapien viverra tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin non augue et dignissim. Duis ultricies arcu ut mauris interdum, ut ornare purus efficitur.
</p>
<p id="conclusion">
Conclusion - Nam rutrum euismod tempor. Ut lacinia neque vitae purus blandit gravida. Phasellus ut urna ornare, eleifend enim sed, vulputate massa. Pellentesque et dignissim sapien. Curabitur molestie ac libero cursus scelerisque. In odio dolor, mollis ac aliquam id, commodo a massa. Nulla quis pretium dui. Vivamus ac accumsan risus. Aliquam molestie auctor lacinia. Mauris ullamcorper, velit in tincidunt hendrerit, mauris massa blandit risus, a accumsan sapien ex vel diam. Proin vel eleifend dui. Sed luctus velit blandit, porttitor dolor non, consectetur est. Donec quam turpis, blandit sed magna eu, dictum accumsan magna. Phasellus interdum mauris elit, sit amet tristique nulla molestie et.
</p>
</div>
<!-- Inline is the first way to add styling (CSS) to to HTML. -->
<div style="background: red;">
<p id="css2">
This is my paragraph
</p>
</div>
<div id="div1" class="divs">
first box
</div>
<div id="div2" class="divs">
second box
</div>
<div id="div3" class="divs">
third box
</div>
</body>
</html>
<!--
Text from main.css
#css2 {
font-size: 2em;
}
#div1 {
background: red;
color: white;
width:100px;
height: 100px;
}
#div2 {
background: yellow;
color: purple;
width:100px;
height: 100px;
}
#div3 {
background: green;
color: black;
width:100px;
height: 100px;
}
.divs {
border: 2px solid gray;
border-radius: 10px;
}
-->
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
<!DOCTYPE html>
<html lang="en">
<head>
<title>All HTML Tags</title>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="Sean Connelly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
background: white;
width: 500px;
margin: 50px auto;
padding: 0;
}
.menu li {
display: inline-block;
list-style: none;
color: #fff;
}
.menu-with-links {
color: #fff;
}
p {
margin: 0 auto;
width: 500px;
line-height: 1.5;
margin-bottom: 50px;
}
/* Using the style tag in the head section is the second way to add styling to your HTML. */
#css2 {
color: yellow;
}
</style>
<!-- Linking to an external style sheet is the third way to add style to your HTML. -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!-- Text tags -->
<h1>THE PAGE!</h1>
<h2>THE PAGE!</h2>
<h3>THE PAGE!</h3>
<h4>THE PAGE!</h4>
<h5>THE PAGE!</h5>
<h6>THE PAGE!</h6>
<p> The <strong>Trade Commission</strong> is divided over the degree to which Mark Zuckerberg should be held liable for his company’s <em>mishandling</em> of users’ data.</p>
<p> The case is being watched as a <span style="color: red;">litmus test</span> on how the U.S. government will police the country’s tech giants.
</p>
<!-- List tags -->
<ul>
<li>Home</li>
<li>
<ol>
<li>Honda</li>
<li>BMW</li>
<li>Mercedes</li>
</ol>
</li>
</ul>
<!-- Image tag -->
<img src="https://i.pinimg.com/originals/d0/e1/39/d0e139570afa79e2d9525df162c39a43.jpg" alt="Vegeta from Dragon Ball Z" style="width: 100px;" />
<!-- Container tags -->
<header style="background: red; height: 100px; padding: 25px;">
<nav style="background: white; height: 100px;">
menu
</nav>
</header>
<div style="background: blue; height: 500px;">
Content Area
</div>
<footer style="background: green; height: 200px;">
copyright
</footer>
<!-- Anchor tag -->
<a href="http://www.google.com" target="new">Google site 1</a>
<a href="http://www.google.com" target="_blank">Google site 2</a>
<a href="http://www.google.com" target="new">
<div>
<h1>
ANOTHER LINK TO GOOGLE
</h1>
</div>
</a>
<!-- Table tags -->
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Total Balance</th>
</tr>
<tr>
<td>Sean</td>
<td>Connelly</td>
<td>$109.00</td>
</tr>
<tr>
<td>Mary</td>
<td>Connelly</td>
<td>$509.00</td>
</tr>
<tr>
<td>Kieran</td>
<td>Ethington</td>
<td>$59.00</td>
</tr>
</table>
<!-- HTML Forms -->
<form action="#" method="POST">
<div>
<label for="name"> Name </label>
<input type="text" name="name" placeholder="John Doe" value="" />
</div>
<div>
<label for="pword"> Password </label>
<input type="password" name="pword" placeholder="ErgU8*1oM!" value="" required />
</div>
<div>
<label for="email"> Email </label>
<input type="email" name="email" placeholder="john@gmail.com" value="" />
</div>
<div>
<label for="gender"> Gender </label>
<select name="gender">
<option value="male"> Male </option>
<option value="female" selected> Female </option>
</select>
</div>
<div>
<label for="relation1"> Relationship Status </label> <br>
<input type="checkbox" name="relation1" value="single"> Single <br>
<input type="checkbox" name="relation1" value="married"> Married <br>
</div>
<div>
<label for="relation2"> Relationship Status </label> <br>
<input type="radio" name="relation2" value="single" checked> Single <br>
<input type="radio" name="relation2" value="married"> Married <br>
</div>
<div>
<label for="description"> Description </label>
<textarea name="description" cols="100" rows="15"></textarea>
</div>
<div>
<input type="submit" value="SUBMIT" />
</div>
</form>
<!-- Links and Scripts -->
<!-- links are to be used in the head section to use linked files and resources -->
<!-- Example... <link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet"> -->
<!-- Script tag does the same thing but is used to execute a scripting language such as JavaScript. -->
<!-- Most commonly used at the bottom of the body section -->
<!-- Branding Elements -->
<ul class="menu menu-with-links">
<li>
<a href="#intro">Intro</a>
</li>
<li>
<a href="#body">Body</a>
</li>
<li>
<a href="#conclusion">Conclusion</a>
</li>
</ul>
<div>
<p id="intro">
Intro - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu velit quis justo condimentum egestas. Nulla est arcu, bibendum ac neque quis, porttitor mollis mauris. Mauris auctor orci ut enim imperdiet blandit. Praesent facilisis feugiat nunc sit amet condimentum. Cras pellentesque tempus elit eget pretium. Nunc accumsan erat erat, sit amet dignissim mi laoreet in. Fusce in lacus in enim pretium vestibulum a sed eros.
</p>
<p id="body">
Body - Vivamus maximus diam metus, ac cursus libero facilisis at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis tempor consectetur dolor at finibus. Sed vitae condimentum massa. Phasellus vel augue in neque gravida lacinia. Suspendisse aliquet risus ut fringilla semper. Curabitur et velit non sapien viverra tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin non augue et dignissim. Duis ultricies arcu ut mauris interdum, ut ornare purus efficitur.
</p>
<p id="conclusion">
Conclusion - Nam rutrum euismod tempor. Ut lacinia neque vitae purus blandit gravida. Phasellus ut urna ornare, eleifend enim sed, vulputate massa. Pellentesque et dignissim sapien. Curabitur molestie ac libero cursus scelerisque. In odio dolor, mollis ac aliquam id, commodo a massa. Nulla quis pretium dui. Vivamus ac accumsan risus. Aliquam molestie auctor lacinia. Mauris ullamcorper, velit in tincidunt hendrerit, mauris massa blandit risus, a accumsan sapien ex vel diam. Proin vel eleifend dui. Sed luctus velit blandit, porttitor dolor non, consectetur est. Donec quam turpis, blandit sed magna eu, dictum accumsan magna. Phasellus interdum mauris elit, sit amet tristique nulla molestie et.
</p>
</div>
<!-- Inline is the first way to add styling (CSS) to to HTML. -->
<div style="background: red;">
<p id="css2">
This is my paragraph
</p>
</div>
<div id="div1" class="divs">
first box
</div>
<div id="div2" class="divs">
second box
</div>
<div id="div3" class="divs">
third box
</div>
</body>
</html>
<!--
Text from main.css
#css2 {
font-size: 2em;
}
#div1 {
background: red;
color: white;
width:100px;
height: 100px;
}
#div2 {
background: yellow;
color: purple;
width:100px;
height: 100px;
}
#div3 {
background: green;
color: black;
width:100px;
height: 100px;
}
.divs {
border: 2px solid gray;
border-radius: 10px;
}
-->
Comments
Post a Comment