62 lines
3.5 KiB
HTML
62 lines
3.5 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>HTML5 Sample Web Page: Sections with alternating dark background colours.</title>
|
|
<meta name="description" content="Using HTML5 section tags to create a web page with alternating dark coloured blocks of content.">
|
|
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="assets/css/style-11.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
|
|
</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-dark-1">
|
|
<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-dark-2">
|
|
<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>
|
|
|
|
<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-dark-1">
|
|
<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-dark-2">
|
|
<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> |