Repositorium for playing with 100 Days of CSS Challenge. The challenge is to be creative and recreate the example shown on the page.
For solving the problem, use the template: HTML
<body>
<div class="frame">
<div class="center">
<p>Happy coding :)</p>
</div>
</div>
</body>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
| Day | Done |
|---|---|
| 👤 6 - Profile | ✔ |
| ⚫ 19 - Dots slider | ⏳ |
| 🌊 54 - Waves | ✔ |
| 🟢 66 - Radio button animation | ⏳ |
| ⛱ 67 - Umbrella | ✔ |
| 📆 70 - Calendar | ✔ |
| 💎 87 - Ruby | |
| 🌲 94 - Tree | ✔ |
| 🐷 95 - Pig | |
| ⬜ 96 - Square | ✔ |