69 lines
4.0 KiB
HTML
69 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Sample web page with buttons and icons</title>
|
|
<meta name="description" content="A sample web page with a range of buttons styles and Font Awesome icons.">
|
|
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="assets/css/buttons-icons.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Link to icons for Font Awesome 5 -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<article>
|
|
|
|
<header class="header-narrow text-center bg-header">
|
|
<h1>About Us</h1>
|
|
<img src="assets/img/three-staff.png" alt="staff members">
|
|
<h2>We are an award-winning web, mobile and digital design agency. We can bring your ideas to life online, and transform visionary products and services into successful ones.</h2>
|
|
</header>
|
|
|
|
<section class="section-narrow bg-blue-dark">
|
|
<h1>Section Heading One</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-light">
|
|
<h1>Section Heading Two</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<div class="container-btn">
|
|
<a href="#" class="btn btn-solid btn-rounded"><i class="fas fa-shopping-cart"></i> Order Now</a>
|
|
<a href="#" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Learn more</a>
|
|
</div>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-dark">
|
|
<h1>Section Heading Three</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-light">
|
|
<h1>Section Heading Four</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
</article>
|
|
</main>
|
|
|
|
</body>
|
|
</html> |