-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
94 lines (81 loc) · 5.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silverback Technologies</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<img src="./images/logo.jpg" alt="" srcset="">
</div>
<div class="links">
<ul>
<li> <a href='#'> Home </a></li>
<li> <a href='#about'> About </a></li>
<li> <a href='#services'> Services </a></li>
<li> <a href='#contact'> Contact </a></li>
</ul>
</div>
</div>
<section class="banner">
<p>Welcome to Silverback Technologies </p>
<button class="about-btn"> About</button>
<div class="overlay">
</div>
<div class="img-container">
<img src="./images/banner.jpg" alt="" srcset="">
</div>
</section>
<section class="about" id="about">
<div class="heading">
<h3>About Us</h3>
</div>
<div class="about-info">
<div class="about-image">
<img src="./images/pexels-mikhail-nilov-7988079.jpg" alt="" srcset="">
</div>
<div class="about-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, nulla. Natus molestiae, ipsum sed earum ea fuga, id aliquam laborum maxime rerum architecto libero, nihil tempore recusandae unde cum harum dolor? Amet, sequi impedit aperiam consequuntur nesciunt possimus eum quisquam, quos velit corrupti tempore eius rerum nulla reprehenderit. Eveniet, distinctio!</p>
<div>
</div>
</section>
<section class="services" id="services">
<services class="heading">
<h3>Our Services</h3>
</services>
<div class="services-info">
<div class="service-detail">
<h3>Cyber Security</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat harum quod dolor expedita necessitatibus vero atque cupiditate reiciendis nostrum. Blanditiis distinctio corrupti, adipisci explicabo hic laboriosam id excepturi fugit. Consequatur pariatur fugit nobis rem obcaecati aut ea! Doloremque iure, earum aperiam veritatis optio ex corrupti, vel dolorem eaque quod quidem corporis provident iste quisquam id debitis ipsa, expedita perferendis sunt. Obcaecati corrupti dolorem soluta quasi enim impedit incidunt recusandae a dolore unde perspiciatis praesentium, eligendi minus nam possimus. Doloremque quisquam, necessitatibus non mollitia, sint ipsam dolorem ad dolor dolore cumque quibusdam? Ut labore quidem temporibus atque iusto suscipit vel dicta nesciunt in libero! Corporis ad hic optio dolorum est inventore nemo. Architecto ea autem aspernatur dignissimos dolores nostrum tempora delectus.</p> </div>
<div class="service-detail">
<h3>Software Development</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore obcaecati nisi, nihil aut aliquid veniam a, corporis laboriosam ea non voluptate. Atque, nobis nihil consequatur fuga ab quibusdam obcaecati? Laboriosam expedita accusamus odio aut magni facilis fuga debitis qui! Odit exercitationem nulla unde! Maiores magni voluptatibus unde dolorem suscipit repudiandae in enim est, aut iure nobis! Odit ullam rerum quaerat alias nemo. Laboriosam alias optio est necessitatibus atque, facilis repudiandae corporis! Quia delectus itaque facilis dolorum numquam ipsam at? Esse commodi unde reiciendis sunt eos officia excepturi tenetur, tempore placeat recusandae, est nihil officiis veritatis nesciunt doloremque autem et a. Quos deserunt, inventore quod aperiam itaque maiores hic earum? Quas eveniet iste esse dolor nulla excepturi dolorem quia harum ullam?</p> </div>
<div class="service-detail">
<h3>Networking</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi iure facilis atque veniam dignissimos amet soluta maiores eum omnis veritatis rerum voluptatum quaerat ullam pariatur saepe, corrupti odio cumque aut ea quam? Explicabo esse culpa consequuntur, reprehenderit voluptates fugit porro quibusdam dolorum sed praesentium corrupti recusandae totam eos et sint error illum sapiente aliquam quasi. Possimus corporis incidunt atque magnam hic veritatis quam eaque, ipsum optio accusamus sed dolores vitae mollitia enim natus eum esse laboriosam iusto nisi, autem consequuntur molestias officia. Nobis, praesentium? Odio doloribus ratione in quam, facilis nisi voluptate ut doloremque, harum voluptatum ullam provident distinctio, officiis beatae architecto numquam tempore porro voluptates! Repellendus rem, consequuntur veniam aspernatur quo dolorum, nemo, id quaerat ad expedita accusamus fugit?</p> </div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-form">
<form method="get">
<!-- name, email, message ,btn-->
<h4>Contact Us</h4>
<label for="name">Name: </label>
<input type="text" name="name" id="name"> <br> <br>
<label for="email">Email: </label>
<input type="text" name="email" id="email"> <br> <br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" value="Send Message">
</form>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.746985216337!2d36.87898237345754!3d-1.3278024356697387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f13040cca3027%3A0xd710b904557488db!2sThe%20Imaara%20Shopping%20Mall!5e0!3m2!1sen!2ske!4v1695627866490!5m2!1sen!2ske" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
</body>
</html>