Skip to content

added popular poetry section #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KMcWeeney22 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added popular poetry section #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
View file
Open in desktop
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
View file
Open in desktop
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

@lariosw lariosw Feb 20, 2017

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

@lariosw lariosw Feb 20, 2017

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

@lariosw lariosw Feb 20, 2017

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