Blog UX – user experience. Psychologia w IT, marketing, testy A/B

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

Typ od psychologii i IT, czyta w ludziach by wiedzieć więcej o stronach www.

View Comments

There are currently no comments.
Next Post

Dołącz do newslettera UX

 

Serdeczie zapraszam Cię do zapisania się do mojego newslettera o tematyce: UX, marketingu oraz projektów IT. 

Nie udostępniamy adersów email innym podmiotom.