Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <base href='http://itw.woxo.cz/'> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Projekt 1</title> <meta name="robots" content="index,follow"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="author" content=""> <link href="itw1.css" rel="stylesheet" type="text/css"> </head> <body id="itw_p1_2014"> <div id="page"> <div id="head"> <h1 id="hh1"><a href="itw1.html" title="Hotel California"><span>Hotel California</span></a></h1> <h2><span>The world's most famous hotel</span></h2> <p class="hidden"><a href="#content">Přeskočit navigaci</a></p> </div> <div id="menu"> <ul class="main"> <li class="selected"><a class="anchor" href="#head">Home</a></li> <li><a class="anchor" href="#history">History</a></li> <li><a class="anchor" href="#cover">Cover Art</a></li> <li><a class="anchor" href="#interpretation">Interpretation</a></li> <li><a class="anchor" href="#personnel">Personnel</a></li> </ul> <hr> <div class="bottom"> <p><a href="http://en.wikipedia.org/wiki/Hotel_California">From Wikipedia, the free encyclopedia</a></p> </div> </div> <div id="mainimg"> <img src="images/hollywood.jpg" alt="Hollywood"> </div> <div id="content"> <div id="top"> <p> <strong>"Hotel California"</strong> is the title song from the Eagles' album of the same name and was released as a single in February 1977. It is one of the best-known songs of the album-oriented rock era. Writing credits for the song are shared by Don Felder, Don Henley, and Glenn Frey. The Eagles' original recording of the song features Henley singing the lead vocals and concludes with an extended section of electric guitar interplay between Felder and Joe Walsh. The song has been given several interpretations by fans and critics alike, but the Eagles have described it as their "interpretation of the high life in Los Angeles". In the 2013 documentary History of the Eagles, Henley said the song was about "a journey from innocence to experience...that's all". </p> </div> <div class="block odd first" id="history"> <h3>History and recognition</h3> <p>"Hotel California" topped the Billboard Hot 100 singles chart for one week in May 1977 and peaked at number ten on the Adult Contemporary charts. Three months after its release, the single was certified Gold by the Recording Industry Association of America (RIAA), representing one million copies shipped. The Eagles also won the 1977 Grammy Award for Record of the Year for "Hotel California" at the 20th Grammy Awards in 1978.</p> <p>In 2009, the song "Hotel California" was certified Platinum (Digital Sales Award) by the RIAA for sales of one million digital downloads.</p> <p>The song is rated highly in many rock music lists and polls; Rolling Stone magazine ranked it number 49 on its list of "The 500 Greatest Songs of All Time". It is also one of The Rock and Roll Hall of Fame's 500 Songs that Shaped Rock and Roll. The song's guitar solo was voted the best solo of all time by readers of Guitarist magazine in 1998 and was ranked 8th on Guitar Magazine's Top 100 Guitar Solos.</p> <p>As one of the group's most popular and well-known songs, "Hotel California" has been a concert staple for the band since its release. Performances of the song appear on the Eagles' 1980 live album, simply called Live, and in an acoustic version on the 1994 Hell Freezes Over reunion concert CD and video release. The Hell Freezes Over version is performed using eight guitars and has a decidedly Spanish feel to it, with Don Felder's flamenco-inspired arrangement and intro. During the band's Farewell 1 Tour-Live from Melbourne, the song was performed in a manner closer to the original album version, but with a trumpet interlude in the beginning.</p> </div> <div class="block" id="cover"> <h3>Cover art for single</h3> <p>The front cover art for the 45rpm release of the song was a reworked version of the Hotel California LP cover art, which used a photograph of the Beverly Hills Hotel by David Alexander, with design and art direction by Kosh.</p> </div> <div class="block odd" id="interpretation"> <h3>Interpretation</h3> <p>The lyrics weave a surrealistic tale in which a weary traveler checks into a luxury hotel. The hotel at first appears inviting and tempting, but it turns out to be a nightmarish place where "you can check out anytime you like, but you can never leave". The song is an allegory about hedonism, self-destruction, and greed in the music industry of the late 1970s. Don Henley called it "our interpretation of the high life in Los Angeles" and later reiterated: "It's basically a song about the dark underbelly of the American dream and about excess in America, which is something we knew a lot about." In 2008, Don Felder described the origins of the lyrics:</p> <blockquote><p>“ Don Henley and Glenn wrote most of the words. All of us kind of drove into L.A. at night. Nobody was from California, and if you drive into L.A. at night... you can just see this glow on the horizon of lights, and the images that start running through your head of Hollywood and all the dreams that you have, and so it was kind of about that... what we started writing the song about. Coming into L.A.... and from that 'Life in the Fast Lane' came out of it, and 'Wasted Time' and a bunch of other songs. ”</p></blockquote> <p>The term "colitas" in the first stanza means "little tails" in Spanish; in Mexican slang it refers to buds of the cannabis (marijuana) plant.</p> <div class="imgrow"> <a href="#"><img src="images/Don_Henley.jpg" alt="" height="159" width="160"></a> <a href="#"><img src="images/Glenn_Frey.jpg" alt="" height="159" width="160"></a> <a href="#"><img src="images/Joe_Walsh.jpg" alt="" height="159" width="160"></a> </div> </div> <div class="block" id="personnel"> <h3>Personnel</h3> <a href="#"> <img class="sideimg" src="images/hotel.jpg" alt="Hotel" height="212" width="283"> </a> <ul> <li>Don Henley: Lead vocals, drums, backing vocals</li> <li>Glenn Frey: 12-string acoustic guitar, backing vocals</li> <li>Don Felder: Lead guitar, 12-string electric guitar, acoustic guitar</li> <li>Joe Walsh: Lead guitar, electric guitar</li> <li>Randy Meisner: Bass guitar, backing vocals</li> </ul> </div> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/*------------------------------- Reset CSS ------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;} body{-webkit-text-size-adjust:none;} .clear:before, .clear:after {content: "\0020"; display: block; height: 0; overflow: hidden; } .clear:after {clear:both;} .clear{zoom:1;} sub, sup{font-size:75%; line-height:0; position:relative;} sup{top:-0.5em;} sub{bottom:-0.25em;} pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px;} textarea {overflow:auto;} .ie6 legend, .ie7 legend {margin-left:-7px;} input[type="radio"], input.radio {vertical-align:text-bottom;} input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom;} .ie7 input[type="checkbox"], .ie7 input.checkbox, .ie7 .checkboxes input {vertical-align:baseline;} .ie6 input {vertical-align: text-bottom;} label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;} button, input, select, textarea {margin:0;} /* .checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} */ button {width:auto; overflow:visible;} .ie7 img {-ms-interpolation-mode: bicubic;} .ir {display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr; } .hidden {display:none; visibility:hidden; } .visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;} .invisible {visibility:hidden;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none;} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration: line-through; } abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} input, select {vertical-align:middle;} a:hover, a:active {outline: none;} .content ul, .content ol {margin-left:2em;} ol {list-style-type:decimal;} ul li {list-style-type:none;} nav ul, nav li {margin:0; list-style:none; list-style-image:none;} strong, b, th {font-weight:bold;} /*------------------------------- Hlavní styly ------------------------------*/ body{ margin : 0; padding : 0; font-family : Arial, Helvetica, sans-serif; font-size : 11px; line-height : 17px; color : #ffffff; /* ===================== : COLOR : ===================== */ font-weight : 400; background-color : #e6e3dd; /* ===================== : COLOR : ===================== */ background-image : url('images/bg.jpg'); background-repeat : no-repeat; background-attachment: fixed; background-position : center bottom; background-size : 3135px auto; } a { color : #da8000; /* ===================== : COLOR : ===================== */ text-decoration : underline; } a:hover { color : #da8000; /* ===================== : COLOR : ===================== */ text-decoration : underline; } #page{ margin : 0 auto; min-width : 620px; max-width : 1000px; } #head{ position : relative; } #head:before, #head:after{content: "\0020"; display: block;} #head:after {clear:both;} #head h1{ float : left; margin-left : 50px; width : 160px; height : 166px; background-image : url('images/logo.png'); background-repeat : no-repeat; content : ""; } #head h1 a span { display : none; } #head h1 a:before { content : ''; display : block; width : 160px; height : 166px; } #head h2{ position : absolute; top : 50px; right : 0; display : block; height : 60px; background-image : url('images/h2sh.png'); background-repeat : no-repeat; background-position : 0px 17px; } #head h2 span{ display : block; padding-left : 35px; width : 410px; height : 36px; line-height : 34px; text-transform : uppercase; font-weight : bold; font-size : 18px; background-image : url('images/h2bg.png'); background-repeat : no-repeat; } #menu{ position : relative; z-index : 3; float:left; margin-left : 50px; padding-top : 30px; width : 160px; height : 227px; background : #878787; /* ===================== : COLOR : ===================== */ } #mainimg{ position : absolute; z-index : 1; } #mainimg img{ width : 100%; height : auto; } #content { float : right; position : relative; margin-right : 40px; width : 620px; font-family : Arial, Helvetica, sans-serif; color : #19191b; /* ===================== : COLOR : ===================== */ } #content #top p{ padding-top : 40%; } /*@media screen and (max-width: 720px) { #content { margin-right : 0px; margin-left : 0px; } }*/ #menu ul.main li{ height : 35px; line-height : 35px; } #menu ul.main li.selected , #menu ul.main li:hover{ background-image : url('images/menu_sh.png'); background-repeat : no-repeat; background-position : 0px 19px; } a.anchor{ display : block; margin-top : -5px; padding-left : 18px; height : 30px; line-height : 30px; font-size : 15px; color : #fff; /* ===================== : COLOR : ===================== */ text-decoration : none; font-weight : bold; } #menu ul.main li.selected a, li:hover a.anchor{ color : #000; /* ===================== : COLOR : ===================== */ background-image : url('images/menu_sel.png'); background-repeat : no-repeat; background-size : auto 30px; } li:hover a.anchor{ text-decoration : underline; } #menu hr, #menu .bottom{ margin : 0 15px; } #menu hr{ margin-top : 18px; margin-bottom : 18px; border : 0; height : 2px; background : #fff; /* ===================== : COLOR : ===================== */ } #menu .bottom p a{ color : #fff; /* ===================== : COLOR : ===================== */ font-size : 11px; text-decoration : none; } #menu .bottom p a:hover{ text-decoration : underline; } #content .imgrow img{ margin : 0 15px 0 0; width : 160px; height : auto; } #content #top, #content .block{ padding-left : 40px; padding-right : 40px; } #content #top{ padding-top : 40px; padding-bottom : 40px; background : #fff; /* ===================== : COLOR : ===================== */ } #content .block{ overflow : hidden; padding-top : 40px; padding-bottom : 40px; } #content .block:nth-child(even){ background-color : #d9d9d9; /* ===================== : COLOR : ===================== */ background-image : url('images/c_lt.png'); background-repeat : no-repeat; background-position : left top; } #content .block:nth-child(odd){ background-color : #ecebeb; /* ===================== : COLOR : ===================== */ background-image : url('images/c_dt.png'); background-repeat : no-repeat; background-position : left top; } #content .block.first{ background-image : url('images/c_wt.png'); } /*------------------------------- Typography ------------------------------*/ /* HEADERS */ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-family : Tahoma, Geneva, sans-serif; font-weight : normal; color : #333b40; /* ===================== : COLOR : ===================== */ } #content h1 { margin : 0 0 25px 0; padding-bottom : 5px; line-height : 45px; font-size : 36px; border-bottom : 1px solid #e5e5e5; /* ===================== : COLOR : ===================== */ } #content h2 { font-size: 16px; line-height: 23px; margin-top: 12px; margin-bottom: 12px; font-weight: bold; } #content h3 { font-size: 17px; line-height: 23px; margin-top: 8px; margin-bottom: 13px; font-weight: bold; } #content h4 { font-size: 16px; line-height: 23px; margin-top: 8px; margin-bottom: 12px; font-weight: bold; } #content h5 { font-size: 15px; line-height: 18px; margin-top: 8px; margin-bottom: 12px; font-weight: bold; } #content h6 { font-size: 14px; line-height: 18px; margin-top: 8px; margin-bottom: 12px; font-weight: bold; } /* PARAGRAGHS */ #content p { font-size: 13px; line-height: 20px; margin: 0 0 12px; } #content .intro { margin-bottom : 20px; line-height : 32px; font-size : 22px; font-family : Arial, Helvetica, sans-serif; } #content em { font-style : italic; } ::selection, ::-moz-selection { /* Applies style to highlighted portion of a page */ background : #888; /* ===================== : COLOR : ===================== */ color : #fff; /* ===================== : COLOR : ===================== */ text-shadow : none; } /* LINKS */ #content a, #content a.intro { color : #da8000; /* ===================== : COLOR : ===================== */ text-decoration : underline; } #content a:hover { color : #da8000; /* ===================== : COLOR : ===================== */ text-decoration : underline; } #content a:focus { } /* LIST STYLES -------------------------------------------- */ #content ul, #content ol, #content dl { margin: 0 0 20px 0; } #content ul li { font-size: 13px; line-height: 18px; } #content ol li { font-size: 13px; line-height: 18px; } /* #content ul li { list-style-type: disc; font-size: 13px; line-height: 18px; } */ /* #content ol li { list-style-type: decimal; font-size: 13px; line-height: 18px; } */ /* lepší řešení pomocí background:(../images/odrazka.png) no-repeat left center; padding-left: 20px; */ #content li { margin-bottom: 5px; } /* TABLE STYLES -------------------------------------------- */ #content table { border-collapse : collapse; /* borders are collapsed into a single border when possible */ border : none; } #content table.TabulkaFormat { border-collapse : collapse; /* borders are collapsed into a single border when possible */ border : 1px solid #d4d4d4; /* ===================== : COLOR : ===================== */ border-spacing : 0; /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */ margin : 0 0 10px; text-align : left; } #content table.TabulkaFormat tr:nth-child(even) { background-color: #ededed /* ===================== : COLOR : ===================== */ } #content table.TabulkaFormat tr:nth-child(odd) { background-color: #ffffff /* ===================== : COLOR : ===================== */ } #content table.TabulkaFormat tr.even, #content table.TabulkaFormat th, #content thead.TabulkaFormat td { background-color: #ededed /* ===================== : COLOR : ===================== */ } #content table.TabulkaFormat td, #content table.TabulkaFormat th { padding : 5px 5px; border : 1px solid #d4d4d4; /* ===================== : COLOR : ===================== */ vertical-align : middle; } #content table.TabulkaFormat th { font-size : 16px; padding : 6px 6px 4px; font-weight : bold; } /* ALIGNMENT -------------------------------------------- */ #content .left { text-align : left; } #content .center { text-align : center; } #content .right { text-align : right; } /* IMAGES -------------------------------------------- */ #content img { position : relative; padding-bottom : 8px; height : auto; background-repeat : no-repeat; background-position : 50% bottom; background-image : url('images/imagesh.png'); /* background : transparent url(../images/ajax-loader.gif) no-repeat center center; */ } #content img.border { border : 3px solid #d7d7d7; /* ===================== : COLOR : ===================== */ margin : 4px; } #content img.left { float : left; } #content img.right, #content img.sideimg { float : right; margin-left : 15px; } #content img.leftAlone { float : left; clear : both; margin-right : 100%; margin-bottom : 10px; } #content img.center { float : none; clear : both; display : block; margin-left : auto; margin-right : auto; margin-bottom : 10px; } /* BLOCKQUOTES -------------------------------------------- */ #content blockquote { clear : both; margin : 0 0 20px; margin-left : 5%; width : 90%; font-family : Tahoma, Geneva, sans-serif; color : #666; /* ===================== : COLOR : ===================== */ display : block; font-style : italic; text-indent : 30px; background : transparent url('images/blockquote.png') no-repeat 0px 6px; } #content blockquote p { font-size : 17px; line-height : 25px; } #content pre { clear : both; margin : 0 0 20px 0; padding : 15px; font-family : Courier, monospace; border : 1px solid #E4E4E4; /* ===================== : COLOR : ===================== */ background : #F7F7F7; /* ===================== : COLOR : ===================== */ } address { display : block; margin-bottom : 20px; } #content .dolni_index, #content sub { vertical-align : sub; } #content .horni_index, #content sup { vertical-align : super; } #content .red { color : #ff2424; /* ===================== : COLOR : ===================== */ } #content .green { color : #1bd71b; /* ===================== : COLOR : ===================== */ } #content .smalltext, #content small { line-height : 20px; font-size : 11px; } #content .bigtext, #content big { line-height : 20px; font-size : 17px; } #content .note { color : #888888; /* ===================== : COLOR : ===================== */ font-style : italic; } #content strong { font-weight : bold; } #content em { font-style : italic; } #content dl { margin : 10px; } #content dt { font-weight : bold; color : #63757F; /* ===================== : COLOR : ===================== */ } #content dt:after { content : ":"; } #content dd { margin : 0px 0px 0px 20px; padding : 3px 0px 6px 0px; font-style : italic; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>