HappyProject/index.html at master · wise-Ag/HappyProject · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy</title>
    <!-- sns 미리보기 -->
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://sonhappy.netlify.app/" />
    <meta property="og:title" content="Happy" />
    <meta property="og:description" content="까칠하지만 사랑스러운 손해피씨를 보시오." />
    <meta property="og:image" content="img/happy_sleeping17.jpeg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://sonhappy.netlify.app/" />
    <meta property="twitter:title" content="happy" />
    <meta property="twitter:description" content="까칠하지만 사랑스러운 손해피씨를 보시오." />
    <meta property="twitter:image" content="img/happy_sleeping17.jpeg" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="src/common.css">
    <link rel="stylesheet" href="src/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header-component></header-component>
    <main>
        <div class="intro">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="/img/happy38.jpeg" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="img/happy70.jpeg" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="img/happy4.jpeg" alt="Third slide">
                </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="intro__description">
                <div class="name">손해피(Son Happy)</div>
                <div class="gender">수컷</div>
                <div class="birth">2012년생</div>
            </div>
        </div>
        <div class="cards">
            <div class="card">
                <img class="card__img--happy" src="/img/happy79.jpeg" alt="">
                <div class="description">
                    <h2 class="card__title">안녕하세요 나는 <span class="highlight--happy">해피</span>에요</h2>
                    <p class="card__description">해피는 2013년 손씨네 가족이 되었어요. <br>참지 않는 말티즈인 해피에 대해 더 알고 싶으신가요?</p>
                    <a href="/html/aboutHappy.html"><button class="card__btn">해피에 대해 더 알기</button></a>
                </div>
            </div>
            <div class="card">
                <div class="description">
                    <h2 class="card__title">해피의 <span class="highlight--24hours">24시간</span> </h2>
                    <p class="card__description">먹고 자고 놀고! 천방지축 어리둥절 돌아가는 해피의 하루 <br>해피는 뭐하면서 지낼까요?</p>
                    <a href="/html/aboutHappy.html#baby"><button class="card__btn">더 많은 사진 보러가기</button></a>
                </div>
                <img class="card__img--24hours" src="/img/happy_smiling.jpeg" alt="">
            </div>
            <div class="card">
                <img class="card__img--friend" src="/img/happy_friend.jpeg" alt="">
                <div class="description">
                    <h2 class="card__title">해피의 <span class="highlight--friend">친구</span>들</h2>
                    <p class="card__description">해피는 겁이 많아서 다가오는 걸 안 좋아하는 것처럼 보일수도 있지만 <br>천천히 다가오면 꼬리콥터를 돌려요 </p>
                    <a href="/html/friends.html"><button class="card__btn">해피의 친구되기</button></a>
                </div>
            </div>
        </div>
    </main>
    <footer-component></footer-component>

<script src="/script/headerfooter.js"></script>
<script src="/script/index.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>