Day 3 Rotaitng navigation

UDEMY/50 Projects In 50 Days - HTML, CSS & JS

Day 3 Rotaitng navigation

순댓국 2023. 11. 26. 01:26

728x90

SMALL

HTML

<body>
    <div class="container show-nav">
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i class="fas fa-times"></i>
                </button>
                <button id="open">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>

        <div class="content">
            <h1>Marvelous flavors</h1>
            <small>Florin Pop</small>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam odio illo nisi dolore
                voluptatibus
                earum. Veniam sint, enim illum deserunt veritatis eius expedita praesentium corrupti aliquam soluta
                accusantium quasi?</p>
            <h3>Jun's Icecream shop</h3>
            <img
                src="https://images.unsplash.com/photo-1637729423800-0fbe5923e9f6?q=80&w=1285&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quibusdam assumenda rerum, pariatur in
                autem? Quasi rem error, placeat, quod deserunt amet quis eum harum rerum aspernatur vitae consequuntur
                atque?</p>
        </div>
    </div>
    <nav>
        <ul>
            <li><i class="fa fa-home" aria-hidden="true">Home</i></li>
            <li><i class="fas fa-user-alt" aria-hidden="true">About</i></li>
            <li><i class="fas fa-envelope" aria-hidden="true">Contact</i></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>

CSS

open to close

add and remove to container

728x90

LIST