Sidebar Content

Lesson 9 of 13 in Coddy's Sidebar | Front-end Project course.

Challenge

Easy

Target paragraph element in class 'sidebar':

1. Set the color (not white).

2. Add padding according to your choice.

3. Set cursor to pointer.

4. Add hover effect which sets the opacity of your choice (not 1).

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Sidebar</title>
</head>
    <body>
        <button id="openSidebarBtn">Open</button>
        <div id="sidebar" class="sidebar">
            <button id="closeSidebarBtn">Close</button>
            <p>Home</p>
            <p>About</p>
            <p>Services</p>
            <p>Contact</p>
        </div>
        <script src="script.js"></script>
    </body>
</html>