Lista rankingowa szablon HTML + CSS

Oto prosty szablon HTML + CSS przedstawiający listę rankingową, do pobrania. Ten szablon może być dowolnie wykorzystywany.

Dziś mam dla Was projekt mojej listy rankingowej. Lista powstała w oparciu o prosty HTML i CSS. Może przydać się w wielu sytuacjach, idealnie nada się na listę zwycięzców w przeróżnych konkursach. To jedne z moich ładniejszych projektów. Projekt nie zawiera obrazków ale wierzę, że poradzicie sobie i podepniecie własne. Możecie ją dowolnie wykorzystywać.

lista_rankingowa

Lista rankingowa (ZIP)

P.S. Jeżeli potrzebowalibyście jakichś innych projektów to dawajcie znać, może coś dla Was napiszę.

Kod HTML (index.html)

<!doctype html>
<html lang=”en”>

<head>

<meta charset=”utf-8″>
<title>Sing up form</title>

<meta name=”description” content=”The HTML5 Herald”>

<meta name=”author” content=”SitePoint”>
<link rel=”stylesheet” href=”css/reset.css”>

<link rel=”stylesheet” href=”css/styles.css”>
<link href=’https://fonts.googleapis.com/css?family=Arimo’ rel=’stylesheet’ type=’text/css’>
</head>
<body>

<div id=”wrapper”>

<header>

<img src=”img/img-top.jpg” id=”top_big”>

<img src=”img/pool.png” id=”top”>

<h1>Swimming leaderboard</h1>

<h2>2016 Hyundai Tournament of Champions</h2>

</header>

<main>
<div class=”boxFace”>

<p id=”facePos”>1</p>

<img src=”img/1.jpg” id=”faceImage”>

</div>

<p id=”name”>Krzysztof Kowalski</p>
<div id=”progressbar”>

<div></div>

</div>

<p id=”score”>2500 p.</p>
<div class=”starRating”>

<img src=”img/star.png” id=”star”>

<p id=”points”>5.5</p>

</div>

</main>

<main>
<div class=”boxFace”>

<p id=”facePos”>2</p>

<img src=”img/2.jpg” id=”faceImage”>

</div>

<p id=”name”>Robert Rozmus</p>
<div id=”progressbar”>

<div></div>

</div>

<p id=”score”>2350 p.</p>
<div class=”starRating”>

<img src=”img/star.png” id=”star”>

<p id=”points”>5.2</p>

</div>

</main>

<main>
<div class=”boxFace”>

<p id=”facePos”>3</p>

<img src=”img/3.jpg” id=”faceImage”>

</div>

<p id=”name”>Adam Głowacki</p>
<div id=”progressbar”>

<div></div>

</div>

<p id=”score”>2120 p.</p>
<div class=”starRating”>

<img src=”img/star.png” id=”star”>

<p id=”points”>5.0</p>

</div>

</main>

<main>
<div class=”boxFace”>

<p id=”facePos”>4</p>

<img src=”img/4.jpg” id=”faceImage”>

</div>

<p id=”name”>Andrzej Myśliwski</p>
<div id=”progressbar”>

<div></div>

</div>

<p id=”score”>1980 p.</p>
<div class=”starRating”>

<img src=”img/star.png” id=”star”>

<p id=”points”>4.8</p>

</div>

</main>

<main>
<div class=”boxFace”>

<p id=”facePos”>5</p>

<img src=”img/5.jpg” id=”faceImage”>

</div>

<p id=”name”>Marian Nowak</p>
<div id=”progressbar”>

<div></div>

</div>

<p id=”score”>1450 p.</p>
<div class=”starRating”>

<img src=”img/star.png” id=”star”>

<p id=”points”>3.1</p>

</div>

</main>

</div>

<!– <p id=”footer”>All rights reserved. Unless otherwise indicated, all materials on these pages are copyrighted by the National Academy of Sciences.</p>

–>
</body>

</html>

Reset (reset.css) – resetowanie ustawień przeglądarki


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;

font-family: 'Arimo’, sans-serif;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

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;

}

Style (style.css)

body {

background: white;

margin: 10;

}

div#wrapper {

background: #F5F5F5;

margin: 0 auto;

width: 400px;

height: 100%;

border-radius: 2px;

box-shadow: 2px 2px 10px #D1D1D1;

}
header{

padding-bottom: 40px;

border-bottom-style: solid;

border-color: #EAEAEA;

border-width: 1px;

}

h1{

color:#2B2B2B;

font-size: 25px;

padding-top: 20px;

padding-bottom: 5px;

margin: 0;

text-align: center;

}
h2{

color:#2B2B2B;

font-size: 15px;

padding-top: 5px;

padding-bottom: 5px;

margin: 0;

text-align: center;

}
#top_big{

padding-top: 40px;

}
#top{

display: block;

padding-top: 15px;

margin: auto;

width: 35px;

height: 35px;

}
.boxFace{

float: left;

padding: 20px;

}

#faceImage{

width: 50px;

height: 50px;

border-style: solid;

border-color: #C2C2C2;

border-width: 1px;

border-radius: 25px;

position:absolute;

z-index: 1;

}
#facePos{

background-color: #00FF95;

border-radius: 25px;

font-size: 10px;

position: absolute;

z-index: 2;

width: 20px;

height: 15px;

color: white;

margin-left: 40px;

text-align: center;

padding-top: 5px;

}
#progressbar {

background-color: #D4D4D4;

border-radius: 8px; /* (height of inner div) / 2 + padding */

width: 200px;

margin-top: 10px;

margin-left: 95px;

float: left;
}
#progressbar > div {

background-color: orange;

width: 50%; /* Adjust with JavaScript */

height: 6px;

border-radius: 6px;

}
#name{

font-size: 15px;

margin-top: 26px;

margin-left: 55px;

float: left;

}
#score{

font-size: 10px;

margin-top: 10px;

margin-left: 262px;

float: left;

}
.starRating{

margin-left: 95px;

padding-top: 15px;
}
#star{

padding-left: 40px;

padding-top: 15px;

margin: auto;

width: 35px;

height: 35px;

}
#points{

font-size: 24px;

text-align: center;

padding-left: 210px;

}
#pointsOutOfBox{

font-size: 24px;

text-align: center;

padding-left: 210px;

margin-top: 25px;

}

main{

border-bottom-style: solid;

border-color: #EAEAEA;

border-width: 1px;

height: 105px;

}