Skip to content

Commit 35c68e9

Browse files
pdunleavpdunleav
committedJan 31, 2019
revert old box model page for running batches with old front end
1 parent 18ee4e2 commit 35c68e9

File tree

3 files changed

+207
-0
lines changed

3 files changed

+207
-0
lines changed
 

‎03-box-model/README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
## Background & Objectives
2+
3+
Play with the box model (`margin/border/padding/width/height`) by splitting your profile informations into different `<div>`.
4+
5+
6+
## Specs
7+
8+
Here is [your objective](https://lewagon.github.io/html-css-challenges/03-box-model/).
9+
10+
- You should start with the following structure for your page
11+
12+
```html
13+
<div id="container">
14+
<div class="card"></div>
15+
<div class="card"></div>
16+
<div class="card"></div>
17+
<div class="card"></div>
18+
</div>
19+
```
20+
21+
- The `<div id="container">` is here to center its content so that you don't have a full-screen page (which is very ugly).
22+
- The `<div class="card"></div>` are here to display nicely each group of infos that fit together.
23+
- Add a nice touch to these divs thanks to `background`, `border`, `border-radius` and `box-shadow` CSS properties.
24+
25+
26+
## Tips & Resources
27+
28+
Here is the div centering technique for the main container
29+
30+
```css
31+
div{
32+
width: 500px;
33+
margin: 0 auto; /* you can change 0 if your want top-bottom margin */
34+
}
35+
```

‎03-box-model/index.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
<title>Basic infos</title>
5+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Montserrat:400,700" rel="stylesheet">
6+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
12+
<div class="container">
13+
<div class="card text-center">
14+
<img src="../shared/images/boris.jpg" alt="Boris Paillard" width="100">
15+
<h1>Boris Paillard</h1>
16+
<h2>CEO @Le Wagon</h2>
17+
18+
<p>
19+
After 3 years in financial markets, I got bored and launched Le Wagon. Our mission: <strong>bring technical skills to creative people</strong>.
20+
</p>
21+
22+
<a href="https://lewagon.com">See for yourself</a>
23+
</div>
24+
25+
<div class="card text-center">
26+
<ul>
27+
<li>
28+
<a href="https://www.facebook.com/boris.paillard">
29+
<i class="fa fa-facebook"></i> Facebook
30+
</a>
31+
</li>
32+
<li>
33+
<a href="https://www.linkedin.com/in/boris-paillard-86722670">
34+
<i class="fa fa-linkedin"></i> Linkedin
35+
</a>
36+
</li>
37+
<li>
38+
<a href="https://twitter.com/bpapillard">
39+
<i class="fa fa-twitter"></i> Twitter
40+
</a>
41+
</li>
42+
</ul>
43+
</div>
44+
45+
<div class="card text-center">
46+
<h2>My Favorite movies</h2>
47+
<table>
48+
<tbody>
49+
<tr>
50+
<td>
51+
<img src="../shared/images/space-odyssey.jpg" alt="space odyssey">
52+
</td>
53+
<td>
54+
<h3>2001 - Space Odyssey</h3>
55+
<p>Humanity finds a mysterious, obviously artificial, object buried beneath the Lunar surface and, with the intelligent computer H.A.L. 9000, sets off on a quest.</p>
56+
</td>
57+
</tr>
58+
<tr>
59+
<td>
60+
<img src="../shared/images/monsieur-hulot.jpg" alt="monsieur hulot">
61+
</td>
62+
<td>
63+
<h3>Monsieur Hulot</h3>
64+
<p>Monsieur Hulot comes to a beachside hotel for a vacation, where he accidentally (but good-naturedly) causes havoc.</p>
65+
</td>
66+
</tr>
67+
<tr>
68+
<td>
69+
<img src="../shared/images/alien.jpg" alt="alien">
70+
</td>
71+
<td>
72+
<h3>Alien</h3>
73+
<p>The commercial vessel Nostromo receives a distress call from an unexplored planet. After searching for survivors, the crew heads home only to realize that a deadly bioform has joined them.</p>
74+
</td>
75+
</tr>
76+
</tbody>
77+
</table>
78+
</div>
79+
80+
<div class="card text-center">
81+
<h2>About this page</h2>
82+
This page has been coded during the <a href="https://lewagon.com/program" target="_blank">FullStack program @LeWagon</a>. That was probably the best experience of my entire life.
83+
<ul>
84+
<li>
85+
<a href="#">
86+
<i class="fa fa-heart"></i>
87+
</a>
88+
</li>
89+
<li>
90+
<a href="#">
91+
<i class="fa fa-share"></i>
92+
</a>
93+
</li>
94+
<li>
95+
<a href="#">
96+
<i class="fa fa-star"></i>
97+
</a>
98+
</li>
99+
</ul>
100+
</div>
101+
</div>
102+
103+
</body>
104+
</html>

‎03-box-model/style.css

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* Colors and Fonts */
2+
3+
body{
4+
background: #EBEBEB;
5+
font-family: 'Open Sans', sans-serif;
6+
font-weight: 300;
7+
color: #7d7d7d;
8+
font-size: 15px;
9+
line-height: 1.6em;
10+
}
11+
12+
h1, h2, h3{
13+
font-family: 'Montserrat', sans-serif;
14+
}
15+
16+
h1{
17+
color: #DD5555;
18+
font-size: 22px;
19+
}
20+
21+
h2{
22+
font-size: 18px;
23+
font-weight: 300;
24+
}
25+
26+
h3{
27+
font-size: 16px;
28+
font-weight: 300;
29+
}
30+
31+
p{
32+
text-align: justify;
33+
}
34+
35+
a{
36+
color: #ccc;
37+
text-decoration: none;
38+
}
39+
40+
a:hover{
41+
color: #DD5555;
42+
text-decoration: none;
43+
}
44+
45+
table{
46+
font-weight: 300;
47+
font-size: 15px;
48+
line-height: 1.6em;
49+
}
50+
51+
/* First simple components */
52+
53+
.text-center {
54+
text-align: center;
55+
}
56+
57+
.container{
58+
width: 500px;
59+
margin: 30px auto;
60+
}
61+
62+
.card{
63+
background: white;
64+
padding: 20px;
65+
margin-bottom: 20px;
66+
border-radius: 4px;
67+
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
68+
}

0 commit comments

Comments
 (0)