비전공자 개발일기

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1D0035; min-height: 100vh; overflow: hidden; } section { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: perspective(700px); } .box { position: absolute; transform-style: preserve-3d; top: 125px; } .box .cube { positio..

Tip Calculator How much was your bill? $ How was your service? -- Choose an option -- 30% - Outstanding 20% - Good 15% - Okay 10% - Bad 5% - Terrible How many people are sharing the bill? people Calculate! $0.00 each body { background: #333 url(https://photos-2.dropbox.com/t/2/AACXQ_67JHXFKvEaqJWfsntp3cdvZ5wouSYvGO6wvJXxrg/12/670825672/jpeg/32x32/1/_/1/2/cutlery.jpg/EMbmxb0FGB0gBygH/hFUR9L79V2OI..

Candle Animation @import url('https://fonts.googleapis.com/css?family=Sacramento'); body { background-color: #212121; font-family: 'Sacramento', cursive; } .container { height: 200px; width: 600px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .container .title { font-size: 5rem; color: rgba(255, 255, 255, 0.5); text-align: center; text-shadow: 0px 2px 1px orange, 0px 0p..

Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #060606; } body { display: fl..

Inbox Today Upcoming Important Meetings Trash Family Vacation Festival Concerts Today Tasks All Important Notes Links Dashboard Design Implementation Approved Create a userflow In Progress Application Implementation In Review Create a Dashboard Design In Progress Create a Web Application Design Approved Interactive Design In Review Upcoming Tasks Dashboard Design Implementation Waiting Create a ..

NASA API Get Data body{ margin: 0; padding: 0; box-sizing: border-box; background-color: #eee; } #container{ /* height: 100vh; */ display: flex; align-items: center; justify-content: center; flex-direction: column; /* margin: 10px; */ padding: 5px; } #container{ text-align: center; } h1{ text-align: center; } .text{ text-align: center; } #container img{ margin-top: 2rem; height: 400px; width: 50..

* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; height: 100vh; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } section i { position: relative; width: 60px; height: 60px; background-color: #222; } section i:nth-child(5n+1) { animation: animate 2s linear infinite, animateBG 5s li..

85% 90% 70% * { margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #CFD1E1; } .container { display: flex; justify-content: center; align-items: center; gap: 80px 100px; flex-wrap: wrap; } .container .box { position: relative; width: 240px; height: 250px; display: flex; ju..