Navigation Types


Introduction:

The navigation provided is the default navigation state that each user will interact with when visiting the site, this provided the links to the other main pages and these links can be changed where necessary, this component should be used in every page that the user interacts with.


Usage:

Navigation should be used throughout all pages and should be situated at the top of the page so that the user is able to find it and access it easy.


Navigation Component:

                        <div id="NavBarCom">
                                <ul class="NavMenu">
                                    <img id="logo" src="Images/Logo.png">
                                    <li> Portfolio </li>
                                    <li> About </li>
                                    <li>Contact Info </li>
                                </ul>
                            </div
                        
#NavBarCom{
    
                            background: linear-gradient(133deg, #800040 0%,   #C04848 100%);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            width: 90%;
                            height: 80px;
                            padding: 30px;

                        }

                        .NavMenu li{

                            text-transform: uppercase;
                            color: white;
                            font-weight: 400;
                            display: inline-block;
                            margin-left: 20px;
                            margin-top: 10px;
                            padding: 15px;

                        }

                        .NavMenu li:hover{

                            text-transform: uppercase;
                            color: white;
                            text-decoration: underline;
                            font-weight: 400;
                            display: inline-block;
                            margin-left: 20px;
                            margin-top: 10px;
                            padding: 15px;
                            opacity: 0.5;
                            border-radius: 15px;  
                        }

                        #logo {

                            margin-top 200px;
                            padding 100px;
                            opacity: 0.9;
                            width: 300px;
                            height: auto;
                        }