Blog UX – User Experience. Narzędzia, badania, warsztaty, książki.

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;
}

Obecnie realizuję projekty UX/UCD dla Ministerstwa Finansów, w ramach spółki celowej Aplikacje Krytyczne Sp. z o.o.

View Comments

There are currently no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next Post