Day 13
I have started on the landing page for the games I want to create for my grand children. It is, hopefully, a way for me to assist in their home schooling.
Aaaaannndd... HAPPY BIRTHDAY MARY!
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
index.html
<!DOCTYPE html>
<html>
<head>
<title>Gramps' Games</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main-header">
<H1>Welcome to the home of Gramps' Games</H1>
</div>
<div>
<p>
This is the landing page for the games that I am creating for my grand children. I am using this motivation to teach myself web-based programming and plan to make the games more complex as my skills improve.<br>
</p>
<span id="hope">I do hope that you enjoy the fun!</span>
</div>
<ul>
<li><a href="http://games.smchosting.com/simon/shapes.html">Simple Simon</a></li>
<li>Memory</li>
<li>Lights Out</li>
<li>Flash</li>
</ul>
</body>
</html>
**********
Style.css
#main-header {
background-color: lightblue;
height: 100px;
width: 99%;
border: 1px solid blue;
text-align: center;
}
#hope {
display: block;
font-size: 2em;
font-weight: bold;
text-align: center;
}
Aaaaannndd... HAPPY BIRTHDAY MARY!
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
index.html
<!DOCTYPE html>
<html>
<head>
<title>Gramps' Games</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main-header">
<H1>Welcome to the home of Gramps' Games</H1>
</div>
<div>
<p>
This is the landing page for the games that I am creating for my grand children. I am using this motivation to teach myself web-based programming and plan to make the games more complex as my skills improve.<br>
</p>
<span id="hope">I do hope that you enjoy the fun!</span>
</div>
<ul>
<li><a href="http://games.smchosting.com/simon/shapes.html">Simple Simon</a></li>
<li>Memory</li>
<li>Lights Out</li>
<li>Flash</li>
</ul>
</body>
</html>
**********
Style.css
#main-header {
background-color: lightblue;
height: 100px;
width: 99%;
border: 1px solid blue;
text-align: center;
}
#hope {
display: block;
font-size: 2em;
font-weight: bold;
text-align: center;
}
Comments
Post a Comment