HTML coding page
Page 1 of 1 • Share
- LGforumModerator
- Forum Posts : 77
Member Since : 2011-11-12
Lol why?
Nvm, heres the code:
i want the links fixed
- Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Slideshow</title>
<style>
html { overflow-y: scroll }
body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #000000 }
h1, dd { margin: 0 }
dt { font-weight: bold }
figure { display: block; width: 100%; height: 100%; margin: 0 }
figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.options h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
.options p { width: 48%; float: left; margin: 5px 0 }
p.heading, p.reset, .output { width: 100%; float: left; clear: left }
.output { position: relative }
.output h2 a { content: ''; position: absolute; top: 30px; right: 0; font-size: 14px; font-weight: normal; color: #333; text-decoration: none }
.output h2 a:hover { text-decoration: underline }
label { display: inline-block; width: 160px }
select { width: 160px; margin-right: 20px }
input[type='text'] { width: 40px }
textarea { width: 50%; height: 100px; font-family: monospace }
section { height: 100%; width: 100%; background: white; overflow-y: scroll }
@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.1
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
/****************************************** Basic */
.basic .slide > h2 { background: #333; color: white; line-height: 225% }
/****************************************** Dark */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.dark .slide > h2 span { background: #353535; color: white }
.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.dark .slide > h2.selected span, .dark .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.dark .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.dark .slide > div { background: #030303; margin-left: 5px }
/***************************************** Light */
.light {
border: 9px solid white;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #a0a0a0;
-webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.light .slide > h2 span {
background: #fcfcfc;
background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
-webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
color: #909090;
}
.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.light .slide > h2.selected span, .light .slide h2.selected span:hover, .light .slide > h2.selected b { background: #ffffff }
.light .slide > div { background: #a0a0a0; margin-left: 5px }
/**************************************** Stitch */
.stitch {
position: relative;
padding: 5px 0 5px 5px;
border: 11px solid #353535;
background: #353535;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stitch:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: -9px;
left: -9px;
background: #353535;
border-width: 9px;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2 { background: #353535 }
.stitch .slide > h2 span {
height: auto;
padding-right: 5%;
color: white;
text-shadow: -1px 1px 0 #5b5b5b;
border-width: 9px;
background-image: url('bg_noise.png');
margin-top: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2.selected:after {
content: '';
display: block;
height: 11px;
width: 11px;
position: absolute;
bottom: -3px;
right: 38px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
border-width: 9px;
border-top: 0;
border-left: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
background-image: url('bg_noise.png');
}
.stitch .slide:nth-child(1) > h2 span, .stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
.stitch .slide:nth-child(2) > h2 span, .stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
.stitch .slide:nth-child(3) > h2 span, .stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
.stitch .slide:nth-child(4) > h2 span, .stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
.stitch .slide:nth-child(5) > h2 span, .stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
.stitch .slide > div { margin-right: 6px }
.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.dark .slide > h2 b, .ie.light .slide > h2 b { top: 44% }
.ie9.dark .slide > h2.selected span, .ie9.dark .slide > h2.selected span:hover, .light .slide > h2 span { filter: none }
.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }
.ie.stitch .slide > h2 { line-height: 265% }
.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.ie.stitch .slide > h2 b { top: 33% }
.ie.stitch .slide > h2.selected:after { display: none }
.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
</head>
<body>
<div id="demo">
<ol>
<li name="one">
<h2><span>Slide One</span></h2>
<div>
<figure>
<img src="http://i1073.photobucket.com/albums/w389/PorkyPineV5195/AssasinsCreed.png" alt="image" />
<figcaption>GFx</figcaption>
</figure>
</div>
</li>
<li name="Two">
<h2><span>Slide Two</span></h2>
<div>
<figure>
<img src="http://i1073.photobucket.com/albums/w389/PorkyPineV5195/TE.png" alt="image" />
<figcaption>GFx</figcaption>
</figure>
</div>
</li>
<li name="three">
<h2><span>Slide Three</span></h2>
<div>
<figure>
<img src="http://i42.tinypic.com/70cbyd.png" alt="image" />
<figcaption>GFx</figcaption>
</figure>
</div>
</li>
<li name="four">
<h2><span>Slide Four</span></h2>
<div>
<figure>
<img src="http://i40.tinypic.com/205oxav.png" alt="image" />
<figcaption>GFx</figcaption>
</figure>
</div>
</li>
<li name="five">
<h2><span>Slide Five</span></h2>
<div>
<figure>
<img src="http://i42.tinypic.com/33dxegi.png" alt="image" />
<figcaption>GFx</figcaption>
</figure>
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/demosuite.js"></script>
</body>
</html>
<figcaption>Oops, It Appears You Are Not Logged In Or ?Have Not Yet Registered. Please Do So To Unlock The Full Potential Of This Site.</figcaption>
</figure>
</div>
</li>
<div></div>
<div></div>
To Log In Please Click Here:
<adiv></adiv>
http://gfx-creators.forumotion.com/login
<div></div>
<div></div>
To Register Please Click Here:
<adiv></adiv>
http://gfx-creators.forumotion.com/register
i want the links fixed
- Vanilla990Administrator
- Forum Posts : 114
Member Since : 2011-10-30
Is that code missing a bit at the bottom because there's no