-
Notifications
You must be signed in to change notification settings - Fork 5
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (173 loc) · 7.7 KB
/
index.html
File metadata and controls
181 lines (173 loc) · 7.7 KB
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
<!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>Workshop Riset Informatika</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" />
<!-- Fav Icon -->
<link rel="shortcut icon" href="https://www.pngfind.com/pngs/m/685-6854970_react-logo-png-png-download-logo-png-reactjs.png" />
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrapper">
<div class="logo"><a href="#">WRI</a></div>
<div class="menu">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="portofolio.html">Portofolio</a></li>
</ul>
</div>
</div>
<img src="img/menu.png" alt="" />
</nav>
<!-- Header -->
<div class="wrapper col-sm-12">
<section id="section-1">
<img src="img/undraw_happy_music_g6wc.svg" alt="" />
<div class="column col-sm-12">
<h1 class="title col-sm-12">3 Ways To Be Happy Now</h1>
<p class="description-2 col-sm-12">
How to be happy? Well, there are many ways to be happy. But there are only 7 ways to be happy now. As a human, we have to be happy because if we not happy, we will be unhappy. So, we have to be happy now.
</p>
<a href="https://github.com/alizul01/Web-Project-ReactJSGroup-WRI" class="btn">About Us</a>
</div>
</section>
<section id="section-2">
<div class="column">
<h2 class="sub-heading" style="margin-top: 50px">How to be happy?</h2>
<p class="description-2">Before you embark on your happiness journey, it's helpful to list what makes you happy and what doesn't. After you make this list, you'll better understand what you need to work on to bring more happiness and peace to your life.
Below is an example of a list, yours can, of course, look different from this one. This is just to help you get started.</p>
<a href="#" class="btn">Read More</a>
</div>
<img src="img/undraw_happy_feeling_slmw.svg" alt="" class="section-2-img" />
</section>
<section class="section-3">
<div class="column">
<div class="contain-flexbox">
<div class="card">
<h2 class="head-card">A</h2>
<h3 class="subhead-card">Enjoy Every Moment</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
<h6><a href="#">LEARN MORE</a></h6>
</div>
<div class="card" style="background-color: #456080">
<h2 class="head-card">B</h2>
<h3 class="subhead-card;">Schedule in Leisure Time</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
<h6><a href="#">LEARN MORE</a></h6>
</div>
<div class="card">
<h2 class="head-card">C</h2>
<h3 class="subhead-card">Express Our Gratitude</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
<h6><a href="#">LEARN MORE</a></h6>
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="page1"></div>
<div class="column">
<h2 class="sub-heading" style="margin-top: 50px">25 Habits to Add Your Routine</h2>
<p class="description-2">Happiness looks different for everyone. For you, maybe it’s being at peace with who you are. Or having a secure network of friends who accept you unconditionally. Or the freedom to pursue your deepest dreams. Regardless of your version of true happiness, living a happier, more satisfied life is within reach. A few tweaks to your regular habits can help you get there.</p>
<div class="round"></div>
<a href="#" class="btn">Read More</a>
</div>
<img src="img/pict.png" height="600" width="auto" alt="" class="" />
</section>
<section class="section-7">
<img class="img-section-7" src="img/image1.png" alt="" />
<div class="title-wrap">
<div class="title-section-7">
<h4>Daily Habits</h4>
</div>
<div class="isi">
<ol>
<li>Smile</li>
<li>Exercise</li>
<li>Get plenty of sleep</li>
<li>Eat with mood in mind</li>
<li>Be grateful</li>
</ol>
</div>
<div class="wrapper-title">
<div class="judul2">Daily Habits</div>
<p class="description-2">
There are some key phrases that are useful to learn in English in order to explain your daily routine to another person. In order to introduce these phrases, let me take you through a typical day in my life.
</p>
</div>
<!-- button -->
<div class="wrapper-title">
<a href="#" class="btn">Read More</a>
</div>
</div>
</section>
<section class="section-5 col-sm-12">
<div class="list">
<div class="item-list">
<span class="number">1</span>
<span class="text">Minimize Distractions</span>
</div>
<div class="item-list">
<span class="number">2</span>
<span class="text">Follow a Morning Ritual</span>
</div>
<div class="item-list">
<span class="number">3</span>
<span class="text">Prioritize Your Day</span>
</div>
<div class="item-list">
<span class="number">4</span>
<span class="text">Get Enough Rest</span>
</div>
<div class="item-list">
<span class="number">5</span>
<span class="text">ut First Things First</span>
</div>
<div class="item-list">
<span class="number">6</span>
<span class="text">Take Care of Yourself</span>
</div>
</div>
<div class="hero">
<div class="box">
<div class="rounded-image">
<img src="img/1.png" alt="" />
</div>
<p class="title">React JS</p>
<p class="text">
This repository is a mini-project from the Informatics Research Workshop (WRI) community of the ReactJS group. This website contains 3 Ways to have fun and a portfolio of some of the group members.
</p>
</div>
</div>
</section>
</div>
<!-- Section 6 -->
<section class="section-6 col-sm-12">
<div class="title">
<p>Subscribe</p>
<div class="line"></div>
</div>
<form action="">
<input class="input" type="email" name="email" id="email" placeholder="Enter a valid email address" />
<input class="input submit" type="submit" value="SUBMIT" />
</form>
<div class="text">
<p>Copyright 2022</p>
</div>
<div class="icon">
<i class="lab la-facebook-f" wid></i>
<i class="lab la-twitter"></i>
<i class="lab la-instagram"></i>
</div>
</section>
<!-- Footer -->
<!-- Section 2 -->
<script src="js/script.js"></script>
</body>
</html>