-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (133 loc) · 7.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backspace Writers</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="menu">
<div class="logo">
<a href="#"><h1>BACKSPACE WRITERS</h1></a>
<a href="#" class="hamburger-icon" onclick="showMenu()" id="show-menu"><i class="fa-sharp fa-solid fa-bars"></i></a>
</div>
<ul id="main-menu">
<a href="pages/about-us.html">
<li>About</li>
</a>
<a href="pages/blog.html">
<li>Blogs</li>
</a>
<a href="pages/about-us.html#contact-us">
<li>Contact</li>
</a>
</ul>
</nav>
<a href="#" class="call-to-action">Click Me!</a>
</div>
</header>
<header class="hero-section">
<div class="container">
<h1>Discover The Power of Words With <span class="line-break">Backspace Writers!</span></h1>
<a href="pages/about-us.html#contact-us">Send Us An Email!</a>
</div>
</header>
<section class="about">
<div class="container">
<div class="wrapper">
<div class="about-sec">
<h2 class="column-heading">
About Us
</h2>
<p>Thank you for visiting BackSpace Writers, the center of excellence! Founded in 2024, our goal has always been to provide our customers with the best and most exceptional writing..</p>
<a href="pages/about-us.html" class="learn-more">Learn More</a>
</div>
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="About Us">
</div>
</div>
</section>
<!-- SERVICE SECTION -->
<section class="services">
<div class="container">
<h2 class="column-heading">
What We Offer
</h2>
<div class="wrapper">
<div class="service">
<img src="images/article-green.png" alt="Article">
<h3>Article Writing</h3>
<p class="desc">Enhance your brand's authority with well-researched and articulate articles. Our professional writers deliver high-quality, insightful pieces that captivate and inform your target audience.</p>
</div>
<div class="service">
<img src="images/blog.png" alt="Blog">
<h3>Blog Writing</h3>
<p class="desc">Engage your audience with compelling and informative blog posts tailored to your niche. We provide expertly crafted content that resonates with readers and boosts your online presence.</p>
</div>
<div class="service">
<img src="images/handwrite-green.png" alt="Content Writing">
<h3>Content Writing</h3>
<p class="desc">Bring your stories and ideas to life with our creative writing services. Whether it's fiction, poetry, or unique content, our talented writers infuse creativity and imagination into every piece.</p>
</div>
</div>
<div class="more-btn">
<a href="pages/about-us.html#contact-us" class="more">Learn More</a>
</div>
</div>
</section>
<!-- BLOG SECTION -->
<section class="blogs" id="blogs">
<div class="container">
<h2 class="column-heading">
Explore Our latest Blogs!
</h2>
<div class="wrapper">
<div class="blog">
<a href="pages/blog/youcangetfitathome.html">
<img src="https://plus.unsplash.com/premium_photo-1670505062582-fdaa83c23c9e?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="You CAN Get Fit At Home">
<h3>You CAN Get Fit At Home</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur alias vitae facere doloribus quidem adipisci beatae tempora aliquam, quis deleniti nesciunt quae exercitationem quo reiciendis recusandae quod velit laudantium pariatur?</p>
</a>
</div>
<div class="blog">
<a href="pages/blog/dsvscs.html" class="blog-link">
<img src="https://plus.unsplash.com/premium_vector-1714618833478-93423f51d0a7?q=80&w=2456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Data Science Vs Computer Science">
<h3>Data Science Vs Computer Science</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur alias vitae facere doloribus quidem adipisci beatae tempora aliquam, quis deleniti nesciunt quae exercitationem quo reiciendis recusandae quod velit laudantium pariatur?</p>
</a>
</div>
<div class="blog">
<a href="pages/blog/computerengineeringworththehustle.html" class="blog-link">
<img src="https://img.freepik.com/free-photo/young-caucasian-repairman-sitting-using-computer-indoors-generated-by-ai_188544-37756.jpg?t=st=1722351848~exp=1722355448~hmac=c305cbbb9f177ecbf0fd9ca3f8fc9a81013e6a0d632509b27f5e8fd474413c15&w=1480" alt="Computer Engineering">
<h3>Computer Engineering</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur alias vitae facere doloribus quidem adipisci beatae tempora aliquam, quis deleniti nesciunt quae exercitationem quo reiciendis recusandae quod velit laudantium pariatur?</p>
</a>
</div>
</div>
<div class="more-btn">
<a href="pages/blog.html" class="more">Read More</a>
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<footer>
<div class="container">
<div class="social-media">
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon middle"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-facebook"></i></a>
</div>
<div class="copy-right">
<p><i class="fa-regular fa-copyright"></i> Backspace Writers 2024-Present</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>