HTML

CSS - text

--hi--

--hi--

--hi--

Chery's stuff



<head>
<style type="text/css">

 
body{font-family:arial;color:#2288BB;font-size:17px;line-height:25px}
h3{font-family:arial;color:#217fae;}
p.orange{color:orange;}
p.bold{font-weight:bold}
p.center{text-align:center;}
a:link {color:blue;font-weight:bold;text-decoration:none}
a:visited {color:#72E0F8;font-weight:bold;text-decoration:none;}
a:hover {text-decoration:none;font-weight:bold;color:orange;}
</style>
</head>

<body>

<h3>CSS - text</h3>
<p class="orange" >--hi--</p>
<p class="bold">--hi--</p>
<p class="center">--hi--</p>

<a href="http://cheryls-stuff.blogspot.com/" target="_blank">
<p>Cheryl's stuff</p></a>



 Blog Post
<style>
.page{width:600px; background-color:#FFF3F3; border-style:solid; border-width:0px; border-color:#FFF3F3; font-family: arial;color:#595BA2;}

.pageborder{padding:0px; background-color:#ffeded; border-style:solid;  border-width:2px; border-color: #ffe8e8;}
/* Div */
.content { padding-bottom:20px; padding-top:0px;  padding-left:30px; padding-right:30px; background-color:white; margin-top:0px; margin-left:10px; margin-right:10px;
margin-bottom:25px; border-style:solid; border-width:2px; border-color:#ffe8e8;}
.content2 { padding-bottom:0px; padding-top:0px;  padding-left:0px; padding-right:30px;  margin-top:10px; margin-left:9px; margin-right:8px; margin-bottom:0px;
border-style:solid; border-width:1px; border-color:#ffe8e8;} 
/* Text */
p {font-family: arial; font-size:16pt;line-height:160%;color:#595BA2; margin:0px;padding-bottom:0px;}
.helvetica {font-family:arial; font-size:16pt;line-height:160%;color:#595BA2; margin:0px;padding-bottom:0px;}

h2{ font-family: arial; color:#595BA2;}
a { text-decoration:none }
/* Img */
.first{position: relative;padding-bottom:0px; padding-top:0px; }
.second{position: relative;padding-bottom:3px; padding-top:2px; padding-left:20px;}</style>

<div class="page">
<div class="pageborder">
   
<!--IMAGES__________________________-->
<div class="content2">
<img class="first" alt="title"  title="Dragonfly" border="0"
src="http://2bunnies.org/DumStuff/Heron_titleSm.png" />
</div>

<div class="content">
<p style="padding-top:0px ">Heron and Dragonfly are looking for a friend. They are going to the park. They see some cute little squirrels. Heron and Dragonfly swoop down to the park.
They play with their new friend. Her name is Pip. She likes to play on the slide. Heron likes to play on the swings. Next, they all play duck, duck, goose. A bobcat was watching them play.
The bobcat was hiding behind a bush. They had lots of fun!! They decided to go home. They saw a pond. Heron wanted to have a drink. They saw a frog. The frog wanted to eat Dragonfly!
Heron quickly pecked his back. The frog said, ”ouch.” He hopped back into the pond. “Thank you Heron,” said Dragonfly. They see a bobcat.
The bobcat says, ”I’ll give you a pretty surprise.” </p>
<p class="helvetica">(To be continued)</p>
</div>

<div style="position: relative; left: 0; top: 0;">
<a href="http://cheryls-stuff.blogspot.com/"  title="cheryls-stuff.blogspot.com">
<img border="0" src="http://2bunnies.org/DumStuff/Dragonfly_smallest2.png" style="position: absolute; top: -26px; position: absolute; left:60px; "/></a></div>


<!--Next_Button_____________-->
<span style="position:relative;left:530px;"> <a href="http://2bunnies.org/2LittleKitties/DuckNavigation2/Amelia_Dragonfly1.html" title="Next story">
<img alt="Next" border="0" src="http://2bunnies.org/2LittleKitties/PinkNextButton/images/PinkNextButton_sm.png"/></a></span>

</div>
</div>
                        
<!--FOOTER__________________________________-->
<p style= "background-color: #FFF3F3; font-family:arial; font-size:10pt;padding-left:250px;">
<a href="https://docs.google.com/document/d/1lSls7e5tzW6E8EKHKafbWh6QH8Hy3DVWrepP72wPJ4Y/edit?hl=en&authkey=CIXAxJEM" target="_blank">More....(Google Docs)</a>
</p>





Book - place images on top of one large image
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title> Adelaide and Amelia </title>
<style>
body{ background-color:#FFF3F3; text-align:center; font-family:"comic sans ms",arial }
.page{width:870px; margin-left:auto; margin-right:auto;  text-align:left;  background-color:#ffecec;  border-style:solid; border-width:1px;border-color:#FFF3F3;}
.navigation{ margin-bottom:0px; margin-top:0px;padding-left:15px; padding-bottom:10px;position:relative; left:0px}
.content {padding:0px;position:relative; left:0px; background-color:#FFF3F3; margin-top:1px; margin-left:0px; margin-right:0px; margin-bottom:1px;  border-style:solid; border-width:0px; border-color:#ffecec;}
a { text-decoration:none }
p {font-size:18pt; color:#707070; word-spacing:12px; background-color:white; margin:0px; padding:0px;padding-left:40px;}
</style></head>


 <body >
<div class="page">
<!--BOOK__________________-->
<div style="position: relative; left: 0; top: 0;"
<img src="http://2bunnies.org/2LittleKitties/Book10_website.png" alt="book"  style="position: relative; top: 0; left: 0;"/>

<img src="duck_sm.png" style="position: absolute; top:35px; left:30px;"/>
<img src="duck_sm.png" style="position: absolute; top:35px; left:455px;"/>
<img src="duck_sm.png" style="position: absolute; top:350px; left:30px;"/>
<img src="duck_sm.png" style="position: absolute; top:350px; left:455px;"/>
</div>

</div>
</body >
  <!--FOOTER______________________-->
<p style="background-color:#FFF3F3; font-family:arial; font-size:10pt; padding-left:20px">copyright</p>



Africa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><link rel="icon"  type="image/png"  href="http://2bunnies.org/HtmlBlog/BlueBunBuns_tiny.png"><title> Stuff</title>
   
<style>
body{ background-color: #E3EEF9; text-align:center; font-family:arial;font-size:14pt; }
.page{width:900px; margin-left:auto; margin-right:auto;  text-align:left; background-color:#E3EEF9; border-style:solid; border-width:5px;border-color :#E3EEF9;;}
.navigation{ margin-bottom:-2px; margin-top:9px;padding-left:110px;padding-top:13px;background-color:#E3EEF9;}
.pageborder{padding:0px; background-color:#EDF6FF; border-style:solid;  border-width:3px; border-color: #E3EEF9;}
/* Div */
.two    { padding:1px; padding-top:3px;  padding-left:85px;  background-color:white; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:1px; border-style:solid; border-width:3px; border-color:#E5F1F9;}
.one    { padding:1px; padding-top:3px;  padding-left:115px; background-color:white; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:1px; border-style:solid; border-width:3px; border-color:#E5F1F9;}
/* Text */
p {font-size:14pt;line-height:160%;color:#505050;background-color:white; margin:0px;padding-bottom:0px;}
h2{ color:#1B6990;}
a { text-decoration:none }
/* Img */
.first{position: relative;padding-bottom:60px; padding-top:15px; }
.second{position: relative;padding-bottom:60px; padding-top:15px; }</style></head>

<body >

   
<!--Blue_Rabbit____________-->
<div class="page"><div style="position: relative; left: 0; top: 0;">
<a href="http://cheryls-stuff.blogspot.com/"  title="cheryls-stuff.blogspot.com">
<img border="0" src="http://2bunnies.org/HtmlBlog/BlueBun50pxCheryl4.png" style="position: absolute; top:-29px; position: absolute; left:20px; "/></a></div>

<!--NAVIGATION____________-->
<div class="navigation" > <!-- Photoshop_Save for Web Slices (Navigation_HTMLBlog10.psd) -->
<table id="Table_01" width="784" height="45" border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="http://cheryls-stuff.blogspot.com/"><img src="images/Navigation_HTMLBlog10_01.png" width="189" height="45" border="0" alt="Home"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/snippets.html"><img src="images/Navigation_HTMLBlog10_02.png" width="84" height="45" border="0" alt="Snippets"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/html-basic.html"><img src="images/Navigation_HTMLBlog10_03.png" width="66" height="45" border="0" alt="HTML"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/css-text.html"><img src="images/Navigation_HTMLBlog10_04.png" width="58" height="45" border="0" alt="CSS"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/d.html"><img src="images/Navigation_HTMLBlog10_05.png" width="75" height="45" border="0" alt="Snoopy"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/photoshop.html"><img src="images/Navigation_HTMLBlog10_06.png" width="97" height="45" border="0" alt="Photoshop"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/illustrator.html"><img src="images/Navigation_HTMLBlog10_07.png" width="87" height="45" border="0" alt="Illustrator"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/stuff.html"><img src="images/Navigation_HTMLBlog10_08.png" width="59" height="45" border="0" alt="Stuff"></a></td>
        <td><a href="http://cheryls-stuff.blogspot.com/p/flash.html"><img src="images/Navigation_HTMLBlog10_09.png" width="69" height="45" border="0" alt="Flash"></a></td>
</tr></table><!-- End Save for Web Slices --></div>

<div class="pageborder">
   
<!--IMAGES__________________________-->
<div class="one"><h2>Africa </h>
<p style="font-weight:900;padding-top:15px "> African Wild Cat</p>
<a href="http://www.flickr.com/photos/davidbygott/4019916190/" target="_blank">
<img class="first" alt="http://www.flickr.com/photos/davidbygott/4019916190/"  title="http://www.flickr.com/photos/davidbygott/4019916190/" border="0" src="http://2bunnies.org/HtmlBlog/Stuff_HTML/4019916190_bb54801d77_z.jpg" /></a><br />
<p style="font-weight:900; ">Serval</p>
<a href="http://www.flickr.com/photos/mortalcoil/2625638665/" target="_blank">
<img class="second" alt="http://www.flickr.com/photos/mortalcoil/2625638665/" title="http://www.flickr.com/photos/mortalcoil/2625638665/" border="0" src="http://2bunnies.org/HtmlBlog/Stuff_HTML/2625638665_447ddc4ab7_z.jpg" /></a><br />
</div>

<!--Next_Button_____________-->
<span style="position:relative;left:830px;"> <a href="http://cheryls-stuff.blogspot.com/" title="Home">
<img alt="Next" border="0" src="http://2bunnies.org/HtmlBlog/BlueNextButton_sm.png"/></a></span></div> 
                        
<!--FOOTER__________________________________-->
<p style= "background-color: #DFEDF9; font-family:arial; font-size:10pt;padding-left:300px;">Pictures: David Bygott, Luke Robinson (Flickr) <br/>
<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/" target="_blank">Attribution-NonCommercial-ShareAlike</a></p>

</body></html>

Next