-
Notifications
You must be signed in to change notification settings - Fork 1
/
html.html
148 lines (134 loc) · 6.71 KB
/
html.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Coding Club Web Development Task</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='css.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#"class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class ="search-btn" href="#">
<i class="fa fa-search"></i>
</a>
</div>
</ul>
</header>
<section>
<img src="stars.png" id="stars">
<img src="moon.png" id="moon">
<img src="mountains_behind.png" id="mountains_behind">
<h2 id="text">Moon Light</h2>
<a href="#sec" id="btn">Explore</a>
<img src="mountains_front.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<div class="column1">
<h2>Among the Stars</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem quibusdam impedit ipsum nulla quos. Cum, repudiandae. Incidunt eos animi modi nam ut unde qui sit, molestias quo odio sapiente voluptatibus?</p>
</div>
<div class="column1">
<h2>Beyond the Sky</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In illo praesentium placeat voluptas quas aliquid officia velit! Beatae veniam perspiciatis obcaecati consequatur amet exercitationem quas blanditiis, temporibus, iusto libero vitae.</p>
</div>
<div class="column1">
<h2>Seek the Moon</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio culpa eligendi quasi exercitationem omnis, nesciunt eius sit illum et dicta consectetur, impedit autem molestiae, aliquid veniam consequuntur nihil architecto voluptatum!</p>
</div>
</div>
<div class="wrapper">
<h1>About us</h1>
<div class="our_team">
<div class="team_member">
<div class="member_img">
<img src="https://i.imgur.com/2Necikc.png" alt="our_team">
<div class="social_media">
<div class="facebook item"><i class="fa fa-facebook-f"></i></div>
<div class="twitter item"><i class="fa fa-twitter"></i></div>
<div class="instagram item"><i class="fa fa-instagram"></i></div>
</div>
</div>
<h3>john wright</h3>
<span>CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione perspiciatis, error deleniti quaerat beatae doloribus incidunt excepturi. Fugit deleniti accusantium neque hic quidem voluptatibus cumque.</p>
</div>
<div class="team_member">
<div class="member_img">
<img src="https://i.imgur.com/JzUIF4o.png" alt="our_team">
<div class="social_media">
<div class="facebook item"><i class="fa fa-facebook-f"></i></div>
<div class="twitter item"><i class="fa fa-twitter"></i></div>
<div class="instagram item"><i class="fa fa-instagram"></i></div>
</div>
</div>
<h3>barbara mori</h3>
<span>Accountant</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione perspiciatis, error deleniti quaerat beatae doloribus incidunt excepturi. Fugit deleniti accusantium neque hic quidem voluptatibus cumque.</p>
</div>
<div class="team_member">
<div class="member_img">
<img src="https://i.imgur.com/Ctwf8HA.png" alt="our_team">
<div class="social_media">
<div class="facebook item"><i class="fa fa-facebook-f"></i></div>
<div class="twitter item"><i class="fa fa-twitter"></i></div>
<div class="instagram item"><i class="fa fa-instagram"></i></div>
</div>
</div>
<h3>harry dickens</h3>
<span>Product Manager</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione perspiciatis, error deleniti quaerat beatae doloribus incidunt excepturi. Fugit deleniti accusantium neque hic quidem voluptatibus cumque.</p>
</div>
<div class="team_member">
<div class="member_img">
<img src="https://i.imgur.com/A1Fjq0d.png" alt="our_team">
<div class="social_media">
<div class="facebook item"><i class="fa fa-facebook-f"></i></div>
<div class="twitter item"><i class="fa fa-twitter"></i></div>
<div class="instagram item"><i class="fa fa-instagram"></i></div>
</div>
</div>
<h3>sammy louise</h3>
<span>product analyst</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione perspiciatis, error deleniti quaerat beatae doloribus incidunt excepturi. Fugit deleniti accusantium neque hic quidem voluptatibus cumque.</p>
</div>
</div>
<img src="background.jpg" id="background" >
<div class="overlay"></div>
</div>
<script src="javascript.js"></script>
</body>
<footer>
<div class="social">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-reddit"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
</div>
<div class="container" >
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
</div>
<div class="container">
<input class = "button" type="submit" value="Subscribe">
</div>
</form>
<img src="background2.jpg">
<div class="overlay"></div>
</footer>
</html>