Coding Note

미니 CGV 웹 페이지 프로젝트 본문

My

미니 CGV 웹 페이지 프로젝트

jinnkim 2021. 12. 13. 01:00

 

HTML, CSS를 활용한 미니 CGV!

진짜 너무 소소하지만 앞으로 더 열심히 할 거니깐 가벼운 마음으로 올려본다!

 

 

 

- Main Page

 

- Main Page 2

 

 

- Movie Page

 

 

- Snack Page

 

 

끝

 

 

< 코드 >

  • Main
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CGV</title>
	<link rel="stylesheet" href="CGV.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Black+Han+Sans">
</head>
<body>
	<a href="#"><img id= "logo" alt="cgv" src="../img/cgv.png"></a>

	<div id ="menu">
		<a href="#"><b>Main</b></a>
		<a href="movie.html">Movie</a>
		<a href="snack.html">SnackBar</a>
		<br><br><br>
	
	    <img id="main" alt="cgvmain" src="../img/cgvmain.jpg" >
		<img alt="cgvmain" src="../img/cgvmain.jpg" ><br>
		<img alt="cgvmain" src="../img/cgvmain.jpg" ><br>
		<img alt="cgvmain" src="../img/cgvmain.jpg" ><br>

	</div>

		<div class="remote">
			<div class="remoteImg">
				<a href="http://www.cgv.co.kr/theaters/"><img src="../img/cgv1.png"></a>
				<a href="http://www.cgv.co.kr/arthouse/"><img src="../img/cgv2.png"></a>
				<a href="http://www.cgv.co.kr/theaters/special/"><img src="../img/cgv3.png"></a>
				<a href="loginalert.html"><img src="../img/cgv4.png"></a>
				<a href="http://www.cgv.co.kr/discount/discountlist.aspx#1"><img src="../img/cgv5.png"></a>
			</div>
			<a href=""><img src="../img/cgv6.png"></a>
	</div>
</body>
</html>

 

 

  • login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CGV.css">
    <script>
        alert("로그인이 필요한 서비스입니다.\n로그인하러 가시겠습니까?");
    </script>
    <title>회원가입하기</title>
</head>
<body>
    <a href="cgv.html"><img id= "logo" alt="cgv" src="../img/cgv.png"></a>
<div class= "wrap">
    <div class="Cjoin">
        <h2>회원가입하기</h2>
        <form name="cgvMember">
            <table>
                <tr>
                    <td>아이디</td>
                    <td><input type="text" name="id"/></td>
                </tr>
                <tr>
                    <td>비밀번호</td>
                    <td><input type="password" name="pwd"></td>
                </tr>
                <tr>
                    <td>이메일</td>
                    <td><input type="text" name="email"></td>
                </tr>
            </table>
            <br>
          <input type="submit" value="가입하기" onclick="location.href='joinSuc.html'"/>
            <input type="reset" value="다시입력"/>
        </form>
    </div>
</div>
</body>
</html>

 

  •  JoinSu
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="CGV.css">
    <title>가입완료안내</title>
</head>
<body>
  <a href="cgv.html"><img id= "logo" alt="cgv" src="../img/cgv.png"></a>
  <br>
  <h3>가입 완료하였습니다.</h3>

</body>
</html>

 

  • Movie.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="CGV.css">
	<title>Movie</title>
</head>
<body>
	<a href="cgv.html"><img id= "logo" alt="cgv" src="../img/cgv.png"></a>
	<div id ="menu">
		<a href="cgv.html">Main</a>
		<a href="#"><b>Movie</b></a>
		<a href="snack.html">SnackBar</a>
		<br><br><br>
		
		<h5 class="check">영화 상세 소개보기는 포스터를 클릭하세요.</h5>
		
		<div class = "posters">
		<a href="https://www.youtube.com/watch?v=Jd9L79koFkA" target="_blank"><img alt="DUEN" src="../img/D.jpg" width="480" height="620" ></a>
		<br><br><br>
		<a href="https://www.youtube.com/watch?v=BdkSkI61aGo" target="_blank" ><img alt="Eternals" src="../img/Eternals.jpg" width="480" height="620"></a>
		<br><br><br>
		<a href="https://www.youtube.com/watch?v=_IkAiCeedFY" target="_blank"><img alt="Annette" src="../img/Annette.jpg" width="480" height="620" ></a>
		<br><br><br><br><br>
	
		</div>
	</div>
</body>
</html>

 

 

  • Snack.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="CGV.css">
	<title>SnackBar</title>
</head>
<body>
	<a href="cgv.html"><img id= "logo" alt="cgv" src="../img/cgv.png"></a>
	<div id ="menu">
		<a href="cgv.html">Main</a>
		<a href="movie.html">Movie</a>
		<a href="#"><b>SnackBar</b></a>
		<br><br><br>
	
		<div>
			<img alt="popcorn" src="../img/popcorn.jpg"  width="450" height="480">
			<p><b>CGV 팝콘 단품</b><br> 가격 : 4,500원</p>
			<br><br><br>
			
			<img alt="nacho" src="../img/n.jpg"  width="550" height="300" >
			<p><b>CGV 나초</b><br> 가격 : 4,500원</p>
			<br><br><br>
			
			<img alt="hotdog" src="../img/snack1.jpg"  width="550" height="300" >
			<p><b>CGV 핫도그 세트</b><br> 가격 : 11,000원</p>
			<br><br><br>
			
			<img alt="set" src="../img/sn.jpg"  width="550" height="350" >
			<p><b>CGV 세트</b><br> 가격 : 12,000원</p>
			<br><br><br>
		</div>
	</div>
</body>
</html>

 

  • CSS
body {
	background-color: cornsilk;
	position: relative;
}
#logo {
	display: block;
	margin: auto;
	width: 165px;
	height: 50px;
	padding: 30px
}
#menu {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
#menu a{
	margin-left: 10px;
	margin-right: 10px;
	font-size:16px;
	color:black;
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;	
}
#main {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.check{
	color: gray;
	font-family: 'Black Han Sans', sans-serif;
}
.remote{
	width: 116px;
	top: 70px;
	right: 80px;
	position: fixed;
}
.remoteImg{
	background-color: #FDFCF0;
	border: 5px solid red;
	border-radius: 10px;
}
.remote img{
	width: 103px;
	height: 91px;
}
.wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 70vh;
	justify-content: center;
	text-align: center;
}
.wrap td {
	font-size: 16px;
	text-align: left;
}
.Cjoin {
	padding-top: 30px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	border: 1px solid gray;
}
h3 {
	font-size: 20px;
	text-align: center;
	font-family: "Arial Rounded MT Bold";
}

 

 

사진 출처 : CGV, 네이버 영화, Google 등

하이퍼링크 : CGV, Youtube

 

'My' 카테고리의 다른 글

[Project1] 3. 회원가입 페이지_데이터 연동  (0) 2021.12.27
[Project1] 2. 여행 사이트 로그인 페이지  (0) 2021.12.15
[Project1] 1. 여행 사이트 메인 페이지  (0) 2021.12.15
'My' Related Articles more
Comments