Digital Chalkboard Feb 8
Here was the four-part question from class:
<!– Create a footer that is fixed and always visible at the bottom of the page –>
<!– NEW INFO: use the <footer> element. There is no footer class in Bootstrap –>
<!– The footer should have a column on the left for conference details –>
<!– and a column on the right for contact details –>
<!– Footers don’t render well on small devices, so hide it below the large breakpoint. –>
<!– STEP ONE: CREATE THE FOOTER AND FIX IT TO THE BOTTOM –>
<!– STEP TWO: CREATE THE COLUMNS IN THE FOOTER –>
<!– STEP THREE: CREATE LISTS IN COLUMNS ONE AND THREE –>
<!– STEP FOUR: MAKE THE FOOTER GO AWAY BELOW THE LG BREAKPOINT –>
And here is one version of an answer:
And here is one version of an answer:
</p> <div> <div><span><!-- REMEMBER: NEED TO ADD BOTTOM MARGIN TO THE BODY IN CSS --></span></div> <div><span> </span><span><footer</span><span> </span><span>class</span><span>=</span><span>"fixed-bottom bg-dark text-white d-none d-lg-block"</span><span>></span></div> <div style="padding-left: 30px;"><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"container"</span><span>></span></div> <div style="padding-left: 60px;"><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"row"</span><span>></span></div> <div style="padding-left: 90px;"><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"col-3"</span><span>></span></div> <div style="padding-left: 120px;"><span> </span><span><ul></span></div> <div style="padding-left: 150px;"><span> </span><span><li></span><span>Conference title</span><span></li></span></div> <div style="padding-left: 150px;"><span> </span><span><li></span><span>Sub-title</span><span></li></span></div> <div style="padding-left: 120px;"><span> </span><span></ul></span></div> <div style="padding-left: 90px;"><span> </span><span></div></span></div> <div style="padding-left: 60px;"><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"col"</span><span>></span></div> <div style="padding-left: 30px;"><span> </span><span></div></span></div> <div style="padding-left: 90px;"><span> </span><span><div</span><span> </span><span>class</span><span>=</span><span>"col-3"</span><span>></span></div> <div style="padding-left: 120px;"><span> </span><span><ul></span></div> <div style="padding-left: 150px;"><span> </span><span><li></span><span>Contact us</span><span></li></span></div> <div style="padding-left: 150px;"><span> </span><span><li></span><span>Deatils</span><span></li></span></div> <div style="padding-left: 120px;"><span> </span><span></ul></span></div> <div style="padding-left: 90px;"><span> </span><span></div></span></div> <div style="padding-left: 60px;"><span> </span><span></div></span></div> <div style="padding-left: 30px;"><span> </span><span></div></span></div> <div><span> </span><span></footer></span></div> </div> <p>