microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:kenotron/bootcamp

Browse Source
This commit is contained in:
Ken
2019-02-15 15:48:09 -08:00
parent e4f8ad546b 22fc20962f
commit 9ca60c31d9
2 changed files with 56 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/shared.css
View File

@@ -20,17 +20,17 @@ body {
} }
.Container { .Container {
display: flex;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
} }
.Tiles { .Tiles {
display: flex; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
flex-wrap: wrap; grid-gap: 20px;
max-width: 1000px;
display: grid;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
width: 800px;
padding: 0; padding: 0;
} }
@@ -38,7 +38,6 @@ body {
background-color: white; background-color: white;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
margin: 0 12px 12px 0;
opacity: 0.96; opacity: 0.96;
transition: all 0.15s linear; transition: all 0.15s linear;
} }
@@ -56,9 +55,7 @@ body {
height: 148px; height: 148px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 20px;
text-decoration: none; text-decoration: none;
width: 148px;
} }
.Tile-link i { .Tile-link i {
@@ -68,9 +65,8 @@ body {
} }
.Tile--intro { .Tile--intro {
max-width: 468px; grid-column: span 2;
padding: 20px; padding: 20px;
width: 100%;
} }
.Tile--intro h1 { .Tile--intro h1 {

64
index.html
View File

@@ -12,16 +12,54 @@
<h2>Day 1</h2> <h2>Day 1</h2>
Setup, HTML, CSS, Javascript and Intro to React Setup, HTML, CSS, Javascript and Intro to React
</li> </li>
<li class="Tile"><a href="/step1-00/" class="Tile-link">Step 0</a></li> <li class="Tile">
<li class="Tile"><a href="/step1-01/" class="Tile-link">Step 1</a></li> <a target="_blank" href="/step1-00/" class="Tile-link">
<li class="Tile"><a href="/step1-02/" class="Tile-link">Step 2</a></li> Step 0 <br />
<li class="Tile"><a href="/step1-03/" class="Tile-link">Step 3</a></li> HTML/CSS/JS
<li class="Tile"><a href="/step1-04/" class="Tile-link">Step 4</a></li> </a>
<li class="Tile"><a href="/step1-05/" class="Tile-link">Step 5</a></li> </li>
<li class="Tile"><a href="/step1-06/" class="Tile-link">Step 6</a></li> <li class="Tile">
<li class="Tile"><a href="/step1-07/" class="Tile-link">Step 7</a></li> <a target="_blank" href="/step1-01/" class="Tile-link">
<li class="Tile"><a href="/step1-08/" class="Tile-link">Step 8</a></li> Step 1 <br />
<li class="Tile"><a href="/step1-09/" class="Tile-link">Step 9</a></li> Todo HTML
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-02/" class="Tile-link">
Step 2 <br />
Todo CSS
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-03/" class="Tile-link">
Step 3 <br />
Todo JS
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-04/" class="Tile-link">
Step 4 <br />
React Intro
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-05/" class="Tile-link">
Step 5 <br />
React Components
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-06/" class="Tile-link">
Step 6 <br />
State Driven UI
</a>
</li>
<li class="Tile">
<a target="_blank" href="/step1-07/" class="Tile-link">
Step 7 <br />
UI Driven State
</a>
</li>
</ul> </ul>
</div> </div>
<div class="Container"> <div class="Container">
@@ -30,8 +68,8 @@
<h2>Day 2</h2> <h2>Day 2</h2>
Setup, HTML, CSS, Javascript and Intro to React Setup, HTML, CSS, Javascript and Intro to React
</li> </li>
<li class="Tile"><a href="/step2-01/" class="Tile-link">Step 1</a></li> <li class="Tile"><a target="_blank" href="/step2-01/" class="Tile-link">Step 1</a></li>
<li class="Tile"><a href="/step2-02/" class="Tile-link">Step 2</a></li> <li class="Tile"><a target="_blank" href="/step2-02/" class="Tile-link">Step 2</a></li>
</ul> </ul>
</div> </div>
<div class="Container"> <div class="Container">
@@ -39,7 +77,7 @@
<li class="Tile Tile--intro"> <li class="Tile Tile--intro">
<h2>Playground</h2> <h2>Playground</h2>
</li> </li>
<li class="Tile"><a href="/playground/" class="Tile-link">Playground</a></li> <li class="Tile"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li>
</ul> </ul>
</div> </div>
</body> </body>