- Style the Icebreaker Homepage
For this lab you will be combining all the knowledge you've learned of HTML and CSS to create a styled homepage of our Icebreaker application. By the end of this lab your homepage should look like:
You must use the selectors specified below to stlye the elements however it is entirely possible to achieve the same results using different selectors. You are free to do so, the test suite will not pass, but all that matters is that your site looks right.
As you add the styles to style.css, you should check your work visually by looking at index.html in the browser. When working on this lab in the Learn IDE, type nohup httpserver & in your IDE terminal. You will get an IP Address that you can open in your browser to see your site. You can learn more about this at the Help Center.
This lab requires you to use specific selectors in your CSS to style the HTML.
Use a global selector to set the font of the page to "Helvetica", "Arial", "san-serif"
Use a body selector to add a 30px padding to the left and right of the site.
Use a header selector to set the height of the header to 100px and give it a solid bottom border of 1px of color #CCC.
Float the header nav to the right using a header nav selector.
Reset the padding of the nav ul to 0 and set the top margin to 40px with a 0 margin for everything else.
lis in the navigation should have a display of inline so they are side by side and a right margin of 10px.
Make the links in the navigation have no underline a color of #007bff and a font size of 18px.
Give the nav links a hover state with a text decoration of an underline and a color of #0056b3.
Float the h3 with an id of header to the left and make its font size 30px.
Remove the underline from the link in the element with an id of header and make its color #868e96.
Make the link in the #header have an underline on hover.
Use the element selector for main to give the main element a top marign of 20px.
A "jumbotron" is a big marketing callout you often see on web pages. Follow the styles below to make yours.
Style the div with the class of jumbotron to have a round border of 5px, a background color of #e9ecef, a padding of 10px and align the text to the center.
Make the font size of the h1 in the .jumbotron 60px.
Paragraphs in the .jumbotron should have a font size of 20px, a 0 top and bottom padding, a 40px left and right padding, and a line-height of 40px.
Style your questions to include a link that looks like a button (called a "pill").
Make the div with the class questions have a 0 top and bottom padding and a 20px left and right padding.
Make the h4 that contains the question content within the div.questions have a font size of 30px and a 10px bottom margin.
Make the p contained within div.questions have a top margin of 30px.
a tags with a class of btn within the div.questions should have a 5px rounded border, #FFF white text color, a background and border color of #007bff, no underline, an 18px padding, and a 20px font size.
On hover, our pill buttons should change background and border color to #0069d9.
Make the footer of the site have a 1px solid #CCC top border, an 80px top margin, a 20px top padding, and a color of #CCC.
Once all these styles are applied to style.css you should have a beautiful homepage for your future Icebreakers application. The tests are pretty specific so if you don't use the exact selectors or styles as mentioned above, they might fail. That's okay, as long as you're happy with how the site looks. You are going to have many opportunities to update the styles and make the site pretty - so have fun, change some settings, experiment with the wonderful world of CSS.