5.1: Lorem HTML

Add another section

Open index.html and add another section, this time for this "Lorem" portion of the webpage - again, we need to give the section an ID attribute so the link in our header will work.

<section id="lorem">
  <h3>Lorem Ipsum</h3>

</section>

Lorem Section

Now let's add 3 paragraphs with some filler text. "Lorem Ipsum" is dummy text used to represent a normal distribution of letters and words - ready more about it here. Let's use this Lorem Ipsum generator to generate a few paragraphs of content. Copy and paste 3 of the paragraphs from the generated text into some <p> tags in our HTML file. (Or copy the paragraphs below)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed blandit libero volutpat sed cras ornare arcu. Pellentesque habitant morbi tristique senectus. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Elementum integer enim neque volutpat ac tincidunt vitae. Diam vulputate ut pharetra sit. Eu facilisis sed odio morbi quis. Lobortis mattis aliquam faucibus purus. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Ultricies tristique nulla aliquet enim. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Gravida dictum fusce ut placerat orci nulla. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Dignissim convallis aenean et tortor. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra.</p>

<p>Lorem donec massa sapien faucibus et molestie. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Massa tincidunt dui ut ornare lectus sit amet est placerat. Velit dignissim sodales ut eu sem integer. Mi eget mauris pharetra et ultrices neque ornare. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sit amet aliquam id diam maecenas. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Nam at lectus urna duis convallis convallis tellus.</p>

<p>Massa eget egestas purus viverra accumsan. Facilisi cras fermentum odio eu feugiat. In nibh mauris cursus mattis. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Gravida cum sociis natoque penatibus et magnis. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Posuere morbi leo urna molestie at elementum eu facilisis. Felis imperdiet proin fermentum leo vel orci. Dui vivamus arcu felis bibendum ut tristique. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Nunc vel risus commodo viverra maecenas accumsan. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi blandit cursus risus at ultrices. Tellus elementum sagittis vitae et leo duis ut. Et ultrices neque ornare aenean. Senectus et netus et malesuada. Posuere lorem ipsum dolor sit.</p>

Lorem Text

Add some classes

We haven't used CSS classes yet in this project - let's practice by adding some CSS classes to these paragraphs. We'll target these paragraphs via this "lorem" class.

<section id="lorem">
  <h3>Lorem Ipsum</h3>
  <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed blandit libero volutpat sed cras ornare arcu. Pellentesque habitant morbi tristique senectus. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Elementum integer enim neque volutpat ac tincidunt vitae. Diam vulputate ut pharetra sit. Eu facilisis sed odio morbi quis. Lobortis mattis aliquam faucibus purus. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Ultricies tristique nulla aliquet enim. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Gravida dictum fusce ut placerat orci nulla. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Dignissim convallis aenean et tortor. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra.</p>
  <p class="lorem">Lorem donec massa sapien faucibus et molestie. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Massa tincidunt dui ut ornare lectus sit amet est placerat. Velit dignissim sodales ut eu sem integer. Mi eget mauris pharetra et ultrices neque ornare. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Sit amet aliquam id diam maecenas. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Nam at lectus urna duis convallis convallis tellus.</p>
  <p class="lorem">Massa eget egestas purus viverra accumsan. Facilisi cras fermentum odio eu feugiat. In nibh mauris cursus mattis. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Gravida cum sociis natoque penatibus et magnis. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Posuere morbi leo urna molestie at elementum eu facilisis. Felis imperdiet proin fermentum leo vel orci. Dui vivamus arcu felis bibendum ut tristique. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Nunc vel risus commodo viverra maecenas accumsan. Aliquam malesuada bibendum arcu vitae elementum curabitur. Morbi blandit cursus risus at ultrices. Tellus elementum sagittis vitae et leo duis ut. Et ultrices neque ornare aenean. Senectus et netus et malesuada. Posuere lorem ipsum dolor sit.</p>
</section>

Lorem Classes

The finished product should look like this:

Lorem Result

Next Section

We should style these paragraphs a little. Go to 5.2: Lorem CSS.