-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (91 loc) · 4.38 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
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="./css/master.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
</head>
<body>
<header class="header">
<div class="header-background"></div>
<div class="top-bar">
<a href=""><h1>Logo</h1></a>
<nav id="nav_list" class="nav-list">
<a href="" class="bar-item">Home</a>
<a href="" class="bar-item">About Us</a>
</nav>
<button id="btn" class="toggle-button" onclick="toggleNav()"><span></span><span></span><span></span></button>
</div>
<div class="banner-container">
<h2 class="banner-title">Welcome</h2>
<div class="featured">
<article class="featured-box">
<i class="fas fa-camera-retro fa-3x"></i>
<h3>Magna</h3>
<p class="featured-description">Eget egestas purus viverra lectus mag sit amet est mag ornare Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, in, incidunt accusantium quae autem voluptatum facilis, numquam quam id eveniet beatae pariatur esse alias aperiam sit nesciunt expedita quos asperiores!</p>
</article>
<span class="division"></span>
<article class="featured-box">
<i class="fas fa-user fa-3x"></i>
<h3>Dolore</h3>
<p class="featured-description">Ornare lectus sit amet est lorem, impsum lorem ornare lectus purus viverra lectus mag sit amet</p>
</article>
<span class="division"></span>
<article class="featured-box">
<i class="fas fa-puzzle-piece fa-3x"></i>
<h3>Lectus Proin</h3>
<p class="featured-description">Sed felis eget velit egesta mag sit impsum amet sit est mag ornare lorem purus</p>
</article>
</div>
<button class="btn-info btn-blue">Get Started</button>
</div>
</header>
<main class="articles-showcase">
<article class="article-box">
<img src="./img/article-01.jpg" class="article-image" />
<h3 class="article-title">Lectus Proin Incidunt Minus?</h3>
<p class="article-description">Ornare lectus sit amet est pariatur nihil totam consectetur, perferendis vero sit amet consectetur adipisicing</p>
<button class="btn-info btn-blue">Read More</button>
</article>
<article class="article-box">
<img src="./img/article-03.jpg" class="article-image" />
<h3 class="article-title">Lectus Proin</h3>
<p class="article-description">Sed felis eget velit asperiores optio incidunt minus? Quas distinctio voluptatibus totam.</p>
<button class="btn-info btn-blue">Read More</button>
</article>
<article class="article-box">
<img src="./img/article-02.jpg" class="article-image" />
<h3 class="article-title">Lectus Proin Sed fel eget velit asperiores optio incidunt minus?</h3>
<p class="article-description">Sed felis eget velit asperiores optio incidunt minus? Quas distinctio vol upt optio incidunt minus? lorem impsum Nulla non eu consequat ullamco eiusmod. Nostrud adipisicing laboris laboris nulla incididunt ut irure consequat laborum. Elit aliqua amet veniam adipisicing sint ipsum proident mollit nisi reprehenderit voluptate enim sunt tempor. Duis aliqua eiusmod cupidatat nostrud cillum. Tempor minim enim sunt laborum elit non proident in mollit pariatur officia.</p>
<button class="btn-info btn-blue">Read More</button>
</article>
</main>
<footer class="contact">
<form class="contact-form" action="">
<fieldset class="contact-field">
<legend><h3>Contact Us</h3></legend>
<div class="input-group">
<div class="input-item">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</div>
<span class="footer-spacing"></span>
<div class="input-item">
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</div>
</div>
<div>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<div class="footer-center">
<button class="btn-info btn-white">Send</button>
</div>
</fieldset>
</form>
<div class="footer-center">copyright © 2021 Untitled. All rights reserved</div>
</footer>
<script src="./script/main.js"></script>
</body>
</html>