fleursereine.github.io/index.html at main · kylemastercoder14/fleursereine.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Account | Fleur Sereine</title>
    <!-- FAVICON -->
    <link rel="shortcut icon" href="images/assets/favicon.png" type="image/x-icon">
    <!-- BOXICONS -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <!-- CUSTOM CSS -->
    <link rel="stylesheet" href="css/account.css">
</head>

<body>


    <!-- HEADER SECTION -->
    <!-- SMALLER SCREEN -->

    <header>
        <div class="header-container">
            <a href="javascript:void(0)" class="menu-toggle" onclick="open_menu()">
                <div class="menu-icon">
                    <div class="line1 no-animation"></div>
                    <div class="line2 no-animation"></div>
                    <div class="line3 no-animation"></div>
                </div>
                <span>MENU</span>
            </a>

            <!-- LOGO -->
            <a href="#" class="logo">
                <img src="images/logo2.png" alt="">
            </a>

            <!-- ICONS -->
            <div class="header-icons">
                <a href="#" class="cart-icon">
                    <i class='bx bx-shopping-bag'></i>
                </a>
                <a href="#" class="save-icon">
                    <i class='bx bx-heart'></i>
                </a>
                <a href="#" class="search-icon">
                    <i class='bx bx-search'></i>
                </a>
            </div>
        </div>

        <div class="menu-items">
            <div class="close-toggle" onclick="close_menu()">
                <div class="line1"></div>
                <div class="line2"></div>
            </div>
            <div class="menu-container">
                <ul class="menu-lists">
                    <li><a href="">Our Story</a></li>
                    <li><a href="">Handbags</a></li>
                    <li><a href="">Men</a></li>
                    <li><a href="">Women</a></li>
                    <li><a href="">Watches</a></li>
                    <li><a href="">Beauty</a></li>
                    <li><a href="">Blog</a></li>
                </ul>
                <hr>
                <div class="contact-info">
                    <h3>Ship to: <span>Philippines</span></h3>
                    <h3>Language: <span>English</span></h3>
                    <h3>Contact Number: <span>+639 152479693</span></h3>
                    <h3>Store Hours: <span>24/7 Services</span></h3>
                </div>
            </div>
        </div>
    </header>

    <!-- ACCOUNT SECTION -->

    <section class="account">
        <div class="account-container">
            <h1 class="section-title">My FLEUR SEREINE Account</h1>

            <a href="#" class="google">
                <img src="images/icons/google.png" alt="google">
                <span>CONTINUE WITH GOOGLE</span>
            </a>
            <a href="#" class="facebook">
                <img src="images/icons/fb.png" alt="facebook">
                <span>CONTINUE WITH FACEBOOK</span>
            </a>

            <p class="or">OR</p>

            <p class="continue">Continue with your email address</p>

            <p class="account-text">Sign in with your FLEUR SEREINE email and password or create a profile if you are
                new.
            </p>

            <form action="">
                <div class="input-field">
                    <input type="email" class="input" name="email" placeholder="EMAIL*">
                    <span></span>
                </div>
                <div class="input-field">
                    <input type="password" class="input" name="password" placeholder="CREATE PASSWORD*">
                </div>
                <div class="input-field">
                    <input type="text" class="input" name="firstname" placeholder="FIRST NAME*">
                </div>
                <div class="input-field">
                    <input type="text" class="input" name="lastname" placeholder="LASTNAME*">
                </div>
                <div class="input-field flex">
                    <label class="label" for="birth">DATE OF BIRTH*</label>
                    <div class="flex-group">
                        <input type="text" id="birth" class="input birth" name="month" placeholder="MONTH*">
                        <input type="text" id="birth" class="input birth" name="day" placeholder="DAY*">
                        <input type="text" id="birth" class="input birth" name="year" placeholder="YEAR*">
                    </div>
                </div>
                <div class="input-field flex-check">
                    <input type="checkbox" class="input check" name="agree" id="">
                    <span class="check-text">I would like to receive updates (including by email, SMS, social media,
                        phone, physical letter) about FLEUR SEREINE new activities, exclusive products, tailored
                        services and to have a personalized client experience based on my interests.</span>
                </div>

                <p class="choose">By choosing "Create my profile", you confirm that you have read and understood our <a
                        href="#">privacy policy</a>, and that you want to create your FLEUR SEREINE profile.</p>

                <button class="account-btn">Continue</button>
            </form>
        </div>
    </section>

    <!-- JQUERY CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- GSAP -->
    <script src="frameworks/gsap/gsap.min.js"></script>
    <!-- CUSTOM JS -->
    <script src="js/script.js"></script>

</body>

</html>