Skip to content

Commit 5f3b8f1

Browse files
PapillardPapillard
committed
new challenges
1 parent 6fea67f commit 5f3b8f1

File tree

8 files changed

+246
-0
lines changed

8 files changed

+246
-0
lines changed

‎08-nice-banner/banner.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.banner {
2+
background-size: cover;
3+
color: white;
4+
padding: 100px;
5+
position: relative;
6+
z-index: 0;
7+
}
8+
.banner-shadow {
9+
background-image: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%);
10+
position: absolute;
11+
top: 0;
12+
bottom: 0;
13+
left: 0;
14+
right: 0;
15+
z-index: 1;
16+
}
17+
.banner-content {
18+
position: relative;
19+
z-index: 2;
20+
}
21+
.banner h1 {
22+
font-weight: bold;
23+
}
24+
.banner p {
25+
font-size: 18px;
26+
color: rgba(255,255,255,0.8);
27+
}

‎08-nice-banner/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Product page</title>
5+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:300,400,500,700">
6+
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
12+
<div class="banner text-center" style="background-image: url('https://unsplash.it/1000/400?image=0')">
13+
<div class="banner-shadow"></div>
14+
<div class="banner-content">
15+
<h1>Some Stuff</h1>
16+
<p>Very cool stuff, useful and smart</p>
17+
</div>
18+
</div>
19+
20+
</body>
21+
</html>

‎08-nice-banner/style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import url("banner.css");
2+
3+
body {
4+
margin: 0;
5+
font-family: Open-sans, sans-serif;
6+
}
7+
h1, h2, h3 {
8+
font-family: Raleway, Helvetica, sans-serif;
9+
}
10+
.text-center {
11+
text-align: center;
12+
}

‎09-card-design/avatar.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.avatar {
2+
width: 30px;
3+
border-radius: 50%;
4+
}
5+
.avatar-bordered {
6+
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
7+
border: white 1px solid;
8+
}
9+
.avatar-large {
10+
width: 50px;
11+
}

‎09-card-design/banner.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.banner {
2+
background-size: cover;
3+
color: white;
4+
padding: 100px;
5+
position: relative;
6+
z-index: 0;
7+
}
8+
.banner-shadow {
9+
background-image: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%);
10+
position: absolute;
11+
top: 0;
12+
bottom: 0;
13+
left: 0;
14+
right: 0;
15+
z-index: 1;
16+
}
17+
.banner-content {
18+
position: relative;
19+
z-index: 2;
20+
}
21+
.banner h1 {
22+
font-weight: bold;
23+
}
24+
.banner p {
25+
font-size: 18px;
26+
color: rgba(255,255,255,0.8);
27+
}

‎09-card-design/card.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.card {
2+
position: relative;
3+
height: 175px;
4+
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
5+
color: white;
6+
margin: 20px auto;
7+
}
8+
.card-bg{
9+
background-size: cover;
10+
border-radius: 3px;
11+
position: absolute;
12+
top: 0;
13+
bottom: 0;
14+
width: 100%;
15+
}
16+
.card-shadow {
17+
background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 80%);
18+
position: absolute;
19+
top: 0;
20+
bottom: 0;
21+
width: 100%;
22+
}
23+
.card-description {
24+
font-size: 10px;
25+
text-transform: uppercase;
26+
position: absolute;
27+
top: 10px;
28+
left: 10px;
29+
}
30+
.card-text {
31+
position: absolute;
32+
bottom: 10px;
33+
left: 10px;
34+
}
35+
.card-text h2 {
36+
font-size: 24px;
37+
}
38+
.card-text p {
39+
font-size: 13px;
40+
}
41+
.card-user {
42+
position: absolute;
43+
right: 10px;
44+
top: 10px;
45+
}
46+
.card-link {
47+
position: absolute;
48+
top: 0;
49+
bottom: 0;
50+
width: 100%;
51+
z-index:2;
52+
background: black;
53+
opacity: 0;
54+
}
55+
.card-link:hover{
56+
opacity: 0.1;
57+
}
58+
59+
.cards {
60+
display: flex;
61+
display: -webkit-flex;
62+
display: -moz-flex;
63+
}
64+
.cards .card{
65+
flex: 1 1 0;
66+
-webkit-flex: 1 1 0;
67+
-moz-flex: 1 1 0;
68+
margin: 20px;
69+
}

‎09-card-design/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Product page</title>
5+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:300,400,500,700">
6+
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body>
11+
12+
<div class="banner text-center" style="background-image: url('https://unsplash.it/1000/400?image=0')">
13+
<div class="banner-shadow"></div>
14+
<div class="banner-content">
15+
<h1>Startup tools</h1>
16+
<p>Very cool stuff, useful and smart</p>
17+
</div>
18+
</div>
19+
20+
<h2 class="text-center">Most popular</h2>
21+
22+
<div class="cards">
23+
<div class="card">
24+
<span class="card-bg" style="background-image: url('https://unsplash.it/500/200?image=0')"></span>
25+
<span class="card-shadow"></span>
26+
<span class="card-description">Popular</span>
27+
<span class="card-text">
28+
<h2>Trello</h2>
29+
<p>Very cool stuff, useful and smart</p>
30+
</span>
31+
<span class="card-user">
32+
<img src='http://placehold.it/40x40' class="avatar avatar-bordered"/>
33+
</span>
34+
<a href="#" class="card-link"></a>
35+
</div>
36+
<div class="card">
37+
<span class="card-bg" style="background-image: url('https://unsplash.it/500/200?image=1')"></span>
38+
<span class="card-shadow"></span>
39+
<span class="card-description">Popular</span>
40+
<span class="card-text">
41+
<h2>Github</h2>
42+
<p>Very cool stuff, useful and smart</p>
43+
</span>
44+
<span class="card-user">
45+
<img src='http://placehold.it/40x40' class="avatar avatar-bordered"/>
46+
</span>
47+
<a href="#" class="card-link"></a>
48+
</div>
49+
<div class="card">
50+
<span class="card-bg" style="background-image: url('https://unsplash.it/500/200?image=2')"></span>
51+
<span class="card-shadow"></span>
52+
<span class="card-description">Popular</span>
53+
<span class="card-text">
54+
<h2>Heroku</h2>
55+
<p>Very cool stuff, useful and smart</p>
56+
</span>
57+
<span class="card-user">
58+
<img src='http://placehold.it/40x40' class="avatar avatar-bordered"/>
59+
</span>
60+
<a href="#" class="card-link"></a>
61+
</div>
62+
</div>
63+
64+
</body>
65+
</html>

‎09-card-design/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import url("banner.css");
2+
@import url("card.css");
3+
@import url("avatar.css");
4+
5+
body {
6+
margin: 0;
7+
font-family: Open-sans, sans-serif;
8+
}
9+
h1, h2, h3 {
10+
font-family: Raleway, Helvetica, sans-serif;
11+
}
12+
.text-center {
13+
text-align: center;
14+
}

0 commit comments

Comments
 (0)