The-Complete-Web-Development-Bootcamp/main/06 - Introduction to Bootstrap 4/79 - Bootstrap Challenge 1.html

<p>Now that you are starting to get to grips with Bootstrap and styling our website with Bootstrap classes, it's time for a challenge!</p><p><br></p><p>You're going to style the next section on our website by yourself. Here's the specification you should follow, it contains the colours, icons and fonts you should use. Try to get the margins/padding to look the same as the specification, but the exact values won't matter too much.</p><p><br></p><p><strong>Step 1 </strong>- Add font awesome icons and format the text and icons. The icons to choose from font-awesome are: <strong>check-circle</strong>, <strong>bullseye</strong> and <strong>heart</strong>.</p><p><img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1500/https://www.filepicker.io/api/file/VsERAfEPSx2Wc3JHujsM"></p><p><br></p><p><strong>Step 2 </strong>- Make sure the layout is responsive, the icons should take up full width on medium sized screens and below e.g. iPad, phone.</p><p><img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1500/https://www.filepicker.io/api/file/gn5YxZ4bSruOFG8fGYfc"></p><p><br></p><p>But on desktop or large screen devices it should take up a 1/3 of the screen width.</p><p><br></p><p><img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1500/https://www.filepicker.io/api/file/H1KlQFPYRQip4UxMzFwD"></p><p><br></p><p><strong>Step 3</strong> - Make the icons change colour when you mouse over the icons.</p><p><img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:1500/https://www.filepicker.io/api/file/hfAJozBRjSo8vj62Qn2E"></p><p><br></p>