ui-2/index.html at master · essentialism-project/ui-2 · 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
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Essentialism - Landing Page</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>

<body>
<div class="wrapper">

    // Full desktop navbar
    <nav class="desktop">
        <nav class="leftnav">
            <img class="logo" src="img/Logo%20-%20Essentialism.png" alt="green logo"><a class="active"
                                                                                        href="https://friedmacaroni.netlify.com/index.html">
            Essentialism</a>
        </nav>
        <nav class="rightnav">
            <a href="#" class="rightnav">Testimonials</a>
            <a href="#" class="rightnav">Pricing</a>
            <a href="https://friedmacaroni.netlify.com/about.html" class="rightnav">About</a>
            <a href="https://wizardly-swirles-43fdf7.netlify.com/signup1" class="rightnav">Sign Up</a>
        </nav>
    </nav>

    // Shortened mobile nav
    <nav class="mobile">
        <nav class="leftnav">
            <img class="logo" src="img/Logo%20-%20Essentialism.png" alt="green logo"><a class="active"
                                                                                        href="https://unruffled-haibt-0c1f67.netlify.com/index.html">
            Essentialism</a>
        </nav>
        <nav class="rightnav">
            <a href="https://wizardly-swirles-43fdf7.netlify.com/login" class="rightnav">Sign In</a>
            <a href="https://wizardly-swirles-43fdf7.netlify.com/signup1" class="rightnav">Sign Up</a>
        </nav>
    </nav>

    <section class="cta">
        /****** Left Side *****/
        <article>
            <h1>Find your life meaning</h1>
            <h2>Focus on the Essentials</h2><br>
            <a href="https://wizardly-swirles-43fdf7.netlify.com/signup1">
                <div class="button">Find
                your
                values</div>
            </a>
            <img class="cta-img" src="img/undraw_contemplating_8t0x.svg">
        </article>

        <aside>
            <form>
                <fieldset>
                    <div class="form-group">
                        <label for="user">Username</label><br>
                        <input type="text" name="username" id="user">
                    </div>
                    <br>
                    <div class="form-group">
                        <label for="pass">Password</label><br>
                        <span><input type="text" name="password" id="pass"><i class="fas fa-eye"></i></span>
                        <a href="#"><p class="smaller">forgot your password?</p></a>
                    </div>
                    <br><br>
                    <input class="button form-btn" type="submit" value="Sign In">
                </fieldset>
            </form>
        </aside>
    </section>

    <section class="about-tabs">
        <div class="tabs">
            // Tab Titles
            <div class="tabs-links">
                <div class="tabs-link tabs-link-selected" data-tab="growth">Grow</div>
                <div class="tabs-link" data-tab="organize">Organize</div>
                <div class="tabs-link" data-tab="matters">Do
                what
                matters</div>
                <div class="tabs-link" data-tab="answers">Answers</div>
            </div>

            // Tab Contents
            <div class="tabs-item tabs-item-selected" data-tab="growth">
                <div class="tabs-item-description">
                    <img src="img/undraw_going_up_ttm5.png">
                    <p>Growth is more than doing more. <br> Essentialism will help you grow as a person. Doing more of
                        what is important to you and less of what is wasting your time.<br><br>Do better. Be better</p>
                </div>
            </div>
            <div class="tabs-item tabs-item" data-tab="organize">
                <div class="tabs-item-description">
                    <img src="img/undraw_task_31wc.png">
                    <p>Organizing your life should be a top priority. Essentialism will help you create a system to keep
                        all of your activities in check and even help you get rid of those things that are wasting your
                        time.</p>
                </div>
            </div>
            <div class="tabs-item tabs-item" data-tab="matters">
                <div class="tabs-item-description">
                    <img src="img/undraw_hang_out_h9ud.png">
                    <p>Stop wasting time with things that don't matter. Focus on the things that bring you happiness and
                        joy. Spend your time the way you want to. Don't be controlled by all the noise in your life.</p>
                </div>
            </div>
            <div class="tabs-item tabs-item" data-tab="answers">
                <div class="tabs-item-description">
                    <img src="img/undraw_questions_75e0.png">
                    <p>Find the answers you have been searching for with essentialism. What is important to me? How can
                        I stop doing all these things? Once you identify y our values, it's so much easier to focus on
                        what is really important in your life.</p>
                </div>
            </div>
        </div>
    </section>


    <div class="testimonials">
        <div class="quote top-quote">
            <img class="avatar" src="img/6by7k29n.png">
            <p>Essentialism has been a game changer in my life. I was able to revive my relationships and still have
                time for myself.</p>
        </div>
        <div class="quote bottom-quote">
            <p>I was constantly stressed. I had too much on my plate. Essentialism showed me what things I didn't
                need
                to be doing. It's a life saver!</p>
            <img class="avatar" src="img/p1agylup.png">
        </div>
    </div>

    <div class="features">
        <div class="fblock">
            <div class="block">
                <img src="img/1.png" alt="Sample photo">
                <p>Figure out what is really important to you. With the help of Essentialism, you can identify what is
                    really important and base your life around it.</p>
            </div>
        </div>
        <div class="fblock">
            <div class="block">
                <img src="img/2.png" alt="Sample photo">
                <p>Discover a new way to organize your life. Stop being driven by the world around you and take the
                    wheel.</p>
            </div>
        </div>
        <div class="fblock">
            <div class="block">
                <img src="img/3.png" alt="Sample photo">
                <p>Become the person you want to become by doing the things that you want to do. We will show you how to
                    focus on what really matters.</p>
            </div>
        </div>

    </div>
    </section>

    <footer>
        <div class="foot footLeft">
            <p>Privacy Policy</p>
            <p>Terms and Conditions</p>
            <p>Cookie Policy</p>
        </div>
        <div class="foot footCtr">
            <p>Find us on:</p>
            <ul class="foot social">
                <li><a href="#"><i class="fab fa-2x fa-instagram" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fab fa-2x fa-facebook-square" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fab fa-2x fa-twitter-square" aria-hidden="true"></i></a></li>
            </ul>
            <p> Essentialism 2019. All rights reserved.</p>
        </div>
        <div class="foot footRight">
            <p>Contact Us</p>
            <p>FAQs</p>
            <p>About Us</p>
        </div>

    </footer>


</div>

<script src="js/tabs.js"></script>
<script src="js/index.js"></script>
</body>
</html>