Skip to content

Commit 1bc53ce

Browse files
pdunleavpdunleav
authoredJan 31, 2019
Merge pull request #5 from lewagon/frontend-new-examples
[WIP] - Frontend new examples
2 parents 45494e1 + 35c68e9 commit 1bc53ce

File tree

24 files changed

+742
-1
lines changed

24 files changed

+742
-1
lines changed
 

‎.DS_Store

6 KB
Binary file not shown.

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎01-profile-content-new/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
## Background & Objectives
2+
3+
A simple challenge to manipulate basic HTML tags and create a profile page with headers/texts/lists/images/tables.
4+
5+
## Specs
6+
7+
Build a simple HTML page with the following elements (use the right HTML tags):
8+
9+
- an image of yourself
10+
- a header and sub-header with your name and position
11+
- a description of yourself
12+
- a list of your social links
13+
14+
A picture is worth a thousand words, [here is what you should build in this challenge](https://lewagon.github.io/html-css-challenges/01-profile-content-new/)
15+
16+
## Tips & Resources
17+
18+
- You can use [Font Awesome](http://fontawesome.io/) to find nice icons (e.g. for social networks). It is a very convenient library since it is a **font** of icons (hence it will be very easy to resize these icons, change their color, and add animations on them!)
19+
- Don't forget the page `<title>` in the `<head>` section, and other important metatags like `<meta charset="utf-8">`.
20+
- You could use the `_target="blank"` attribute on your links to make them open on new tabs.

‎01-profile-content-new/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My profile</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
10+
<h1>Hello, I'm Boris 😎</h1>
11+
<img src="../shared/images/profile.png" width="100px" alt="Boris Paillard">
12+
<p>
13+
I love Github, UX/UI Design, web-development and motorbikes 🏍️. I launched Le Wagon to teach code to entrepreneurs and creative people around the world 🌍.
14+
</p>
15+
<a href="#">Discover Le Wagon</a>
16+
<h2>Follow me</h2>
17+
<ul>
18+
<li>
19+
<a href="https://github.com/papillard" target="_blank">
20+
<i class="fab fa-github-square"></i>
21+
</a>
22+
</li>
23+
<li>
24+
<a href="https://twitter.com/bpapillard" target="_blank">
25+
<i class="fab fa-twitter-square"></i>
26+
</a>
27+
</li>
28+
<li>
29+
<a href="https://medium.com/@papillard" target="_blank">
30+
<i class="fab fa-medium"></i>
31+
</a>
32+
</li>
33+
</ul>
34+
35+
</body>
36+
</html>

‎02-fonts-colors-new/README.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## Background & Objectives
2+
3+
Add simple CSS rules to design fonts and colors of your profile page.
4+
5+
## Specs
6+
7+
[This is an example](https://lewagon.github.io/html-css-challenges/02-fonts-colors-new/) of what you should reproduce. Here is a list of CSS rules to write:
8+
9+
10+
### Body
11+
- Pick a nice background color, font family/color/size and line-height for the `<body>`. Setting font properties at the body-level will apply it on all basic texts (`<p>`, `<li>`, etc...).
12+
13+
### Headers
14+
- Choose a nice color and font-family for headers (`<h1>`, `<h2>`, `<h3>`)
15+
- Choose harmonious `font-size` and `line-height` for headers
16+
- Resize image `width`
17+
18+
### Links
19+
- Change links colors & text decoration
20+
- Add some hover effects on links using the pseudo-class `a:hover`.
21+
22+
## Tips & Resources
23+
24+
- Use Colorzilla plugin to pick nice colors from other websites. You can find inspiration [here](http://www.flatuicolorpicker.com/).
25+
- Pick your fonts on [google fonts](https://www.google.com/fonts)
26+
- On Google fonts, **Open Sans** is the standard choice for core texts. **Varela** & **Montserrat** are elegant candidates for headers.

‎02-fonts-colors-new/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My profile</title>
5+
<meta charset="utf-8">
6+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Roboto:300,400,500,700,900" rel="stylesheet">
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
12+
<h1>Hello, I'm Boris 😎</h1>
13+
<img src="../shared/images/profile.png" width="100px" alt="Boris Paillard">
14+
<p>
15+
I love Github, UX/UI Design, web-development and motorbikes 🏍️. I launched Le Wagon to teach code to entrepreneurs and creative people around the world 🌍.
16+
</p>
17+
<a href="#">Discover Le Wagon</a>
18+
<h2>Follow me</h2>
19+
<ul>
20+
<li>
21+
<a href="https://github.com/papillard" target="_blank">
22+
<i class="fab fa-github-square"></i>
23+
</a>
24+
</li>
25+
<li>
26+
<a href="https://twitter.com/bpapillard" target="_blank">
27+
<i class="fab fa-twitter-square"></i>
28+
</a>
29+
</li>
30+
<li>
31+
<a href="https://medium.com/@papillard" target="_blank">
32+
<i class="fab fa-medium"></i>
33+
</a>
34+
</li>
35+
</ul>
36+
37+
</body>
38+
</html>

‎02-fonts-colors-new/style.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* Colors and fonts */
2+
body {
3+
background: #F7F9FC;
4+
color: #575F7D;
5+
font-family: 'Lora', serif;
6+
font-size: 17px;
7+
font-weight: lighter;
8+
}
9+
h1, h2, h3 {
10+
font-family: 'Roboto', sans-serif;
11+
}
12+
h1 {
13+
color: #575F7D;
14+
font-size: 32px;
15+
font-weight: 900;
16+
}
17+
h2 {
18+
color: #7ECE90;
19+
font-size: 20px;
20+
font-weight: lighter;
21+
font-weight: 500;
22+
}
23+
a {
24+
font-family: 'Roboto', sans-serif;
25+
text-decoration: none;
26+
color: #6B72E1;
27+
font-weight: 600;
28+
font-size: 16px;
29+
}
30+
a:hover {
31+
color: black;
32+
}

‎03-box-model-and-selectors/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-and-selectors/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>My profile</title>
6+
<meta charset="utf-8">
7+
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Roboto:300,400,500,700,900" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
<div class="card-white" id="introduction">
15+
<h1>Hello, I'm Boris 😎</h1>
16+
<img src="images/profile.png" class="img-circle" width="100px" alt="Boris Paillard">
17+
<p>
18+
I love Github, UX/UI Design, web-development and motorbikes 🏍️. I launched Le Wagon to teach code to entrepreneurs and creative people around the world 🌍.
19+
</p>
20+
<a href="#" class="btn-blue">Discover Le Wagon</a>
21+
</div>
22+
<div class="card-white">
23+
<h2>Follow me</h2>
24+
<ul class="list-inline">
25+
<li>
26+
<a href="https://github.com/papillard" target="_blank">
27+
<i class="fab fa-github-square"></i>
28+
</a>
29+
</li>
30+
<li>
31+
<a href="https://twitter.com/bpapillard" target="_blank">
32+
<i class="fab fa-twitter-square"></i>
33+
</a>
34+
</li>
35+
<li>
36+
<a href="https://medium.com/@papillard" target="_blank">
37+
<i class="fab fa-medium"></i>
38+
</a>
39+
</li>
40+
</ul>
41+
</div>
42+
</div>
43+
44+
</body>
45+
</html>

‎03-box-model-and-selectors/style.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/* Colors and fonts */
2+
body {
3+
background: #F7F9FC;
4+
color: #575F7D;
5+
font-family: 'Lora', serif;
6+
font-size: 17px;
7+
font-weight: lighter;
8+
}
9+
h1, h2, h3 {
10+
font-family: 'Roboto', sans-serif;
11+
}
12+
h1 {
13+
color: #575F7D;
14+
font-size: 32px;
15+
font-weight: 900;
16+
}
17+
h2 {
18+
color: #7ECE90;
19+
font-size: 20px;
20+
font-weight: lighter;
21+
font-weight: 500;
22+
}
23+
a {
24+
font-family: 'Roboto', sans-serif;
25+
text-decoration: none;
26+
color: #6B72E1;
27+
font-weight: 600;
28+
font-size: 16px;
29+
}
30+
a:hover {
31+
color: black;
32+
}
33+
34+
35+
/* Custom design with class (99% of your design) */
36+
.container {
37+
width: 700px;
38+
margin: 40px auto;
39+
}
40+
41+
@media (max-width: 960px) {
42+
/* For a screen < 960px, this CSS will be read */
43+
.container {
44+
width: 700px;
45+
}
46+
}
47+
@media (max-width: 720px) {
48+
/* For a screen < 720px, this CSS will be read */
49+
.container {
50+
width: 500px;
51+
}
52+
}
53+
@media (max-width: 540px) {
54+
/* For a screen < 540px, this CSS will be read */
55+
.container {
56+
width: 300px;
57+
}
58+
}
59+
60+
61+
.card-white {
62+
background-color: white;
63+
padding: 40px;
64+
box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
65+
border-radius: 4px;
66+
margin: 20px 0px;
67+
text-align: center;
68+
}
69+
.img-circle {
70+
border-radius: 50%;
71+
}
72+
.btn-blue {
73+
background-color: #6B72E1;
74+
color: white;
75+
padding: 15px 20px;
76+
border-radius: 4px;
77+
}
78+
.btn-blue:hover {
79+
background-color: black;
80+
color: white;
81+
}
82+
.list-inline {
83+
list-style: none;
84+
padding-left: 0px;
85+
}
86+
87+
.list-inline li {
88+
display: inline;
89+
padding: 10px;
90+
}
91+
.list-inline i {
92+
font-size: 50px;
93+
color: rgb(230, 230, 230);
94+
}
95+
.list-inline i:hover {
96+
color: black;
97+
}
98+
99+
/* Design adjustments using id (1% design remaining) */
100+
#introduction p {
101+
margin-bottom: 40px;
102+
}

‎03-box-model/style.css

-1
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,3 @@ table{
6666
border-radius: 4px;
6767
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
6868
}
69-

‎13-activity-feed/.DS_Store

6 KB
Binary file not shown.

‎13-activity-feed/css/components/avatar.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.avatar {
2+
width: 40px;
3+
border-radius: 50%;
4+
}
5+
.avatar-large {
6+
width: 56px;
7+
border-radius: 50%;
8+
}/* Your avatar CSS code here */

‎13-activity-feed/css/components/navbar.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.navbar-lewagon {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 90px;
6+
box-shadow: 5px 0 10px rgba(0,0,0,0.15);
7+
}
8+
.navbar-lewagon img {
9+
width: 50px;
10+
}

0 commit comments

Comments
 (0)
Please sign in to comment.