Skip to content

Commit dfa8720

Browse files
ismanapaismanapa
committed
lesson 1-1: 5 ways of center things
1 parent 62c02a7 commit dfa8720

18 files changed

+2765
-0
lines changed

‎11-centering-things/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
css
3+
dist

‎11-centering-things/.stylelintrc.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"plugins": [
3+
"stylelint-scss"
4+
],
5+
"extends": [
6+
"stylelint-config-standard"
7+
],
8+
"rules": {
9+
"at-rule-no-unknown": null,
10+
"scss/at-rule-no-unknown": true
11+
}
12+
}

‎11-centering-things/center/01-marginAuto.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container marginAuto">
15+
<h1>margin: 0 auto</h1>
16+
17+
<div class="center">
18+
<span>
19+
🦄
20+
</span>
21+
</div>
22+
23+
</main>
24+
</body>
25+
26+
</html>

‎11-centering-things/center/02-textAlignCenter.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container textAlignCenter">
15+
<h1>text-align: center</h1>
16+
17+
<div class="center">
18+
<span>
19+
🦄
20+
</span>
21+
</div>
22+
</main>
23+
</body>
24+
25+
</html>

‎11-centering-things/center/03-positionAbsolute.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container positionAbsolute">
15+
<h1>position: absolute</h1>
16+
17+
<div class="center">
18+
<span>
19+
🦄
20+
</span>
21+
</div>
22+
</main>
23+
</body>
24+
25+
</html>

‎11-centering-things/center/04-flex.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container flex">
15+
<h1>flex</h1>
16+
17+
<div class="center">
18+
<div class="flex-item">
19+
🦄
20+
</div>
21+
<div class="flex-item">
22+
🦄
23+
</div>
24+
<div class="flex-item">
25+
🦄
26+
</div>
27+
</div>
28+
</main>
29+
</body>
30+
31+
</html>

‎11-centering-things/center/05-grid.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="../css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container grid">
15+
<h1>grid</h1>
16+
17+
<div class="center">
18+
<div class="grid-item">
19+
🦄
20+
</div>
21+
</div>
22+
</main>
23+
</body>
24+
25+
</html>

‎11-centering-things/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="referrer" content="no-referrer-when-downgrade" />
7+
<title>Café con Codely News</title>
8+
<meta name="description" content="Café con Codely news" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<link href="css/index.css" rel="stylesheet" type="text/css" media="all" />
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
<ol>
16+
<li>
17+
<a href="/center/01-marginAuto.html">margin: 0 auto</a>
18+
</li>
19+
<li>
20+
<a href="/center/02-textAlignCenter.html">text align: center</a>
21+
</li>
22+
<li>
23+
<a href="/center/03-positionAbsolute.html">position: absolute</a>
24+
</li>
25+
<li>
26+
<a href="/center/04-flex.html">flex</a>
27+
</li>
28+
<li>
29+
<a href="/center/05-grid.html">grid</a>
30+
</li>
31+
</ul>
32+
</main>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)