Unable to change the background color and text color |
Unable to change the background color and text color |
spalisetty |
Sep 13 2020, 04:39 AM
Post
#1
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
I am unable to change the header background and text color no matter what I do. Kindly help.
CODE <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Simplified Movies</title> <link rel="stylesheet" href="SimplifiedMovies.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <style> .navbar{ position: fixed; top: 0; width: 100%; z-index: 100; color: #520c0c; font-size: 20px; padding: 0 20px 0 0; background: rgb(144, 3, 252); /* max-width: 1440px; */ height: 100px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.3) } .navbar-nav > li{ padding-left:10px; padding-right:10px; } .navbar-brand{ font-size: 50px; margin-left: 20px; } .form-control{ /* margin-left: 150px; */ } </style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">SM</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="container"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#">English Movies <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Hindi Movies <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#"> Telugu Movies <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#"> Contact Us <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </li> </ul> </nav> <br><br><br><br> <br><br><br><br> <div class="container"> <div id="demo" class="carousel slide" data-ride="carousel" data-interval="3000"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="TeluguMovies.JPG" alt="TeluguMovies" width="1100" height="500"> </div> <div class="carousel-item"> <img src="HindiMovies.jpg" alt="HindiMovies" width="1100" height="500"> </div> <div class="carousel-item"> <img src="EnglishMovies.jpg" alt="EnglishMovies" width="1100" height="500"> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <br><br><br><br> <br><br><br><br> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html> |
Christian J |
Sep 13 2020, 05:19 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I don't see any header or other text in the code (besides nav links).
|
spalisetty |
Sep 13 2020, 05:24 AM
Post
#3
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
I don't see any header or other text in the code (besides nav links). I have nav navbar right, which automatically creates a blank header. and then I have unordered lists within the container. What else would I have? Honestly, I am learning to make a website which would look fairly better, in a month's time. Kindly help, if anything I need to add. Regards Suman P. |
spalisetty |
Sep 13 2020, 05:46 AM
Post
#4
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
I don't see any header or other text in the code (besides nav links). I have nav navbar right, which automatically creates a blank header. and then I have unordered lists within the container. What else would I have? Honestly, I am learning to make a website which would look fairly better, in a month's time. Kindly help, if anything I need to add. Regards Suman P. Thank you, I managed to do it. |
Christian J |
Sep 13 2020, 05:51 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
I have nav navbar right, which automatically creates a blank header. I don't understand which part that is. QUOTE and then I have unordered lists within the container. Links are not affected by text color. To change a link's color you must style the A element: https://developer.mozilla.org/en-US/docs/Le...t/Styling_links The second list is empty. If you add some text to it you should be able to style its color the usual way, for example: CODE .carousel-indicators {color: red; background: blue;} |
spalisetty |
Sep 13 2020, 07:09 AM
Post
#6
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
I have nav navbar right, which automatically creates a blank header. I don't understand which part that is. QUOTE and then I have unordered lists within the container. Links are not affected by text color. To change a link's color you must style the A element: https://developer.mozilla.org/en-US/docs/Le...t/Styling_links The second list is empty. If you add some text to it you should be able to style its color the usual way, for example: CODE .carousel-indicators {color: red; background: blue;} Thank you so much |
Lo-Fi Version | Time is now: 28th March 2024 - 11:52 AM |