Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <head>
- <meta charset="utf-8">
- <title>Το πιο απιστευτο-απίθανο blog του πλανήτη</title>
- <meta name="author" content="GreeceJS"/>
- <style type="text/css">
- /* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
- */
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1.3;
- background: #C1CBD7;
- font-family:Calibri;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- h1 {
- font-size:32px;
- line-height:1.2em;
- font-weight:bold;
- margin-bottom:20px;
- }
- h2 {
- font-size:20px;
- font-weight:bold;
- line-height:1.4em;
- margin-bottom:20px;
- }
- p {
- margin-bottom:20px;
- }
- a {
- color:#ff4500;
- }
- a:hover {
- text-decoration:none;
- }
- .canvas {
- width:960px;
- margin:0 auto;
- position:relative;
- }
- .header,
- .article,
- .box {
- border-radius:20px;
- background-color:white;
- box-shadow: 0 2px 4px rgba(0,0,0,0.3);
- }
- .article p:last-child {
- margin-bottom:0;
- }
- #greecejs {
- text-align:right;
- font-weight:bold;
- opacity:0.2;
- padding: 10px;
- }
- .header {
- width:940px;
- padding: 10px;
- margin-bottom:20px;
- }
- .header_inside {
- border: 4px solid #8096AD;
- border-radius:16px;
- background: #859ab1; /* Old browsers */
- background: -moz-linear-gradient(top, #859ab1 0%, #5a728d 71%, #405164 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#859ab1), color-stop(71%,#5a728d), color-stop(100%,#405164)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #859ab1 0%,#5a728d 71%,#405164 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #859ab1 0%,#5a728d 71%,#405164 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top, #859ab1 0%,#5a728d 71%,#405164 100%); /* IE10+ */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#859ab1', endColorstr='#405164',GradientType=0 ); /* IE6-9 */
- background: linear-gradient(top, #859ab1 0%,#5a728d 71%,#405164 100%); /* W3C */
- height:160px;
- position:relative;
- overflow: hidden;
- }
- .header_inside span {
- color:white;
- font-size:40px;
- position:absolute;
- line-height:1em;
- left:20px;
- }
- span.t1 {
- top:10px;
- }
- span.t2 {
- font-weight:bold;
- font-size:60px;
- top:40px;
- }
- span.t3 {
- top:98px;
- }
- .left_column {
- width:640px;
- float:left;
- }
- .right_column {
- width:300px;
- float:right;
- }
- .footer {
- clear:both;
- opacity:0.5;
- padding-bottom:20px;
- }
- .article {
- padding: 30px;
- margin-bottom:20px;
- }
- .box {
- padding: 20px;
- margin-bottom:20px;
- }
- </style>
- </head>
- <body>
- <div class="canvas">
- <div id="greecejs">GreeceJS rulez</div>
- <div class="header">
- <div class="header_inside">
- <span class="t1">Το πιό</span>
- <span class="t2">Απιστευτο-απίθανο</span>
- <span class="t3">blog του πλανήτη</span>
- </div>
- </div>
- <div class="left_column">
- <div class="article">
- <h1>Τίτλος (h1) του άρθρου</h1>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, molestie in mollis at,
- cursus sit amet diam. Fusce accumsan odio id urna ullamcorper lobortis. Sed a tortor quis sapien
- ultrices iaculis at nec leo.
- </p>
- <h2>Μια υπο-κεφαλίδα (H2)</h2>
- <p>
- Donec sapien purus, imperdiet nec adipiscing vel, vestibulum quis nisi.
- Phasellus vestibulum nisi non lorem adipiscing congue. Etiam sit amet rutrum arcu. Suspendisse nec eros
- turpis, in euismod erat. Nulla vel purus arcu, vel luctus odio. Cras dapibus cursus dui sit amet
- laoreet. Suspendisse mi augue, rhoncus nec egestas nec, convallis feugiat eros. Sed vitae orci lectus.
- Sed blandit eleifend purus, et faucibus elit ultricies id. Cras imperdiet malesuada hendrerit. Maecenas
- ornare dictum est, posuere malesuada odio vulputate sit amet. Pellentesque habitant morbi tristique
- senectus et netus et malesuada fames ac turpis egestas. <a href="#">Phasellus consequat</a> enim non neque mollis quis
- fermentum metus suscipit. Etiam id ante lorem, at euismod felis.
- </p>
- <p><a href="#">Read more »</a></p>
- </div>
- <div class="article">
- <h1>Ενα δεύτερο άρθρο</h1>
- <p>
- Ακόμα πιο σημαντικό από το προηγούμενο διότι lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, molestie in mollis at,
- cursus sit amet diam. Fusce accumsan odio id urna ullamcorper lobortis. Sed a tortor quis sapien
- ultrices iaculis at nec leo.
- </p>
- <p><a href="#">Read more »</a></p>
- </div>
- </div>
- <div class="right_column">
- <div class="box">
- <h2>Ενδιαφέροντα links</h2>
- <ul>
- <li><a href="http://www.jquery.com">jQuery website</a></li>
- <li><a href="http://docs.jquery.com/">jQuery documentation</a></li>
- <li><a href="http://jqueryui.com/">jQuery UI</a></li>
- <li><a href="http://www.ericmmartin.com/projects/simplemodal/">The best jQuery modalbox</a></li>
- <li><a href="http://jquery.malsup.com/cycle/">Cycle plugin: Awesome</a></li>
- </ul>
- </div>
- <div class="box">
- <h2>Κάποια άλλα links</h2>
- <ul>
- <li><a href="http://www.google.com">Link #1</a></li>
- <li><a href="#">Link #2</a></li>
- <li><a href="#">Link #3</a></li>
- </ul>
- </div>
- </div>
- <div class="footer">Copyright © 2011 - GreeceJS</div>
- </div>
- <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
- <!-- Offline access: <script language="javascript" src="jquery-1.6.1.min.js"></script> -->
- <script language="javascript">
- $('document').ready(function(){
- // Example #1: Chained animations with callback functions
- /*
- $('.header span').css('top','200px'); // "Κρύβουμε" όλα τα spans
- $('span.t1').animate({'top':'10px'},500,function(){
- $('span.t2').animate({'top':'40px'},500,function(){
- $('span.t3').animate({'top':'98px'},500);
- });
- });
- */
- // Example #2: Async "Logged in users"
- /*
- var response = [
- {
- "name" : "Άγγελος",
- "id" : "2435"
- },
- {
- "name" : "Ελένη",
- "id" : "2342"
- }
- ];
- var html = '<div class="box">';
- html += '<h2>Logged in users:</h2>';
- html +='<ul>';
- for(i in response) {
- html += '<li>';
- html += '<a href="/show_user?id=' + response[i].id + '">' + response[i].name + '</a>';
- html += '</li>';
- }
- html += '</ul>';
- html += '</div>';
- $(html).insertBefore('.box:first');
- */
- // Example #3: Creating elements using jQuery
- /*
- $('<div></div>')
- .addClass('box')
- .css({
- "background-color" : "#FFCC00",
- "font-size" : "40px",
- "font-weight" : "bold",
- "text-align" : "center"
- })
- .text('Καλημέρα!')
- .hide()
- .insertBefore('.box:first')
- .slideDown(500)
- */
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement