Skip to content

Commit bab3595

Browse files
daviskamaudaviskamau
authored
sass
1 parent 7f01555 commit bab3595

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+23322
-0
lines changed

Diff for: ‎Template-05/article.html

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="css/font-awesome.css" />
14+
<link rel="stylesheet" href="css/bootstrap.css" />
15+
<link rel="stylesheet" href="css/styles.css" />
16+
<link rel="icon" href="images/favicon.png" />
17+
<title>Yavin Office Design</title>
18+
</head>
19+
<body>
20+
<nav class="navbar navbar-expand-lg sticky-top navbar-light">
21+
<div class="container">
22+
<a class="navbar-brand" href="index.html">
23+
<img src="images/logo.svg" alt="" width="124" />
24+
</a>
25+
<button
26+
class="navbar-toggler"
27+
type="button"
28+
data-bs-toggle="collapse"
29+
data-bs-target="#navbarNavDropdown"
30+
aria-controls="navbarNavDropdown"
31+
aria-expanded="false"
32+
aria-label="Toggle navigation"
33+
>
34+
<span class="navbar-toggler-icon"></span>
35+
</button>
36+
<div class="collapse navbar-collapse" id="navbarNavDropdown">
37+
<ul class="navbar-nav ms-auto">
38+
<li class="nav-item">
39+
<a class="nav-link" aria-current="page" href="index.html">Home</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="#details">Details</a>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link" href="#services">Services</a>
46+
</li>
47+
<li class="nav-item">
48+
<a class="nav-link" href="#projects">Projects</a>
49+
</li>
50+
<li class="nav-item">
51+
<a
52+
class="nav-link btn btn-outline-secondary px-4 mx-4"
53+
href="#contact"
54+
>Contact Us</a
55+
>
56+
</li>
57+
</ul>
58+
</div>
59+
</div>
60+
</nav>
61+
62+
<!-- Header -->
63+
<header class="bg-light py-6">
64+
<div class="container">
65+
<h1>Article Details</h1>
66+
</div>
67+
</header>
68+
69+
<!-- Image -->
70+
<section>
71+
<div class="container">
72+
<img src="images/article-details-large.jpg" alt="" class="w-100 my-6" />
73+
</div>
74+
</section>
75+
76+
<!-- Basic Text -->
77+
<section class="pt-4">
78+
<div class="container">
79+
<div class="row">
80+
<div class="col-lg-10 offset-lg-1">
81+
<p>
82+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat
83+
eligendi, labore pariatur repudiandae consectetur totam eum
84+
voluptatem blanditiis nulla architecto fugiat tempore obcaecati
85+
molestias porro! Nisi ullam inventore eveniet quas.
86+
</p>
87+
88+
<p class="mb-4">
89+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
90+
architecto assumenda cum nemo omnis velit nobis, nihil veniam esse
91+
ratione.
92+
</p>
93+
94+
<h2 class="mb-3">Advantages of working with this company</h2>
95+
96+
<p>
97+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat
98+
eligendi, labore pariatur repudiandae consectetur totam eum
99+
voluptatem blanditiis nulla architecto fugiat tempore obcaecati
100+
molestias porro! Nisi ullam inventore eveniet quas.
101+
</p>
102+
103+
<p class="mb-4">
104+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
105+
architecto assumenda cum nemo omnis velit nobis, nihil veniam esse
106+
ratione.
107+
</p>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
113+
<!-- Cards -->
114+
<section class="my-4">
115+
<div class="container">
116+
<div class="row">
117+
<div class="col-md-4">
118+
<div class="card">
119+
<div class="card-body">
120+
<h5>
121+
<i class="fas fa-check text-secondary"></i> High Quality
122+
Service
123+
</h5>
124+
<p>
125+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
126+
culpa provident, aliquam officia expedita recusandae!
127+
</p>
128+
</div>
129+
</div>
130+
</div>
131+
<div class="col-md-4">
132+
<div class="card my-3">
133+
<div class="card-body">
134+
<h5>
135+
<i class="fas fa-check text-secondary"></i> Prompt Timely
136+
Service
137+
</h5>
138+
<p>
139+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
140+
culpa provident, aliquam officia expedita recusandae!
141+
</p>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="col-md-4">
146+
<div class="card">
147+
<div class="card-body">
148+
<h5>
149+
<i class="fas fa-check text-secondary"></i> Skilled Team
150+
Involved
151+
</h5>
152+
<p>
153+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
154+
culpa provident, aliquam officia expedita recusandae!
155+
</p>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</section>
162+
163+
<!-- Gray Box -->
164+
<section class="my-5">
165+
<div class="row">
166+
<div class="col-lg-8 offset-lg-2">
167+
<div class="card bg-light rounded-0 border-0 fs-6">
168+
<div class="card-body p-4">
169+
<h3>We Know What Our Customers Want</h3>
170+
<p>
171+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
172+
Voluptatum at optio quod tempora cupiditate fugit dolores quam,
173+
fuga ipsam aliquid rerum provident. Possimus, velit voluptatum?
174+
Magnam hic ab doloremque ipsam?
175+
</p>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</section>
181+
182+
<footer class="footer bg-light py-6">
183+
<div class="container">
184+
<div class="row">
185+
<div class="col-md-4 my-3">
186+
<h6>About Yavin</h6>
187+
<p>
188+
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
189+
Molestiae, possimus! Similique asperiores aliquid accusantium
190+
laudantium.
191+
</p>
192+
</div>
193+
<div class="col-md-4 my-3">
194+
<h6>Links</h6>
195+
<ul class="list-unstyled">
196+
<li>
197+
Important: <a href="#">Terms & Conditions</a>,
198+
<a href="#">Privacy Policy</a>
199+
</li>
200+
<li>
201+
Useful: <a href="#">Icon Library</a>,
202+
<a href="#">Illustrations</a>
203+
</li>
204+
<li>
205+
Menu: <a href="#">Home</a>, <a href="#details">Details</a>,
206+
<a href="#services">Services</a>, <a href="#contact">Contact</a>
207+
</li>
208+
</ul>
209+
</div>
210+
<div class="col-md-4 my-3">
211+
<div class="mb-4">
212+
<a href="#" class="text-decoration-none">
213+
<i class="fab fa-facebook fa-3x text-dark mx-2"></i>
214+
</a>
215+
<a href="#" class="text-decoration-none">
216+
<i class="fab fa-twitter fa-3x text-dark mx-2"></i>
217+
</a>
218+
<a href="#" class="text-decoration-none">
219+
<i class="fab fa-instagram fa-3x text-dark mx-2"></i>
220+
</a>
221+
<a href="#" class="text-decoration-none">
222+
<i class="fab fa-pinterest fa-3x text-dark mx-2"></i>
223+
</a>
224+
</div>
225+
<p>
226+
We would love to hear from you
227+
<a href="mailto:[email protected]"
228+
><strong>[email protected]</strong></a
229+
>
230+
</p>
231+
</div>
232+
</div>
233+
</div>
234+
</footer>
235+
236+
<button id="to-top" class="to-top-btn">
237+
<img src="images/up-arrow.png" alt="" />
238+
</button>
239+
240+
<script src="js/bootstrap.bundle.min.js"></script>
241+
<script src="js/script.js"></script>
242+
</body>
243+
</html>

0 commit comments

Comments
 (0)