-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (155 loc) · 6.88 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Tomatoes</title>
<link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,800&display=swap subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navigation">
<div class="container">
<ul>
<li>
<a href="#">about us</a>
<ul>
<li><a href="#">our team</a></li>
<li><a href="#">our history</a></li>
<li><a href="#">our clients</a></li>
<li><a href="#">our motto</a></li>
</ul>
</li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</nav>
<header class="splash">
<div class="splash-inner">
<h1 class="page-title">We are <span>Crazy Tomatoes</span><br/>It's great to see you</h1>
<h2 class="page-subtitle">Ready for the journey?</h2>
<a href="#" class="btn btn-one">Click me</a>
</div>
</header>
<section class="services">
<div class="container">
<h1 class="section-title section-title-colored">our services</h1>
<div class="row">
<div class="box box-services">
<h2 class="section-subtitle">making</h2>
<span class="number">1</span>
<p>This is a nice word.</p>
<p>From Middle English making, from Old English macung (“making”), equivalent to make + -ing. Cognate with Dutch making (“making”), Old High German machunga.</p>
<a href="#" class="btn btn-two">read more</a>
</div>
<div class="box box-services">
<h2 class="section-subtitle">doing</h2>
<span class="number">2</span>
<p>This is also quite nice.</p>
<p>A deed or action, especially when somebody is held responsible for it. The English verb, do, which may serve as an auxiliary verb.</p>
<a href="#" class="btn btn-three">read more</a>
</div>
<div class="box box-services">
<h2 class="section-subtitle">thinking</h2>
<span class="number">3</span>
<p>I like this one as well.</p>
<p>Although thinking is an activity of an existential value for humans, there is still no consensus as to how it is adequately defined or understood.</p>
<a href="#" class="btn btn-four">read more</a>
</div>
</div>
</div>
</section>
<section class="projects">
<div class="container">
<h1 class="section-title section-title-colored">our projects</h1>
<div class="row">
<div class="box box-projects">
<div class="image-project">
<img src="https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg" alt= "love"/>
</div>
<div class="image-description">
<h2 class="section-subtitle">love</h2>
<p>Love encompasses a range of strong and positive emotional and mental states, from the most sublime virtue to the simplest pleasure.</p>
<p>The end.</p>
<a href="#" class="btn btn-five">read more</a>
</div>
</div>
<div class="box box-projects">
<div class="image-project">
<img src="https://images.pexels.com/photos/1068523/pexels-photo-1068523.jpeg" alt="like"/>
</div>
<div class="image-description">
<h2 class="section-subtitle">like</h2>
<p>In English, the word like has a very flexible range of uses, ranging from conventional to non-standard.</p>
<p>This is the end.</p>
<a href="#" class="btn btn-five">read more</a>
</div>
</div>
<div class="box box-projects">
<div class="image-project">
<img src="https://images.pexels.com/photos/343/man-couple-people-woman.jpg" alt="hate"/>
</div>
<div class="image-description">
<h2 class="section-subtitle">hate</h2>
<p>Hatred or hate is an emotion. Hatred could invoke feelings of animosity, anger, or resentment.</p>
<p>End of story.</p>
<a href="#" class="btn btn-five">read more</a>
</div>
</div>
<div class="box box-projects">
<div class="image-project">
<img src="https://images.pexels.com/photos/256658/pexels-photo-256658.jpeg" alt="sad man"/>
</div>
<div class="image-description">
<h2 class="section-subtitle">sadness</h2>
<p>Sadness is an emotional pain associated with, or characterized by, feelings of disadvantage, loss, and sorrow.</p>
<p>That's it.</p>
<a href="#" class="btn btn-five">read more</a>
</div>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<h1 class="section-title">contact us</h1>
<div class="row">
<form class="box box-form">
<label for="name">Your name</label>
<input type="text" id="name" placeholder="Your name" required/>
<label for="email">Your e-mail</label>
<input type="email" id="e-mail" placeholder="Your e-mail" required/>
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="Subject" required/>
<label for="message">Type your message here</label>
<textarea id="message" rows="5" cols="40" placeholder="Type your message here" required></textarea>
<a href="#" class="btn btn-one">submit</a>
</form>
<div class="box box-address">
<ul>
<li><h2 class="section-subtitle-smaller">happiness engineer</h2></li>
<li>Mary Strawberry</li>
<li><h2 class="section-subtitle-smaller">address</h2></li>
<li>Nice Street No. 1</li>
<li>Nice City</li>
<li>Neverland</li>
<li><h2 class="section-subtitle-smaller">phone</h2></li>
<li>+123456789</li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i>Facebook</a></li>
<li><a href="#"><i class="fab fa-instagram"></i>Instagram</a></li>
<li><a href="#"><i class="fab fa-behance"></i>Behance</a></li>
</ul>
</footer>
</body>
</html>