dpl.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DPL</title> <link rel="stylesheet" href="./dpl.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap" rel="stylesheet"> </head> <body> <div id="menu"> <h1><a href="dpl.html">D P L</a></h1> <hr> <table align="center"> <tr> <td width="200" align="center"><a href="musician.html">Musician</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="genre.html">Genre</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="mood.hmtl">Mood</a></td> </tr> </table> <hr> </div> <div id="welcome"> Welcome to DPL </div> <iframe width="0" height="0" src="https://www.youtube.com/embed/ywwU5ka1fBs?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <form> <div class="form-group"> <input type="text" id="username" name="username" placeholder="아이디를 입력하세요."> </div> <div class="form-group"> <input type="password" id="password" name="password" placeholder="비밀번호를 입력하세요."> </div> <div class="form-group"> <input type="submit" value="로그인"> </div> </form> </body> </html> | cs |
musician.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DPL</title> <link rel="stylesheet" href="./dpl.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap" rel="stylesheet"> </head> <body> <div id="menu"> <h1><a href="dpl.html">D P L</a></h1> <hr> <table align="center"> <tr> <td width="200" align="center"><a href="musician.html">Musician</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="genre.html">Genre</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="mood.html">Mood</a></td> </tr> </table> <hr> </div> <br><br> <details> <summary>Justin Bieber</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=Ec7TN_11az8">Stay</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=Q9aKBkMgzVo">Hold On</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=tQ0yjYUFKAE">Peaches</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=T1pGhrK3duw">No Brainer</a></div><br> </details> <br> <details> <summary>Charlie Puth</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=9voN0gkdlS4">I Don't Think That I Like Her</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=e9XbKS9xWD0">Change</a></div><br> </details> </body> </html> | cs |
genre.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DPL</title> <link rel="stylesheet" href="./dpl.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap" rel="stylesheet"> </head> <body> <div id="menu"> <h1><a href="dpl.html">D P L</a></h1> <hr> <table align="center"> <tr> <td width="200" align="center"><a href="musician.html">Musician</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="genre.html">Genre</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="mood.html">Mood</a></td> </tr> </table> <hr> </div> <br><br> <details> <summary>POP</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=Ec7TN_11az8">Stay</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=Q9aKBkMgzVo">Hold On</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=tQ0yjYUFKAE">Peaches</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=T1pGhrK3duw">No Brainer</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=9voN0gkdlS4">I Don't Think That I Like Her</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=e9XbKS9xWD0">Change</a></div><br> </details> <br> <details> <summary>Classical Music</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=I03Hs6dwj7E">Mendelssohn Violin Concerto in E minor, Op. 64</a></div> <div class="sl"><a href="https://www.youtube.com/watch?v=dZ0LSRUbMvI">E. Grieg Violin Sonata No.3 in c minor, Op.45</a></div> <div class="sl"><a href="https://www.youtube.com/watch?v=qNsxXued784">Handel-Halvorsen Passacaglia</a></div> </details> <br> <details> <summary>Lofi</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=jfKfPfyJRdk">Lofi</a></div> </details> </body> </html> | cs |
mood.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DPL</title> <link rel="stylesheet" href="./dpl.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap" rel="stylesheet"> </head> <body> <div id="menu"> <h1><a href="dpl.html">D P L</a></h1> <hr> <table align="center"> <tr> <td width="200" align="center"><a href="musician.html">Musician</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="genre.html">Genre</a></td> <td width="100" align="center">|</td> <td width="200" align="center"><a href="mood.html">Mood</a></td> </tr> </table> <hr> </div> <br><br> <details> <summary>Motivation</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=btrzs54s1Rc">Rise</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=xmXHQUAWLA8">Tiger Den</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=4JdNy3Gbfls">Came</a></div><br> </details> <br> <details> <summary>Clam</summary> <div class="sl"><a href="https://www.youtube.com/watch?v=HoTaZ8nFRkg">Tango</a></div><br> <div class="sl"><a href="https://www.youtube.com/watch?v=ACDf9fhpuqo">Whiskey and Morphine</a></div><br> </details> </body> </html> | cs |
dpl.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | @import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap'); body { font-family: 'Alkatra', cursive; background-image: url("DPL_images/bgi.jpg"); } h1 { text-align: center; font-style: oblique; font-size: 50px; } td, a { color: aliceblue; text-decoration: none; } #welcome { text-shadow: -6px -4px aliceblue; line-height: 300px; font-family: 'Alkatra', cursive; font-size: 100px; font-weight: 100; letter-spacing: 4px; text-align: center; color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 10s infinite linear; } @-webkit-keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(-360deg); } } #menu { margin: -8px -8px; padding: 1px; background-image: url("DPL_images/bgi.jpg"); } td a:hover { color: aquamarine; transition: color 0.3s ease; } summary { font-size: 60px; text-align: center; } summary:hover { color: aliceblue; transition: color 0.5s ease; cursor: pointer; } .sl { text-align: center; font-size: 30px; letter-spacing: 2px; } .sl:hover { text-align: center; color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 2s infinite linear; } form { width: 250px; margin: 0 auto; background-color: aliceblue; padding: 20px; border-radius: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } input[type="text"], input[type="password"], input[type="submit"], input[type="reset"] { width: 90%; padding: 10px; border-radius: 5px; border: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-size: 16px; } input[type="submit"] { background-color: #2980b9; color: #fff; cursor: pointer; transition: background-color 0.3s ease; width: 250px; } input[type="submit"]:hover { background-color: #3498db; } .form-group { margin-bottom: 20px; } .form-group:last-child { margin-bottom: 0; } | cs |
음악 저작권 때문에 iframe을 사용하지 못하고 링크 걸었습니다...ㅠ
첫댓글 우와~ 멋져요~!
진짜 넘 예뻐ㅋㅋㅋ!!
에이.. 다들 넘 잘하셔서 올리기 부끄러웠어요
용덕이 오늘부터 부끄럼 압수!
연습내용들 멋집니다.
우리들만의 카페입니다. 마음껏 활용들 하세요.^.^..