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
7 changes: 6 additions & 1 deletion css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
/* ==========================================================================
Author's custom styles
========================================================================== */
img{
padding-bottom: 20px;
}


.popular-poets ul {
style: list-style: none;
}



Expand Down
25 changes: 22 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,29 @@ <h1>Hello, world!</h1>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

<!-- list of popular poetry -->
<h2>Popular Poetry</h2>
<ul class="poetry-list" style="list-style: none; padding-left: 0px;">
<li style="padding-bottom: 20px;">
<a href="https://www.poetryfoundation.org/poems-and-poets/poems/detail/45521">I Wandered Lonely as a Cloud</a>
<p><img class ="img-responsive" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRa6CA5UmvvNVVWN6YSCa_TuO2I66V-HWjGhBEwzRyA3sRbD-41" alt="I wandered lonely as a cloud cover photo" style="height: 100px;"></p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Photo layout looks good. Only suggestion would be that class="img-responsive" might be a too generic of name for these photos and it might be better to name it something like poet-image with an id of walt whitman for example. I was thinking this might be a good change since there will be many photos we will use that will be responsive for the profile pictures and possibly other photos within the site.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<p><img class ="poet-images" id="walt-whitman" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRa6CA5UmvvNVVWN6YSCa_TuO2I66V-HWjGhBEwzRyA3sRbD-41" alt="I wandered lonely as a cloud cover photo" style="height: 100px;"></p>

</li>

<li style="padding-bottom: 20px;">
<a href="https://allpoetry.com/Do-Not-Go-Gentle-Into-That-Good-Night">Do Not Go Gentle Into That Good Night</a>
<p><img src="http://quotespics.com/wp-content/quote-images/do-not-go-gentle.jpg" alt="Do Not Go Gentle Into That Good Night cover photo" style="height: 100px;">
</li>

<li>
<a href="https://www.poetryfoundation.org/poems-and-poets/poems/detail/45474">O Captain! My Captain!</a>
<p><img src="https://ih1.redbubble.net/image.25612504.1621/raf,750x1000,075,t,e5d6c5:f62bbf65ee.u4.jpg" alt="O Captain! My Captain! coverv photo" style="height: 100px;">
</li>
</ul>
<p><a class="btn btn-default" href="#" role="button">View Poetry &raquo;</a></p>
</div>
<!-- end popular poetry list -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice commenting out the section. Helps keep it clear where these changes end.


<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
Expand Down