diff --git a/public/index.html b/public/index.html index da61c1beb629287c7933b9197773cb828609a838..0e87e0b8507ab72626d401e5a795461c0215261d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,24 +1,72 @@ <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> - <meta name="generator" content="GitLab Pages"> - <title>Plain HTML site using GitLab Pages</title> - <link rel="stylesheet" href="style.css"> + <meta charset="utf-8" /> + <meta name="generator" content="GitLab Pages" /> + <title>Pratcial Programming part 3</title> + <link rel="stylesheet" href="style.css" /> </head> <body> <div class="navbar"> - <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a> + <a href="https://pages.gitlab.io/plain-html/">수업 동료 웹페이지 링크</a> <a href="https://gitlab.com/pages/plain-html/">Repository</a> <a href="https://gitlab.com/pages/">Other Examples</a> </div> + <div class="intro"> + <h1> + 안녕하세요!!! 요즘 제가 많이 듣고 있는 노래들을 소개해보고자 합니다 + </h1> + </div> + <p id="p-text-style"> + 많이들 아시는 분들도 있을 수도 있고, 제 취향이 다를 수도 있으니 + 감안해주시면 감사하겠습니다! + </p> - <h1>Hello World!!!! </h1> + <h4> + 제가 소개하고자 하는 노래는 간단하게 5개 정도 되겠고 해당 앨범의 + 표지들입니다. 하나의 앨범 안에 여러 곡이 담기기도 했습니다. + </h4> + <div class="img-box"> + <img + src="https://images.genius.com/38160be65eed2b190601cbe495643c49.999x999x1.jpg" + /> + <img + src="https://i.discogs.com/ERxiK-EpzmCPmQS1gjIc8Kc72LENcxzhT7uPbARYzUI/rs:fit/g:sm/q:90/h:600/w:585/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2MTcy/Mjc0LTE2MDQ5NTM1/MjItNTY1Mi5qcGVn.jpeg" + /> + <img + src="https://image.bugsm.co.kr/album/images/200/204481/20448106.jpg?version=20230321003003.0" + /> + </div> + <div class="text-box"> + <ul> + <h3>왼쪽에서부터 순서대로 진행되겠습니다.</h3> + <li>첫 번째 앨범 제목 : "130 mood : TRBL"</li> + <li>두 번째 앨범 제목 : "Stuck with U"</li> + <li>세 번째 앨범 제목 : "Between Sat & Sun"</li> + </ul> + <p>첫 번째 앨범에는 2곡이 있습니다.</p> + <ol type="1"> + <li>1번째 노래 : Dean의 "what 2 do"</ll> + <li>2번째 노래 : Dean의 "D"</ll> + <p>해당 노래들의 소개로는 Dean이라는 힙합 뮤지션의 노래로 감성적인 힙합을 들려줍니다. 개코와 크러쉬라는 힙합 뮤지션이 피쳐링을 했습니다.</p> + </ol> - <p> - This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator. - </p> - <h1> ????</h1> + + <p>두 번째 앨범에는 1곡이 있습니다.</p> + <ol type="1"> + <li>Ariana grande, Justin Bieber의 "stuck with you"</li> + <p>해당 노래들의 소개로는 저스틴 비버와 아리아나 그란데의 외국 팝 뮤지션들의 콜라보 노래로 서정적인 팝 노래로 이것 또한 감성적입니다.</p> + </ol> + + + <p>세 번째 앨범에는 2곡이 있습니다.</p> + <ol type="1"> + <li>1번째 노래 : toil 의 "검정색 하트"</ll> + <li>2번째 노래 : toil의 "다시 걸을 때"</ll> + <p>해당 노래들의 소개로는 Toil이라는 힙합 프로듀서 노래로 여러 힙합 뮤지션들의 피쳐링으로 toil이라는 프로듀서 특유의 감성이 담겨져 있는 곡들입니다.</p> + </ol> + + + </div> </body> </html> - diff --git a/public/style.css b/public/style.css index 3eae4084bda0c2270306b14ac8c1ca732415edc3..027e4c2d9db207b9b6470744d2160cee8a772c87 100644 --- a/public/style.css +++ b/public/style.css @@ -5,13 +5,41 @@ body { } .navbar { - background-color: #313236; + background-color: aqua; border-radius: 2px; - max-width: 800px; + + display: flex; + justify-content: center; +} + +.intro > h1 { + background-color: aqua; + width: 870px; +} + +#p-text-style { + font-size: 20px; + font-family: "Times New Roman", Times, serif; + font-weight: bold; + background-color: aquamarine; + width: 860px; +} +.text-box > p { + font-size: 30px; + font-weight: bold; + font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; +} + +.text-box > ul > h3 { + background-color: aquamarine; + width: 300px; +} +.text-box > ul > li { + font-size: 20px; } .navbar a { - color: #aaa; + color: black; display: inline-block; font-size: 15px; padding: 10px; @@ -21,4 +49,12 @@ body { .navbar a:hover { color: #ffffff; } - +.img-box { + display: flex; + justify-content: center; +} +.img-box > img { + width: 300px; + height: 300px; + padding: 10px; +}