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

Switched to grid

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-15 15:28:12 -08:00
parent 5e64d11d22
commit 71bed8b88e
2 changed files with 53 additions and 19 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 {
display: flex;
justify-content: center;
padding: 20px;
}
.Tiles {
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 20px;
max-width: 1000px;
display: grid;
list-style-type: none;
margin: 0;
width: 800px;
padding: 0;
}
@@ -38,7 +38,6 @@ body {
background-color: white;
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);
margin: 0 12px 12px 0;
opacity: 0.96;
transition: all 0.15s linear;
}
@@ -56,9 +55,7 @@ body {
height: 148px;
justify-content: center;
text-align: center;
padding: 20px;
text-decoration: none;
width: 148px;
}
.Tile-link i {
@@ -68,9 +65,8 @@ body {
}
.Tile--intro {
max-width: 468px;
grid-column: span 2;
padding: 20px;
width: 100%;
}
.Tile--intro h1 {

58
index.html
View File

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