Web_develop/index.html at main · BoxLogoDev/Web_develop · GitHub

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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>최샴 영화 기록 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            background-color: green;
            height: 250px;
            width: 100%;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            color: white;
            border-radius: 50px;
            border: 1px solid white;
            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment{
            color: gray;
        }

        .wrap{
            max-width: 1200px;
            width: 95%;
            margin: 20px auto 0px auto;
        }

        .mypost{
            max-width: 500px;
            width: 95%;
            margin: 20px auto 0px auto;
            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .mybtn > button{
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>내 생에 최고의 영화들</h1>
        <button>영화 기록하기 🖋</button>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화 URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>선택하기</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">코멘트</label>
        </div>
        <div class="mybtn">
            <div class="recoredbtn">
                <button type="button" class="btn btn-dark">기록하기</button>
                <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">수어사이드 스쿼드</h5>
                        <p class="card-text">핏빛 광기의 쾌감 재미, 개성, 광기, 잔혹 어떤 것도 모자라지 않는다.
                            하나하나 공들여 만들어 낸 캐릭터의 활약에 환호성을 내지르다가도 예상 못 한 결과에 어느 순간 당황하기도 한다.
                            화려한 액션에 시선을 빼앗기다가도 핏빛 낭자한 잔혹함에 고개를 돌리기도 한다.
                            과장과 과잉이 넘쳐도 지루한 것보다는 낫다. 미국의 패권주의에 대한 풍자와 소외된 자들을 향한 위안도 빼놓지 않았다.
                            DC에 완벽하게 복제된 마블의 DNA. 마침내 제임스 건이 해냈다.</p>
                        <p>⭐⭐⭐⭐</p>
                        <p class="mycomment">길티 100% + 플레져 1000%</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">수어사이드 스쿼드</h5>
                        <p class="card-text">핏빛 광기의 쾌감 재미, 개성, 광기, 잔혹 어떤 것도 모자라지 않는다.
                            하나하나 공들여 만들어 낸 캐릭터의 활약에 환호성을 내지르다가도 예상 못 한 결과에 어느 순간 당황하기도 한다.
                            화려한 액션에 시선을 빼앗기다가도 핏빛 낭자한 잔혹함에 고개를 돌리기도 한다.
                            과장과 과잉이 넘쳐도 지루한 것보다는 낫다. 미국의 패권주의에 대한 풍자와 소외된 자들을 향한 위안도 빼놓지 않았다.
                            DC에 완벽하게 복제된 마블의 DNA. 마침내 제임스 건이 해냈다.</p>
                        <p>⭐⭐⭐⭐</p>
                        <p class="mycomment">길티 100% + 플레져 1000%</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">수어사이드 스쿼드</h5>
                        <p class="card-text">핏빛 광기의 쾌감 재미, 개성, 광기, 잔혹 어떤 것도 모자라지 않는다.
                            하나하나 공들여 만들어 낸 캐릭터의 활약에 환호성을 내지르다가도 예상 못 한 결과에 어느 순간 당황하기도 한다.
                            화려한 액션에 시선을 빼앗기다가도 핏빛 낭자한 잔혹함에 고개를 돌리기도 한다.
                            과장과 과잉이 넘쳐도 지루한 것보다는 낫다. 미국의 패권주의에 대한 풍자와 소외된 자들을 향한 위안도 빼놓지 않았다.
                            DC에 완벽하게 복제된 마블의 DNA. 마침내 제임스 건이 해냈다.</p>
                        <p>⭐⭐⭐⭐</p>
                        <p class="mycomment">길티 100% + 플레져 1000%</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">수어사이드 스쿼드</h5>
                        <p class="card-text">핏빛 광기의 쾌감 재미, 개성, 광기, 잔혹 어떤 것도 모자라지 않는다.
                            하나하나 공들여 만들어 낸 캐릭터의 활약에 환호성을 내지르다가도 예상 못 한 결과에 어느 순간 당황하기도 한다.
                            화려한 액션에 시선을 빼앗기다가도 핏빛 낭자한 잔혹함에 고개를 돌리기도 한다.
                            과장과 과잉이 넘쳐도 지루한 것보다는 낫다. 미국의 패권주의에 대한 풍자와 소외된 자들을 향한 위안도 빼놓지 않았다.
                            DC에 완벽하게 복제된 마블의 DNA. 마침내 제임스 건이 해냈다.</p>
                        <p>⭐⭐⭐⭐</p>
                        <p class="mycomment">길티 100% + 플레져 1000%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>