Skip to content

Instantly share code, notes, and snippets.

@Wilhelm97

Wilhelm97/carla.css

Last active May 5, 2018
Embed
What would you like to do?
This is from my Case Study Chapter 5
body {
background-color: #FFFFFF;
background-image: url(background.gif);
color: #0000FF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#container { margin-left: auto;
margin-right: auto;
width:85%;
min-width:700px;
}
#logo {
text-align:center;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 20px;
}
#nav {
float: left;
width: 200px;
padding-top: 10px;
text-align:left;
color: #FF0000;
font-size: 14px;
}
#nav a {
text-decoration:none;
margin: 15px;
display: block;
color: #FF0000;
font-size: 14px;
font-weight: bold;
}
#content {
margin-left: 150px;
padding: 30px;
overflow:auto;
border: medium groove #0000FF;
line-height: 135%;
}
.floatright {padding-left:20px;
float:right;
}
.floatleft {
float:left;
padding: 2px 30px 20px;
}
#footer {
font-size: 16px;
font-style: normal;
text-align: justify;
border-top: thin none;
padding-top: 20px;
padding-bottom: 20px;
color: #FF0000;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}
h2 { text-transform: uppercase;
color: #0000FF;
font-size: 36px;
border-bottom: 1px none;
margin-right: 20px;
}
h3 {
color: #0000FF;
border-bottom: thin none;
margin-right: auto;
text-align: left;
padding-top: 20px;
padding-right: 100px;
padding-bottom: 20px;
padding-left: 100px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.details { padding-left:20%;
padding-right:20%;
}
img {border:0 none; }
.content {
margin: 20px;
padding: 20px;
}
a {
color: #FF0000;
text-decoration: none;
margin: 15px;
color: #FF0000;
font-size: 14px;
font-weight: bold;
}
a:hover {
color: #FFFF00;
background-color: #0000FF;
}
h4 {
line-height: 150%;
margin-right: 20%;
margin-left: 15%;
text-align: center;
}
h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 36pt;
text-align: center;
margin-right: 15%;
margin-left: 20%;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 120%;
font-weight: bold;
color: #0000FF;
}
.flt_img {
float: none;
padding-top: 3px;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 20px;
}
specialh4 {
line-height: 150%;
margin-right: 20%;
margin-left: 15%;
text-align: center;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Carla's Classroom | Advanced Grammer Lesson</title>
<link href="carla.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.style1 {font-size: 24px}
.style2 {font-size: 24px; font-style: italic; line-height: 80%; }
-->
</style>
<script>
function getSentence()
{
var mySub = " "; var myVerb = " "; var myObj = " ";
var sentence = false; var idNum = " ";
var i = 0; var subject = false; var verb = false;
var object = false; var newSentence = " ";
//create loop to get story
for(i = 1; i < 7; i++)
{
mySub = prompt("Please pick a word from the list as the subject: ", " ");
myVerb = prompt("Please pick a word from the list as teh verb: ", " ");
myObj = prompt("Please pick a word from the list as the object: ", " ");
while(sentence != true)
{
if((mySub=="teacher")||(mySub=="boy")||(mySub=="dog")||
(mySub=="girl")||(mySub=="bike")||(mySub=="cat"))
{ subject = true; }
else
mySub = prompt("Please pick a different word for the subject:", " ");
if((myVerb=="jumps")||(myVerb=="rides")||(myVerb=="loves")||
(myVerb=="stands")||(myVerb=="flies")||(myVerb=="swims"))
{ verb= true; }
else
myVerb = prompt("Please pick a different word for the verb: ", " ");
if((myObj=="up")||(myObj=="out")||(myObj=="me")||(myObj=="underwater")||
(myObj=="down")||(myObj=="fast"))
{ object = true; }
else
myObj = prompt("Please pick a different word for the object:"," ");
sentence = true;
}
if((subject == true) && (verb == true) && (object == true))
{
newSentence = "The " + mySub + " " + myVerb + " " + myObj + ".";
idNum = "sentence" + i;
document.getElementById(idNum).innerHTML = newSentence;
}
sentence = false; subject = false;
verb = false: object = false;
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/owl_logo.jpg" class="floatleft" />
<h2>Create Your Story </h2>
<h2 class="style2"> A Grammar Lesson</h2>
<p>&nbsp;</p>
<div style ="clear:both;"></div>
<div align="left"><blockquote>
<p><a href="index.html"><img src="images/owl_button.jpg" />Home</a>
<a href="carla.html"><img src="images/carla_button.jpg" />Meet Carla </a>
<a href="reading.html"><img src="images/read_button.jpg" />Reading</a>
<a href="writing.html"><img src="images/write_button.jpg" />Writing</a>
<a href="math.html"><img src="images/arith_button.jpg" />Arithmetic</a>
<br /></p></blockquote></div>
<div id="content">
<table width = "95%" align="center">
<tr><td>
<table width= "60%" align = "center">
<tr><td colspan = 6>Here are your words: </td></tr>
<!--note: you can change the words as you want -->
<td>teacher</td><td>jumps</td><td>down</td><td>boy</td><td>flies</td><td>out</td></tr>
<tr><td>dog</td><td>me</td><td>loves</td><td>girl</td><td>stands</td><td>underwater</td></tr>
<tr><td>bike</td><td>rides</td><td>up</td><td>cat</td><td>swims</td><td>fast</td></tr>
<tr><td colspan = 6> <input type="button" id="sentence" value="begin" onclick="getSentence();" />
</td></tr></table></tr></td>
<tr><td><p>My Story</p></td></tr>
<tr><td id = "sentence1"></td></tr>
<tr><td id = "sentence2"></td></tr>
<tr><td id = "sentence3"></td></tr>
<tr><td id = "sentence4"></td></tr>
<tr><td id = "sentence5"></td></tr>
<tr><td id = "sentence6"></td></tr>
</table>
</div>
<div id="footer"> <h3><span class="style1">*</span>Carla's Motto: Never miss a chance to teach -- and to learn!
</h3>
<span class="specialh4"></span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.