비전공자 개발일기

Calendar 이전 달 년 월 다음 달 일 월 화 수 목 금 토 * { text-align: center; margin: 10px auto; } #calendar_wrap { background: #333; width: 350px; } caption { font-size: 1.5em; color: #ffa500; padding: 10px; } caption #prev, caption #next { display: inline-block; font-size: 5px; text-decoration: none; color: #fff; padding: 5px; margin: 10px; } table, th, td { color: #fff; border: 1px solid #666; border-collapse..

Dark mode @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); * { box-sizing: border-box; } :root { --primary-color: #000; --secondary-color: #fff; } html { transition: all 0.5s ease-in; } html.dark { --primary-color: #fff; --secondary-color: #333; } html.dark { background-color: #111; color: var(--primary-color); } body { font-family: 'Heebo', sans-serif; display: fle..

My Website Home About Services Contact Welcome To My Website Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur? Content One Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Faci..

Enter all of the choices divided by a comma (','). Press enter when you're done @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #2b88f0; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } h3 { color: #ff..

Pokedex @import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap'); * { box-sizing: border-box; } body { background: #efefbb; background: linear-gradient(to right, #d4d3dd, #efefbb); font-family: 'Lato', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; } h1 { letter-spacing: 3px; } .poke-container { display: flex; f..

Image Password Strength Change the password to see the effect Email Password Submit * { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .background { background: url("https://images.unsplash.com/photo-1556745757-8d76bdb6984b") no-repeat center center/cover; position: absolute; top:..

Password Generator Password Length Include uppercase letters Include lowercase letters Include numbers Include symbols Generate Password @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #3b3b98; color: #fff; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: ..

Add note @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; outline: none; } body { background-color: #7bdaf3; font-family: 'Poppins', sans-serif; display: flex; flex-wrap: wrap; margin: 0; padding-top: 3rem; } .add { position: fixed; top: 1rem; right: 1rem; background-color: #9ec862; color: #fff; border: none; border-radius: 3p..