Section 1: Cheat Sheet for global family.html
<!DOCTYPE html>
<html>
<head>
<title>Global Family</title>
<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" >
</head>
<body>
<header style="align:left;" font-size:60pt;" ><strong>Global Family</strong></header>
<nav><table style="width:100%" cellspacing="2" cellpadding="6" text-align="center" background-color="#ffcc33" color="white">
<tr><td style="width:25%;"><a href="Home.html">Home</a></td> <td style="width:25%;"><a href="Members.html">Members</a></td>
<td style="width:25%"><a href="About Us.html">About Us</a></td> <td style="width:25%"><a href="Contact US.html">Contact Us</a></td>
</tr>
</table>
</nav>
<h1 style="color:red; text-align:center;">Global Family</h1>
<p style="text-align:center;"> A family that keeps together</p>
<p style="text-align:center;"> <img src="pix/Old Couple.png" rel="Old Couple" width="10%"<br> Old Couple</p>
<p style="text-align: center;"> <img src="https://i.pinimg.com/originals/b0/98/01/b09801e517bb55371ef5358205e831c0.jpg" width="5%" /> </p>
<video controls>
<source src="pix/clap.mp4" type="video/mp4" width="50%" rel="Woman Clapping">
</video>/p>
<p>Woman Clapping</p>
<!-- Adding Table to My Web Page -->
<table class="table2" table border="1" cellspacing="0" cellpadding="4" align="center" >
<tr><th>Author</th> <th>Quotes</th><th>Image</th> </tr>
<tr><td>Desmond Tutu</td><td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>
<tr><td>Desmond Tutu</td><td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>
<tr><td>Richard Bach</td><td>The bond that links your true family is not of blood, but of respect and joy in each other’s life</td></tr>
<tr><td>Steve Jobs</td><td>Sometimes life hits you in the head with a brick. Don’t lose faith</td></tr>
<tr><td>Mark Twain</td><td>Good friends, good books and a sleepy conscience: this is the ideal life</td></tr>
</table>
<p><iframe width="320" height="245" src="https://www.youtube.com/embed/0iYsBnj2BUk"&gy;</p>
<p></iframe></p>
<p>Lou Clip</p>
<p>I changed the video to "Lou Clip" as "Family of Chickens" is not available on YouTube anymore. Regardless of the content, the idea is to learn how to embed a YouTube video in your program.</p>
<h2 style="color:green;text-align:center;">
What Is A Global Family? </h2>
<p>We are living in an era of<strong>quantum change;<em> <strong> leaving behind old patters of being in institutions that no longer serve our needs or support our emerging consciousness.<p>
<p style="text-align:center;"> <img src="pix/sunset.jpg" alt="Sunset" width="5%"<br>A Beautiful Sunset</p> At this pivotal time inhumanity’s evolution.we need <font color=”green”>courage, commitment&</font> and a supportive community of like-hearted souls to guide the way in transforming society.</p>
<div id="wrapper" style="text-align:center;">
<h2 style="color:green;text-align:center;">Global Family Mission</h2>
<ul style="text-align:center;">
<li>All the World is a family</li>
<li>Charity begins at home</li>
<li>Family builds character</li>
</ul>
<h2 style="color:green;text-align:center;">
Global Family Unit </h2>
<ol>
<li>Individual</li>
<li>Support Group</li>
<li>Symbiosis</li>
</ol>
<a href="http://www.google.com">Go to Google
<!-- Adding Footer to My Web Page -->
<div class="footer">
<table class="table3" table border="0" cellspacing="0" cellpadding="0" align="center" > <tr>
<td>Copyright © 20XX, TheThinkClub, All Rights Reserved</td> <td style="text-align:right">Designer:Anil Shrivastava</td>
</tr></table>
</div>
</body>
</html>
Section 2: Cheat Sheet for global family stylesheet.css
/* Stylesheet for Header */
Header{height:100px;
/* Font Size, line-heigh, and family */
Font: 40px/80px Sans-Serif,Gadget,Fantasy; text-align:center;
/* Background color, image, position */
background-color: teal;color: white; background-image: URL(pix/kautilaya.png);background-repeat: no-repeat; background-position: 10px center;
/* Round the top corners */
border-top-left-radius: 18px;border-top-right-radius: 18px;
}
/*======== Styling for the nav section (nav) */
table.table1{background-color:silver;font: 20pt Sans-Serif,Gadget, Fantasy; }
/* Styling for the sidebar section (aside) */
aside{
width:130px;
padding:10px;
float:left;
background-color:#f9c6b3;
}
/* Stylesheet for Article */
article{padding:10px;
/* Left margin shoulde match neighboring column full width */
margin-left:150px;
border-left:solid 1px #d0ae8e
}
/*Stylesheet for h1 and h2 headers */
h1{color:red;text-align:center
}
h2{color:green;font-size:15pt; padding:10px;font:15pt San-Serif, Arial, Helvetica;text-align:center
}
/* Stylesheet for paragraph */
{color:black;font:10pt San-Serif, Arial, Helvetica;
}
/* Stylesheet for Body */
body{background-color:#ffeec6;text-align:center;color:maroon; padding:10px; font:15pt San-Serif, Arial, Helvetica; }
/* Stylesheet for Table Font */
Table.table2{color:black;font:10pt San-Serif, Arial, Helvetica;
}
/* Stylesheet for Table */
Table.table2 tr:nth-child(odd){background-color:#cef;
}
/* Stylesheet for Highlight table row on hover */
Table.table2 tr:hover{background-color:yellow; cursor:default;
}
/* Align Table Columns Differently */
table.table2 td:nth-child(even){text-align:left;
}
/* Stylesheet for Footer */
/* Font Size, line-heigh, and family */
.footer{height: 35px; padding: 10px; background-color: teal; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}
/* Styling for table in footer */
table.table3{ width: 70%; margin: 5px auto; color:white; background-position: 10px center; font:15px Sans-Serif, Gadget, Fantasy;
}
Final Look of the Webpage
Section 3: CSS3 Supplementary Materials References
Color Names
Colors and hex values
CSS Selectors
CSS Reference