<!DOCTYPE html><html><head>
<meta content="onthisday" name="webmaker:tags">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100" rel="stylesheet" type="text/css">
<!--
Lessons to be covered:
- Floats
- Text-alignment
- Changing content
-->
<!--
This day in history
READ THROUGH THE COMMENTS. This is a comment. Everything inside of
this tag for HTML or '/*' for CSS, is not processed as code, but
instead is just text comments about the code. For this project, the
comments will give you instructions, hints and guides to completing
the project, so skim down through the comments to get an understanding
of what you are being asked to do.
GET ORIENTED IN THE CODE. HTML is made up of tags that look like
this <p>
</p>
. The tags tell you something about the information
contained between them. Click on the tags in the code on this side
of the editor to get a description of what each tag is for.
A good place to start is with the title. Personalize the title of your page by changing the text within the <title>Remix of Remix of Remix of Remix of </title>
tags. For example, 'Charlie Brown's first web page' might be one way to go.
The title won't appear on the main web page within this editor but it will appear at the top of the browser once you publish and view your project and if you roll over it when it's a tab or a minimized window. Mighty helpful when you have a gazillion windows open at the same time.
-->
<title>On This Day in History: A Starter Make</title>
<style>
/*
LESSON -
Don't like the layout of this page? Floating an object removes it from the flow of the page and align them to the left or right of the parent element, in this case .columns - try and changing the values for the column floats to either left or right. Notice what this does to the columns. You can order the columns in pretty much any order.
As it stands the columns will read left to right in the order they appear in the HTML.
The order of the columns in the HTML is important as if you are floating two columns in the same direction, the column that appears in the markup first will take precedent and appear to the left of the two columns.
If all the columns are floated left the columns appear in order. If you want the first or middle columns to appear on the right try floating one of them right.
*/
.columns .column-1 {
float:left;
}
.columns .column-2 {
float:left;
}
.columns .column-3 {
float:left;
}
/*
LESSON - A standard style for text alignment in newspapers is 'justify'. This effect fills each line with text before falling to the next line. Try changing the value to either left right or center and back again to justify to see the effect.
*/
body {
text-align:justify;
}
.hero-story h2,
.hero-story h3 {
text-align:center;
}
.story h2 {
text-align:left;
}
span.year,
footer.date,
span.date,
div.price {
text-align:center;
}
blockquote {text-align:right;}
</style>
</head>
<body>
<div class="page">
<div class="page-inner">
<h1>
Blog Karrysta 2
</h1>
<!--
LESSON - Have ago at creating your own on this day page with different dates, events and images.
-->
<span class="date">
<a href="http://karristaent.blogspot.com">www.karristaent.blogspot.com</a> </span>
<span class="date">
22/11/2014, Indonesia </span>
<div class="hero">
</div>
<div class="columns">
<div class="column-1">
<div class="story">
<span class="year">22-11-2014 </span>
<h2>
"Miss Karrysta,"</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rMU0yPUQIDn7HCeXtkcvvyMqeuGmAqLz71yiq88WoxI1U8-XG5p37E8O_cT-u6pFxKsVeyj8p6SR4jTSRQOkAjte6b6fXZTJUJiE0G_o4rkOlKqMAZJSa5-afUdxPkEzXpXUm0x6hdg/s1600/No-inmissKarrysta.jpg" title="Miss Karrysta"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare ante in leo sollicitudin, at aliquet leo sollicitudin. Cras dictum sodales cursus. Cras non ligula quis justo cursus faucibus. Sed at ullamcorper nibh, ac aliquet neque. Mauris ultrices mauris vel consectetur consectetur. Vestibulum a velit eget erat iaculis mattis. Pellentesque sit amet facilisis felis. Maecenas fringilla pellentesque suscipit. Suspendisse ullamcorper ac erat in sagittis. Nunc vehicula, risus in commodo malesuada, arcu urna imperdiet magna, ac hendrerit ex risus non dolor..</p>
</div>
<div class="story">
<span class="year">Karrysta 2014</span>
<h2>
Karrysta</h2>
<img>
<p>
Morbi id vestibulum purus. Praesent vitae tempus metus, vitae luctus sapien. Duis blandit neque est, quis vulputate ipsum tempor sit amet. Donec metus purus, suscipit sit amet elit a, pretium varius nisl.</p>
</div>
</div>
<div class="column-2">
<div class="hero-story">
<hgroup>
<span class="year">2014</span>
<h2>
Halaman Posting Seperti Koran atau Majalah</h2>
<h3>
22 November</h3>
</hgroup>
<p>
<b><a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh risus, condimentum blandit lacus ac, vulputate congue tellus. Sed malesuada felis dictum magna euismod faucibus. Pellentesque euismod odio aliquam ipsum dictum, eu condimentum felis hendrerit. Aenean vestibulum eleifend massa quis mollis. In congue nibh ut odio porttitor, sit amet suscipit mi dignissim. Donec ut velit interdum velit mattis iaculis. Lorem ipsum dolor sit amet.</p>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumhngR5ojNTIGwrNDPjON77qc9tdaYnRI9Lann6uTJTpGcW3OpqY6jgoBBTVch43U64vlu2K5tNP-u4xdci2aeXvI-3Kroqi-8tplthYgiTfdOb3oNCBI9GpU3WnfU9XdKHd4gtlKUU0/s1600/@@1.jpg" title="Miss Karrysta"/>
<p>
<b><a href="http://karristaent.blogspot.com/2014/11/rank-alexa-anjlok-terjun-bebas.html" title="Rank Alexa Anjlok Terjun Bebas ">Karrsta</a></b> Morbi iaculis, purus nec rutrum vehicula, justo ante egestas libero, quis vestibulum leo dolor vitae libero. In ultricies erat lacus, at bibendum ex euismod eu. Pellentesque ut varius tellus. Etiam dapibus, libero sit amet imperdiet vulputate, augue tortor dictum ante, quis eleifend nisi augue id ipsum. Duis dignissim nec lacus vel eleifend. Nulla aliquam leo at ligula porttitor facilisis. Aliquam aliquet est ut pharetra commodo. Praesent volutpat vestibulum tempus. Donec efficitur justo quis convallis commodo. Nam id enim sem. Praesent viverra sagittis ipsum id pretium</p>
</div>
</div>
<div class="column-3">
<div class="story">
<span class="year"></span>
<h2>
Neng Karrysta Tersayang</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nCn3xvR8EK7udPz9j1szy5aaYAgylrj0Obx7r_Qh8o9wIPer7BSaUTSvXUExMC1Le7Iv1uYQRXgTgUyxA_UnGjdal5hxsKRY_bdCl7ISqlJKk-623gcEqHNiW8IayhPvKeZdEfD-MgE/s1600/karrysta-cyg.jpg" title="Karrysta Tersayang"/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper lorem aliquam lorem rhoncus aliquet. Nunc rhoncus purus risus, hendrerit hendrerit nibh tristique sit amet. Donec suscipit felis quis risus mollis, sed lacinia enim feugiat. Donec tincidunt massa eros, ut venenatis libero bibendum ut. Mauris fringilla lectus justo, eget cursus risus maximus at.</p>
</div>
<div class="story">
<span class="year">Saud S Karrysta 2014</span>
<h2>
Musisi Band/Dangdut Jawa Barat</h2>
<img alt=" Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4REUrvLysqcCKY3ZZUbjOjJ9mDevQaV_qlae9UMome59YHnKsrCAOtoW2KwOKWtl92kgvWg40BuXnK3604qJOjMTPXVoldkQYMvlYtUQlr24xyp4yCSwotwVeo5fpILWOd0DeC6m9sg/s1600/@.Karrysta1.jpg" title="Administer : Saud Karrysta"/>
<p>
In venenatis, ex sed imperdiet dictum, quam nunc molestie libero, ut faucibus velit mauris vel metus. Donec dictum risus vel nulla rhoncus pretium. Nam a lacus euismod, egestas lorem viverra.</p>
</div>
</div>
</div>
<footer class="date">
Administer by: <a href="http://karristaent.blogspot.com" title="Karrysta">Karrysta</a> | Support by : <a href="http://karristabloggerdemo.blogspot.com" title="Karrysta Demo2">Saud S Karrysta</a>
</footer>
</div>
</div>
<style>
/* **
Main style - BY ALL MEANS HAVE A PLAY WITH THESE STYLE DECLARATIONS BELOW! HOWEVER ANY CHANGES MAY BREAK THE LAYOUT
*/
body {
background:#5f5f5f;
font-family: 'Roboto Slab', serif;
font-weight:300;
-webkit-backface-visibility: hidden;
}
h1, h2, h3, {
margin:0px 0px 12px 0px;
}
a {color:#444;}
.page {
position:relative;
padding:30px;
margin-left:10px;
width:500px;
margin:80px auto 200px;
background:#FFF;
-webkit-border-bottom-left-radius: 100px 20px;
-webkit-border-top-left-radius: 100px 20px;
border-top-left-radius: 100px 20px;
border-bottom-left-radius: 100px 20px;
box-shadow :20px 20px 20px rgba(0,0,0,0.3);
height:100%;
background: #F9f9f9 -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(220,220,220,0) 30%);
/* FF3.6+ */
background: #FFF -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(240,240,240,0)));
/* Chrome,Safari4+ */
background: #FFF -webkit-linear-gradient(left, rgba(0,0,0,0.6) 0%,rgba(240,240,240,0) 30%);
/* Chrome10+,Safari5.1+ */
background: #FFF -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);
/* Opera 11.10+ */
background: #FFF -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%);
/* IE10+ */
background: #FFF linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(240,240,240,0) 30%%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dededed', endColorstr='#00ffffff',GradientType=1 );
/* IE6-8 */
/* Safari and Chrome */
}
.page:after {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
outline: 1px solid transparent;
}
.page:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #F7F7F7;
border-width: 100px;
margin-left: -70px;
-webkit-transform: rotate(42deg);
transform: rotate(42deg);
right: -89px;
top: -107px;
z-index: -4;
outline: 1px solid transparent;
}
.page-inner {
overflow:hidden;
position:relative;
}
.page h1 {
font-family: 'Roboto Slab', serif;
font-weight:100;
position: relative;
padding: 0 75px 0 50px;
margin:0px;
position:relative;
line-height:1;
letter-spacing:-1px;
font-size:42px;
font-weight:normal;
text-transform:uppercase;
line-height:100px;
text-align:center;
color:#FE880F;
opacity:1;
z-index:1;
}
footer.date,
span.date {
display:block;
border-top:solid 1px #CCC;
border-bottom:double 3px #CCC;
margin-bottom:20px;
padding:6px 0px;
}
div.price {
padding:10px;
border:double 3px #BBB;
display:inline-block;
position:absolute;
left:0px;
top:30px;
}
div.edition {
padding:6px;
border:double 3px #BBB;
display:inline-block;
position:absolute;
right:0px;
top:24px;
font-size:14px;
text-transform:uppercase;
text-align:center;
}
span.year {
font-weight:bold;
font-size:11px;
margin-bottom:10px;
display:block;
font-family:sans-serif;
letter-spacing:1px;
}
.hero-story h2 {
font-weight:normal;
text-transform:uppercase;
font-size:40px;
margin:0px 0px 4px 0px;
line-height:0.9em;
letter-spacing:-1px;
}
.hero-story h3 {
font-weight:normal;
font-style:italic;
text-transform:uppercase;
font-size:18px;
margin:0px 0px 16px 0px;
}
p {
font-size:13px;
line-height:18px;
}
blockquote cite {
font-style:normal;
font-size:13px;
}
.columns {
overflow:hidden;
width:613px;
margin-left:-12px;
}
.columns img {
width:100%;
}
.columns .column-1,
.columns .column-2,
.columns .column-3 {
min-height:1200px;
padding:0px 12px;
}
.columns .column-1 {
width:115px;
border-right:solid 1px #CCC;
}
.columns .column-2 {
width:215px;
border-right:solid 1px #CCC;
}
.columns .column-3 {
width:115px;
border-right:solid 1px #CCC;
}
.story {
margin-top:24px;
padding-top:24px;
border-top:solid 1px #CCC;
}
.story:first-child {
margin-top:0px;
padding-top:0px;
border-top:0px none;
}
.story h2 {
font-size:15px;
margin-top:0px;
}
</style>
</body></html>