Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,85 @@
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML here -->
<div class="container">
<header class="main-header">
<h1>Lorem Ipsum</h1>
<nav>
<div id="nav">
<a href="#">Home</a>
<a href="#"></a>>About</a>
<a href="#"></a>>Contact</a>
</div>
</nav>
</header>
<article>
<h2>What is Lorem Ipsum?</h2>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<article>
<h2>Why do we use it?</h2>
<img
src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0"
width="700px"
height="300px"
/>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content here', making it
look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the like).
</p>
</article>
<article>
<h2>Where does it come from?</h2>
<img
src="https://cdn.searchenginejournal.com/wp-content/uploads/2022/06/image-search-1600-x-840-px-62c6dc4ff1eee-sej-1520x800.png"
width="700"
height="300"
/>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making
it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going
through the cites of the word in classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
Evil) by Cicero, written in 45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The first line
of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
section 1.10.32. The standard chunk of Lorem Ipsum used since the
1500s is reproduced below for those interested. Sections 1.10.32 and
1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also
reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</p>
</article>
<footer id="footer">
<p id="Copyright" class="Copyright text">
copyrigh &copy;Lorem Ipsum
</p>

</div>
</body>
</html>
54 changes: 54 additions & 0 deletions style.CSS
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
* {
margin: 0px;
padding: 0px;
}

body {
font-family: sans-serif;
color: #444;
border-top: 10px;
solid #1098ad;
}

h2 {
display: flex;
flex-direction: column;
align-items: center;
}

.main-header {
background-color: #f7f7f7;
padding: 20px 40px;
margin-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
}


img {
display: flex;
flex-direction: column;
align-items: center;
}

#footer {
display: flex;
flex-direction: column;
align-items: center;
}


h1 {
padding-bottom: 20px;
}

.container {

width: 700px;
margin: 0 auto;
}

article {
margin-bottom: 50px;
}