Skip to content

Commit 6890347

Browse files
author
Philippe BARBOSA
committed
added python logo + hover effect on cover
1 parent a3cc7c5 commit 6890347

File tree

3 files changed

+39
-17
lines changed

3 files changed

+39
-17
lines changed

css/pythonbooks.css

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1222,24 +1222,49 @@ footer {
12221222
.booksection p.description {
12231223
height: 128px;
12241224
line-height: 16px;
1225-
12261225
overflow: hidden;
12271226
color: #505050;
12281227
}
12291228
.booksection p.level {
12301229
color: grey;
12311230
}
1231+
.booksection .view {
1232+
display: block;
1233+
position: absolute;
1234+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
1235+
filter: alpha(opacity=0);
1236+
opacity:0;
1237+
width: 140px;
1238+
height: 184px;
1239+
font: normal 14px 'Ubuntu', Helvetica, Arial, sans-serif;
1240+
line-height: 184px;
1241+
background-color: rgba(54, 109, 156,.9);
1242+
z-index: 10;
1243+
text-align: center;
1244+
color: white;
1245+
text-shadow:0 0 10px #f8d74c;
1246+
-webkit-transition:opacity .2s linear;
1247+
-moz-transition:opacity .2s linear;
1248+
-o-transition:opacity .2s linear;
1249+
transition:opacity .2s linear;
12321250

1251+
}
1252+
.booksection .view:hover {
1253+
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1000)";
1254+
filter: alpha(opacity=1000);
1255+
opacity:10;
1256+
}
12331257
h1, #headerlink {
12341258
font: normal 12px 'Ubuntu', Helvetica, Arial, sans-serif;
1235-
margin-top: -15px;
1259+
margin-top: 10px;
12361260
margin-bottom: 5px;
12371261
color: #2f2e2d;
12381262
text-shadow: 1px 0 1px rgba(255, 255, 255, 0.6);
12391263
}
12401264
#headerlink {
12411265
font-size: 12px;
12421266
color: #aaa;
1267+
text-shadow: 1px 0 1px rgba(255, 255, 255, 0.8);
12431268
}
12441269
#headerlink:hover {
12451270
text-decoration: none;
@@ -1309,6 +1334,7 @@ a#infos:hover {
13091334
}
13101335
#mod_infos h4 {
13111336
padding-bottom: 4px;
1337+
margin-bottom: 10px;
13121338
text-transform: uppercase;
13131339
color: #366d9c;
13141340
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
@@ -1392,11 +1418,11 @@ a#infos:hover {
13921418
height:65px;
13931419
}
13941420
div.pbhead h1 {
1395-
margin-top:-10px;
1396-
margin-bottom: 0px;
1421+
margin-top: 5px;
1422+
font-size: 12px;
13971423
}
13981424
div.pbhead img {
1399-
height:50px;
1425+
height:35px;
14001426
}
14011427
a.github img {
14021428
height:90px;
@@ -1410,6 +1436,12 @@ a#infos:hover {
14101436
height: 298px;
14111437
margin-bottom: 10px;
14121438
}
1439+
.booksection .view {
1440+
width: 228px;
1441+
height: 298px;
1442+
font: normal 17px Helvetica, Arial, sans-serif;
1443+
line-height: 298px;
1444+
}
14131445
.btn {
14141446
width: 190px;
14151447
}
@@ -1462,13 +1494,6 @@ a#infos:hover {
14621494
.btn {
14631495
width: 120px;
14641496
}
1465-
.booksection {
1466-
height: 170px;
1467-
}
1468-
.booksection #cover {
1469-
width: 110px;
1470-
height: 154px;
1471-
}
14721497
.booksection p.description {
14731498
height: 96px;
14741499
overflow: hidden;

img/logo_pythonbooks_.png

8.01 KB
Loading

index.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<a href="https://github.com/revolunet/PythonBooks" class="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png" alt="Fork me on GitHub"></a>
2626

2727
<div class="navbar navbar-fixed-top pbhead">
28-
<img src="./img/logo_pythonbooks.png" alt="python tutorials">
28+
<img src="./img/logo_pythonbooks_.png" alt="python tutorials">
2929
<h1>The best free Python resources</h1>
3030
<a href="http://www.revolunet.com" target="_blank" title="revolunet" id="headerlink" >by revolunet - rich web apps for desktop and mobile</a>
3131
<a href="#" id="infos">About</a>
@@ -39,7 +39,6 @@ <h1>The best free Python resources</h1>
3939
<div class="row">
4040
<div class="span6">
4141
<h4> The easiest and cheapest way to learn Python !</h4>
42-
<hr>
4342
<p>
4443
Python is a powerful programming language that lets you code efficiently and integrate various systems more effectively. Find here the best free publications to learn Python and muscle your brain !
4544
</p>
@@ -58,7 +57,6 @@ <h4> The easiest and cheapest way to learn Python !</h4>
5857
</div>
5958
<div class="span6">
6059
<h4>About us :</h4>
61-
<hr>
6260
<p>
6361
<a href="http://www.revolunet.com" target="_blank" title="revolunet">Revolunet</a> is a company specialized in web applications development. <br>
6462
Feel free to contact us by mail for further information: <br>
@@ -104,6 +102,7 @@ <h4>About us :</h4>
104102
{{#books}}
105103
<div class="span4 booksection">
106104
<a target="_blank" href="{{url}}">
105+
<div class="view"> READ </div>
107106
<div title="{{ title }}" id="cover" style="background:black url('{{cover}}') no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;">
108107
</div>
109108
<h2 title="{{ title }}">{{title}}</h2>
@@ -115,8 +114,6 @@ <h3><a href="{{authorUrl}}" target="_blank">{{author}}</a></h3>
115114
{{/books}}
116115
</script>
117116

118-
119-
120117
<script type="text/javascript">
121118
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
122119
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

0 commit comments

Comments
 (0)