diff --git a/assets/shared.css b/assets/shared.css index 5472c2a..fa268f0 100644 --- a/assets/shared.css +++ b/assets/shared.css @@ -9,11 +9,24 @@ html { body { background-color: #f3f2f1; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgIHdpZHRoPSI2MDAiICBoZWlnaHQ9IjYwMCIgIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMCwzMDApIj4gICAgPHBhdGggZD0iTTEyMi42LC0xMTQuOEMxNzAuMywtNzUsMjI4LjEsLTM3LjUsMjM0LjQsNi4yQzI0MC42LDUwLDE5NS4zLDk5LjksMTQ3LjYsMTI5LjZDOTkuOSwxNTkuMyw1MCwxNjguNiw0LjcsMTYzLjlDLTQwLjUsMTU5LjIsLTgxLjEsMTQwLjQsLTExNS43LDExMC43Qy0xNTAuNCw4MS4xLC0xNzkuMiw0MC41LC0xOTMuOCwtMTQuNkMtMjA4LjQsLTY5LjgsLTIwOC45LC0xMzkuNSwtMTc0LjIsLTE3OS40Qy0xMzkuNSwtMjE5LjIsLTY5LjgsLTIyOS4xLC0xNi4xLC0yMTNDMzcuNSwtMTk2LjgsNzUsLTE1NC42LDEyMi42LC0xMTQuOFoiIGZpbGw9IiMzZDk3ZTMiIC8+ICA8L2c+PC9zdmc+); - background-attachment: fixed; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: 900px 740px; +} + +a { + color: #0078d4; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +h1 { + margin: 0; +} + +h1 a { + font-size: 16px; + font-weight: 400; } .Container { @@ -30,6 +43,7 @@ body { list-style-type: none; margin: 0; padding: 0; + counter-reset: steps; } .Tile { @@ -38,6 +52,9 @@ body { 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); opacity: 0.96; transition: all 0.15s linear; + position: relative; + overflow: hidden; + padding: 12px; } .Tile:not(.Tile--intro):hover { @@ -45,15 +62,39 @@ body { opacity: 1; } +.Tile.Tile--numbered::after { + counter-increment: steps; + content: counter(steps); + position: absolute; + left: -20px; + bottom: -20px; + font-size: 220px; + line-height: 188px; + color: #f3f2f1; + z-index: 1; +} + .Tile-link { align-items: center; + text-align: center; color: #323130; display: flex; flex-direction: column; height: 148px; justify-content: center; - text-align: center; text-decoration: none; + position: relative; + font-size: 24px; + font-weight: 200; + z-index: 2; +} + +a.Tile-link { + color: #0078d7; +} + +a.Tile-link:hover { + text-decoration: underline; } .Tile-link i { @@ -62,6 +103,20 @@ body { color: #605e5c; } +.Tile-links { + font-size: 16px; + color: #605e5c; +} + +.Tile-links a { + text-decoration: none; + color: #0078d4; +} + +.Tile-links a:hover { + text-decoration: underline; +} + .Tile--intro { grid-column: span 2; padding: 20px; diff --git a/index.html b/index.html index f69c2aa..24f3a8e 100644 --- a/index.html +++ b/index.html @@ -7,67 +7,55 @@
-

Frontend Bootcamp

- github sources +

Frontend Bootcamp View on GitHub

@@ -76,69 +64,60 @@ @@ -147,8 +126,9 @@