Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<meta charset="utf-8" />
<link rel="Stylesheet" type="text/css" href="style.css" >
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
</head>
​
<body>
<div id="container">
<div id="logo"> 
​
</div>
<div id="menu">
<div id="SG">
<b>Strona Główna</b>
</div>
<div id="Punktowanie">
<b><a href="Punktowanie.html" target="_blank">Punktowanie</b></a>
</div>
<div id="tabelki">
<b><a href="tabelki.html" target="_blank">Tabelki</b></a>
</div>
<div id="Ramki">
<b><a href="x" target="_blank">Ramki</b></a>
</div>
<div id="tak">
<b><a href="x" target="_blank">Tak</b></a>
</div>
</div>
<div id="menuboczne">
<div id="css3"> </div>
<div id="Punktowanie2">Punktowanie </div>
<div id="Tabelki2">Tabelki </div>
<div id="Ramki2">Ramki </div>
<div id="Tak2">Tak </div>
​
</div>
<div id="Tresc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis commodo pharetra. Etiam quis lorem ultrices, laoreet justo eu, lobortis tortor. Nunc bibendum nibh aliquet ex tincidunt feugiat. Cras a nisl eu sapien vehicula malesuada at vitae ligula. Vestibulum congue nisl ac ipsum consectetur, et mollis tellus lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus ante arcu, quis malesuada neque tempor quis. Vivamus ornare lacus a porttitor semper. Nunc vel hendrerit ligula. Morbi mauris orci, elementum id commodo et, faucibus eu eros.
​
Integer interdum tincidunt lacus vel venenatis. Quisque at rhoncus nisl, id volutpat augue. Ut dapibus urna id elit eleifend iaculis. Curabitur felis nisi, molestie nec arcu fringilla, fermentum vehicula enim. Donec facilisis porta dolor vitae feugiat. Nulla commodo ligula sit amet neque aliquet accumsan. Proin elit lacus, pellentesque vel vestibulum at, rutrum sed erat. Nullam vulputate velit tortor, sit amet semper orci pharetra nec. Fusce porta, felis sed egestas eleifend, augue metus molestie neque, eu gravida metus dolor in est. Phasellus velit urna, commodo sed justo et, scelerisque vulputate justo.
​
Mauris luctus dui at luctus lobortis. Maecenas malesuada vulputate nulla vel sollicitudin. Nullam semper iaculis dolor sed ullamcorper. Sed posuere in nibh vel tincidunt. Nunc sit amet consequat elit. Suspendisse ornare, arcu et gravida vestibulum, nisl sapien porttitor arcu, eget congue risus mauris at justo. Quisque non dictum mi. Vestibulum finibus nulla leo, vel varius purus volutpat id. Integer ultricies placerat ante, fringilla congue felis convallis quis. Donec porttitor, ipsum sed semper ullamcorper, orci augue tincidunt lectus, scelerisque congue erat enim et ante. Aenean vitae luctus lorem. Maecenas varius vestibulum maximus. Aenean sed lorem et ligula accumsan rutrum. Aenean bibendum sapien et maximus pharetra. Fusce ac tellus sit amet est finibus facilisis.
​
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis commodo pharetra. Etiam quis lorem ultrices, laoreet justo eu, lobortis tortor. Nunc bibendum nibh aliquet ex tincidunt feugiat. Cras a nisl eu sapien vehicula malesuada at vitae ligula. Vestibulum congue nisl ac ipsum consectetur, et mollis tellus lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus ante arcu, quis malesuada neque tempor quis. Vivamus ornare lacus a porttitor semper. Nunc vel hendrerit ligula. Morbi mauris orci, elementum id commodo et, faucibus eu eros.
​
Integer interdum tincidunt lacus vel venenatis. Quisque at rhoncus nisl, id volutpat augue. Ut dapibus urna id elit eleifend iaculis. Curabitur felis nisi, molestie nec arcu fringilla, fermentum vehicula enim. Donec facilisis porta dolor vitae feugiat. Nulla commodo ligula sit amet neque aliquet accumsan. Proin elit lacus, pellentesque vel vestibulum at, rutrum sed erat. Nullam vulputate velit tortor, sit amet semper orci pharetra nec. Fusce porta, felis sed egestas eleifend, augue metus molestie neque, eu gravida metus dolor in est. Phasellus velit urna, commodo sed justo et, scelerisque vulputate justo.
​
Mauris luctus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis commodo pharetra. Etiam quis lorem ultrices, laoreet justo eu, lobortis tortor. Nunc bibendum nibh aliquet ex tincidunt feugiat. Cras a nisl eu sapien vehicula malesuada at vitae ligula. Vestibulum congue nisl ac ipsum consectetur, et mollis tellus lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dapibus ante arcu, quis malesuada neque tempor quis. Vivamus ornare lacus a porttitor semper. Nunc vel hendrerit ligula. Morbi mauris orci, elementum id commodo et, faucibus eu eros.
​
Integer interdum tincidunt lacus vel venenatis. Quisque at rhoncus nisl, id volutpat augue. Ut dapibus urna id elit eleifend iaculis. Curabitur felis nisi, molestie nec arcu fringilla, fermentum vehicula enim. Donec facilisis porta dolor vitae feugiat. Nulla commodo ligula sit amet neque aliquet accumsan. Proin elit lacus, pellentesque vel vestibulum at, rutrum sed erat. Nullam vulputate velit tortor, sit amet semper orci pharetra nec. Fusce porta, felis sed egestas eleifend, augue metus molestie neque, eu gravida metus dolor in est. Phasellus velit urna, commodo sed justo et, scelerisque vulputate justo.
​
Mauris luctus
​
​
​
</div>
​
​
</div>
​
<div id="stopka">
&copy; XXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
​
</body>
​
​
​
​
</html>
 
body
{
background:linear-gradient( white, lightblue); 
margin:0 0;
​
}
#container
{
margin:auto;
margin-left:125px;
margin-right:125px;
​
}
#menu
{
margin-left:auto;
margin-right:auto;
}
​
#SG
{
background-color:#00FF00;
width:20%;
float:left;
font-size:24px;
color: black;
margin-left: 2px;
margin-top: 2px;
padding-bottom:2px;
font-family: "Permanent Marker", Georgia, Serif;
height:6%
}
#Punktowanie2
{
margin-top:39px;
border-top-style:groove;
}
#Punktowanie2:hover
{
color:lightgreen;
​
}
#Tabelki2
{
margin-top:10px;
border-top-style:groove;
}
#Tabelki2:hover
{
color:lightgreen;
}
#Ramki2
{
margin-top:10px;
border-top-style:groove;
}
#Ramki2:hover
{
color:lightgreen;
}
#Tak2
{
margin-top:10px;
border-top-style:groove;
​
}
#tak2:hover
{
color:lightgreen;
}
#Punktowanie
{
background-color:#0300FD;
width:20%;
float:left;
color:White;
border-left-style:solid;
font-size:25px;
border-left-width:2px;
margin-top: 2px;
border-left-color:black;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:black;
font-family: "Permanent Marker", Georgia, Serif;
height:6%;
}
​
#tabelki
{
background-color:#0300FD;
width:20%;
float:left;
color:White;
border-left-style:dotted;
font-size:25px;
border-left-width:2px;
margin-top: 2px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:black;
font-family: "Permanent Marker", Georgia, Serif;
height:6%;
}
#ramki
{
font-family: "Permanent Marker", Georgia, Serif;
background-color:#0300FD;
width:20%;
float:left;
color:White;
border-left-style:dotted;
font-size:25px;
border-left-width:2px;
margin-top: 2px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:black;
height:6%;
}
#tak
{
font-family: "Permanent Marker", Georgia, Serif;
background-color:#0300FD;
width:19%;
float:left;
color:White;
border-left-style:dotted;
font-size:25px;
border-left-width:2px;
margin-top: 2px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:black;
height:6%;
}
#css3
{
background:url('css3.png');
height:200px;
​
border-radius: 40px;
margin-top:10px;
width:200px;
margin-left:auto;
margin-right:auto;
}
​
​
#logo
{
float:left;
background:url('tak.png');
width:100%;
height:20%;
}
#tresc
{
width:79%;
background:linear-gradient( white,#00FFFF); 
font-size:18px;
border:solid;
border-width:1px;
border-color:black;
color:blue;
height:100%;
float:left;
margin-left:auto;
margin-right:auto;
}
​
#menuboczne
{
width:20%;
background:linear-gradient(white,#00FF00); 
float:left;
height:100%;
font-size:31px;
border-right-style:solid;
font-family: "Permanent Marker", Georgia, Serif;
​
text-align:center;
border-width:2px;
​
border-top-style:solid;
text-transform: capitalize;
margin-left:auto;
margin-right:auto;
​
}
#stopka
{
​
width:100%;
bottom:0;
color:white;
position: fixed;
clear:both;
background:#00FF00; 
border-left-style:solid;
border-color:black;
border-width:2px;
border-right-style:solid;
border-bottom-style:solid;
margin-left: 200px;
margin-right: 200px;
}
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:white;
}
​
​
​
#Punktowanie:hover
{
​
cursor:pointer;
background-color:orange;
}
#tabelki:hover
{
background-color:orange;
cursor:pointer;
}
#ramki:hover
{
background-color:orange;
cursor:pointer;
}
#tak:hover
{
cursor:pointer;
background-color:orange;
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers