CODEWITHSUNDEEP
htmlcss
user14353018
user14353018

Reputation:

How to connect HTML and CSS and check in browser

I run the below code in a browser using vs code. It does not work. I've just started learning HTML today. I've tried to connect CSS to HTML.

The below code was still working before add in head HTML.

Can you help me out, please?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewprt" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body background="background.jpeg">
    <!--Navbar start-->
    <nav class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
        <a href="index.html" class="navbar-brand ml-lg-3">
            <h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
        </a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse px-lg-3" id="collapse" data-target="#navbarCollapse">
            <div class="navbar-nav m-auto py-0">
                <a href="#home" class="nav-item nav-link active">Home</a>
                <a href="#about" class="nav-item nav-link active">About</a>
            </div>
            <a href="" class="btn btn-menu d-none d-lg-block" stype="background-colour:#457efa; colour: #ffffff;"></a>
        </div>
    </nav>
    <!--Navbar End-->
</body>

</html>

index.css

/* Navigation Menu*/

.navbar-light {
    display: none;
}

.navbar-light .navbar-nav .nav-link {
    padding: 25px 10px;
    color: #343a40;
    font-weight: 500;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #0BCEAF;
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

Upvotes: 0

Views: 120

Answers (2)

Rejin Jose
Rejin Jose

Reputation: 41

Your code is running fine. I checked it in my local machine. In your index.css file you have written .navbar-light{display: none;}. That's why nothing is visible in the page. It also shows your index.css file is working.

Upvotes: 0

thelovekesh
thelovekesh

Reputation: 1452

First thing is that you have added navbar-light in the top nav tag and in the CSS its property is defined as display:none;. So when you have set display:none; property on the parent nav tag then you can not see anything.

Now another thing is that from your code I can see that the classes you have used are based on the Bootstrap. So to see this code in action you have to include Bootstrap in your project too. Copy the below cdn link to see code in action

<!--CSS Only-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewprt" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body background="background.jpeg">
    <!--Navbar start-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Navbar End-->

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

You can read more about bootstrap and its docs here - https://getbootstrap.com/docs/5.0/getting-started/introduction/

Upvotes: 1

Related Questions