webproject/program.html at main · slonue/webproject · 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
<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>YourSkin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="index.css">

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gugi&family=Noto+Sans+KR:wght@400;700&display=swap"
        rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#nav-menu">

    <!-- 네비게이션 영역 시작 -->
    <nav class="navbar navbar-expand-md  fixed-top " style="background-color:#DDC9B4">
        <div  class="container">

            <a class="gugi-font navbar-brand" href="index.html">
                <img src="images/YourSkin.png"  alt="로고">  </a>

            <div class="collapse navbar-collapse" id="nav-menu" >
                <ul class="navbar-nav ms-auto my-2">
                    <li class="nav-item"><a class="nav-link" href="brand.html" style="color:white";>Brand</a></li>
                    <li class="nav-item"><a class="nav-link" href="program.html" style="color:white"; >Program</a></li>
                    <li class="nav-item"><a class="nav-link" href="store.html"style="color:white"; >Store</a></li>
                    <li class="nav-item"><a class="nav-link" href="community.html" style="color:white";>Community</a></li>

                </ul>
            </div>
        </div>
    </nav>
    <!-- 네비게이션 영역 끝 -->

    <section class="container overflow-hidden py-5 " id="store">

        <div class="text-center py-5">
            <h2 class="mb-3" style="color:#DDC9B4; margin-top:50px; font-weight:700;">프로그램 안내</h2>
            <p style="color:#DDC9B4; margin-top:20px">유어스킨만의 프로그램에 대한 상세 정보를 확인하실 수 있습니다.</p>
        </div>
    </section>


    <section style = "background-color:#DBC2A8" >
        <div class="row justify-content-center align-items-center mb-5">
        <div class="col-md-6" style="margin-top: 150px;">
            <img src="images/program_1.jpg" style="margin-left:150px;">
        </div>
        <div class="col-md-5"style=" float:left; ">
            <h2 style="color:white; font-weight:700">
                베이직 Basic</br>
            </h2>
            <p style="color:white">
                스킨케어 리프팅으로 겉과 속을 두번 리프팅해주어<br> 맑고 자신있는 피부로 용기를 선사하는
                프로그램입니다.</p>
        </div>
         </div>

         <div class="row justify-content-center align-items-center mb-5">
            <div class="col-md-6" style="margin-top: 150px;">
                <img src="images/program_2.jpg" style="margin-left:150px;">
            </div>
            <div class="col-md-5"style=" float:left; ">
                <h2 style="color:white; font-weight:700">
                    시그니처  Signature</br>
                </h2>
                <p style="color:white">
                    유어스킨이 독자적으로 개발한 테크닉을 통해 다양한 얼굴 고민에 맞춰<br>
						관리하여 이상적인 효과를 경험하는 차별화된 유어스킨만의 시그니처 프로그램</p>
            </div>
             </div>

             <div class="row justify-content-center align-items-center mb-5">
                <div class="col-md-6" style="margin-top: 150px;">
                    <img src="images/program_3.jpg" style="margin-left:150px; margin-bottom:100px">
                </div>
                <div class="col-md-5"style=" float:left; ">
                    <h2 style="color:white; font-weight:700">
                        스페셜 Special</br>
                    </h2>
                    <p style="color:white">
                        얼굴 피부의 모든 기능을 정상적으로 유지하고 관리합니다.<br>
							피부 깊숙한 곳부터 자극시켜 충분한 영양을 공급하고 관리하여 보다<br>
							맑고 깨끗한 피부를 개선하는 스폐설 관리 프로그램</p>
                </div>
                 </div>
    </section>
    <!--푸터 섹션 시작-->
    <section id="footer">
        <footer class="text-white">
        <div class="container text-left">
            <p class="py-5 mb-0">
                <b>YourSkin</b>
                <br>유어스킨
                <br>본점 압구정 도산대로 1124길
               </p>
            </div>
            <div class="justify-content-evenly px-5 mt-4 w-50 " style="float:right">
                <div style="float: right;">
                     <a href="https://www.youtube.com/c/%EC%BD%94%EB%93%9C%EB%8D%A4Codeyourdreams" target="_blank"
                    class="btn btn-light  btn-lg px-4"><i class="bi bi-youtube"></i></a>
                <a href="https://www.instagram.com/skincare.gyul/" class="btn btn-light  btn-lg px-4"><i class="bi bi-instagram"></i></a>
                <a href="#" class="btn btn-light btn-lg px-4"><i class="bi bi-telephone"></i></a>
                </div>
               </div>
    </footer>
    </section>

</body>