사자자리
웹페이지 기획 2 본문
5주차: 앨범 페이지 만들기
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--웹페이지 이름-->
<title>LANA DEL REY ALBUMS</title>
<style>
/*웹페이지 여백 제거*/
body {padding: 0px; margin: 0px;}
/*상하단의 동영상*/
.title {width: 100%; height: 700px; overflow: hidden; margin: 0px auto; position: relative;}
.title video {width: 100%;}
/*상단의 글자*/
#title_text {position: absolute; top: 55%; width: 100%;}
#title_text p {margin-top: -50px; text-align: center; font-size: 80px; color: #ffffff; font-family: "Times New Roman";}
/*하단의 글자: 글자 위에 커서를 올리면 글자의 색과 배경색이 바뀐다.*/
#title_text a {margin-top: -50px; text-align: center; font-size: 80px; color: #ffffff; font-family: "Times New Roman"; padding: 15px; text-decoration: none; display: grid; grid-template-columns: 1fr;}
#title_text a:hover {background-color: #F5F4E9; color: #4F757A; padding: 15px;}
/*앨범의 사진과 이름을 grid 기능을 사용해서 배치했다.*/
.box {margin: auto; width: 90%; height: 200px; padding: 15px; display: grid; grid-template-columns: 250px 1fr;}
/*앨범 이름*/
#name1 {color: #CB6E73; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name1_1 {color: #815937; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name2 {color: #FFFFFF; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name3 {color: #112D5D; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name4 {color: #A90202; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name5 {color: #E9DBBB; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name6 {color: #F3F3F3; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
#name7 {color: #6D3224; text-decoration: none; font-size: 50px; font-family: "Impact"; position: relative; top: 70px; transform: translateY(-50%); padding: 0; margin: 0;}
/*box의 배경색*/
#box1 {background-color: #C3D0E2;}
#box1_1 {background-color: #FFF8D9;}
#box2 {background-color: #7F7F7F;}
#box3 {background-color: #CDE3F1;}
#box4 {background-color: #E7E7DB;}
#box5 {background-color: #628DAA;}
#box6 {background-color: #333333;}
#box7 {background-color: #F5F4E9;}
/*앨범 이름 위에 커서를 올리면 글자의 색과 배경색이 반전된다.*/
#name1:hover {background-color: #CB6E73; color: #C3D0E2; padding-top: 10px; padding-bottom: 10px;}
#name1_1:hover {background-color: #815937; color: #FFF8D9; padding-top: 10px; padding-bottom: 10px;}
#name2:hover {background-color: #FFFFFF; color: #7F7F7F; padding-top: 10px; padding-bottom: 10px;}
#name3:hover {background-color: #112D5D; color: #CDE3F1; padding-top: 10px; padding-bottom: 10px;}
#name4:hover {background-color: #A90202; color: #E7E7DB; padding-top: 10px; padding-bottom: 10px;}
#name5:hover {background-color: #E9DBBB; color: #628DAA; padding-top: 10px; padding-bottom: 10px;}
#name6:hover {background-color: #F3F3F3; color: #333333; padding-top: 10px; padding-bottom: 10px;}
#name7:hover {background-color: #6D3224; color: #F5F4E9; padding-top: 10px; padding-bottom: 10px;}
</style>
</head>
<body>
<!--상단의 동영상과 글자-->
<div class="title">
<video muted autoplay loop>
<source src="vinyl.mp4">
</video>
<div id="title_text">
<p>LANA DEL REY ALBUMS</p>
</div>
</div>
<br><br><br><br><br><br>
<!--앨범 사진과 제목-->
<div class="box" id="box1">
<img src="1_borntodie.jpg" width="200px;">
<div class="name">
<a id="name1" href="borntodie.html"> 2012 BORN TO DIE </a>
</div>
</div>
<br><br><br>
<div class="box" id="box1_1">
<img src="1_1_paradise.webp" width="200px;">
<div class="name">
<a id="name1_1" href="paradise.html"> 2012 BORN TO DIE: PARADISE </a>
</div>
</div>
<br><br><br>
<div class="box" id="box2">
<img src="2_ultraviolence.webp" width="200px;">
<div class="name">
<a id="name2" href="ultraviolence.html"> 2014 ULTRAVIOLENCE </a>
</div>
</div>
<br><br><br>
<div class="box" id="box3">
<img src="3_honeymoon.jpg" width="200px;">
<div class="name">
<a id="name3" href="honeymoon.html"> 2015 HONEYMOON </a>
</div>
</div>
<br><br><br>
<div class="box" id="box4">
<img src="4_lustforlife.png" width="200px;">
<div class="name">
<a id="name4" href="lustforlife.html"> 2017 LUST FOR LIFE </a>
</div>
</div>
<br><br><br>
<div class="box" id="box5">
<img src="5_nfr.jpg" width="200px;">
<div class="name">
<a id="name5" href="nfr.html"> 2019 NORMAN FUCKING ROCKWELL </a>
</div>
</div>
<br><br><br>
<div class="box" id="box6">
<img src="6_cotcc.jpg" width="200px;">
<div class="name">
<a id="name6" href="cotcc.html"> 2021 CHEMTRAILS OVER THE COUNTRY CLUB </a>
</div>
</div>
<br><br><br>
<div class="box" id="box7">
<img src="7_bb.webp" width="200px;">
<div class="name">
<a id="name7" href="bb.html"> 2021 BLUE BANISTERS </a>
</div>
</div>
<br><br><br><br><br><br>
<!--하단의 동영상과 글자-->
<div class="title">
<video muted autoplay loop>
<source src="Ocean1.mp4">
</video>
<div id="title_text">
<a href="index.html">LANA DEL REY</a>
</div>
</div>
</body>
</html>
https://renne1017.github.io/lanadelrey/album.html
LANA DEL REY ALBUMS
renne1017.github.io
'웹기초/웹페이지 기획' Related Articles
more
Comments