Debugit/index.html at main · Lavina-11/Debugit · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

</head>

<body>
    <header>
        <nav>
            <a href="#" class="logo">unboreME</a>
            <div class="navbar">
                <ul>
                    <li><a href="welcome.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="activity.html">Activities</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#"><i class="fas fa-user" id="login_user"></i></a></li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="home">
        <div class="wrapper">
            <div class="static_text">Welcome to unboreME</div>
            <div class="wrapper1">
                <div class="static_text">Learn </div>
                <ul class="dynamic_text">
                    <li><span>Cooking</span></li>
                    <li><span>Drawing</span></li>
                    <li><span>Knitting</span></li>
                    <li><span>Coding</span></li>
                </ul>
            </div>
            <div class="static_text1">Tired of the same old routine? Tell us what you like, and we'll</div>
            <div class="static_text1">find unexpected alternatives, digital tools, and resources to spark</div>
            <div class="static_text1">your creativity and get you started!</div>
        </div>
    </div>

    <section class="trending_act">
        <h1 class="heading">TRENDING ACTIVITIES</h1>
        <div class="container">
            <div class="card">
                <div class="imgbx">
                    <img src="images/a1.png" alt="">
                </div>
                <div class="content">
                    <h2>Dive into Swimming</h2>
                    <p>Cool down and have fun with a refreshing dip in a pool, lake, or ocean. Swimming is a fantastic
                        way
                        to cool off during the hot summer months. It provides a full-body workout, keeps you cool, and
                        can
                        be enjoyed by people of all ages and abilities.</p>
                </div>
            </div>


            <div class="card">
                <div class="imgbx">
                    <img src="images/a2.png" alt="">
                </div>
                <div class="content">
                    <h2>Unwind with a Captivating Read</h2>
                    <p>Escape the digital world and get lost in a good book. Reading allows you to travel to new worlds,
                        learn about different cultures, and spark your imagination. Find a cozy spot with a refreshing
                        summer drink, pick up a captivating novel, or explore a new genre. Reading is a simple yet
                        powerful
                        way to unwind, reduce stress, and stimulate your mind.</p>
                </div>
            </div>


            <div class="card">
                <div class="imgbx">
                    <img src="images/a3.png" alt="">
                </div>
                <div class="content">
                    <h2>Find Your Inner Calm with Meditation</h2>
                    <p>Silence the summer chaos and de-stress with meditation. This practice involves focusing your
                        attention and quieting your mind, promoting relaxation and stress reduction. There are many
                        meditation techniques to explore, from guided meditations to mindfulness exercises. Find a quiet
                        spot, close your eyes, and focus on your breath to experience the calming benefits of
                        meditation.
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="imgbx">
                    <img src="images/a4.png" alt="">
                </div>
                <div class="content">
                    <h2>Get Artsy with Pottery</h2>
                    <p> Molding clay into unique shapes is a rewarding and relaxing activity that can be enjoyed by
                        beginners and experienced artists alike. Sign up for a pottery class, visit a local studio, or
                        invest in a home pottery kit to get started. Feel the satisfaction of creating something
                        beautiful
                        with your own hands.</p>
                </div>
            </div>
        </div>
    </section>


    <section class="contact_us">
        <div class="box">
            <div class="item">
                <div class="contact">
                    <div class="first-text">Let's get in touch</div>
                    <img src="images/contact us.jpg" alt="" class="image">
                    <div class="social-links">
                        <span class="second-text">Connect with us:</span>
                        <ul class="social-media">
                            <li><a href="#"> <i class='bx bxl-facebook'></i></a></li>
                            <li><a href="#"> <i class='bx bxl-twitter'></i></i></a></li>
                            <li><a href="#"> <i class='bx bxl-youtube'></i></a></li>
                            <li><a href="#"> <i class='bx bxl-linkedin'></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="submit-form">
                    <h4 class="third-text text">Contact Us</h4>
                    <form action="">
                        <div class="input-box">
                            <input type="text" class="input" required>
                            <label for="">Name</label>
                        </div>
                        <div class="input-box">
                            <input type="email" class="input" required>
                            <label for="">Email</label>
                        </div>
                        <div class="input-box">
                            <input type="tel" class="input" required>
                            <label for="">Phone</label>
                        </div>
                        <div class="input-box">
                            <textarea name="" class="input" required id="message" cols="30" rows="10"></textarea>
                            <label for="">Message</label>
                        </div>
                        <input type="submit" class="btn1" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </section>


</body>

</html>