Haruto Comments - Answer Overflow

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>GhostCoders</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="index.html" class="home">Home</a></li>
      <li><a href="assets/aboutH.html" class="h">Haruto</a></li>
      <li><a href="assets/aboutB.html" class="b">Boston2029</a></li>
      <li><a href="assets/aboutD.html" class="d">Delicemata</a></li>
      <!--<li><a></a></li> -->
    </ul>
  </nav>

  <img src="/assets/ghost.jpeg" class="team">
  <div class="content">
    <h1>GhostCoders</h1>
    <p></p>
  </div>
  
  
  
  <script src="script.js"></script>
</body>

<!-- I need all of our fav colors and things so we can make 3 diff pages about us. make another comment for yalls fav colors-->
<!-- yall can also add whatever yall want to the site. its about us!-->

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>GhostCoders</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="index.html" class="home">Home</a></li>
      <li><a href="assets/aboutH.html" class="h">Haruto</a></li>
      <li><a href="assets/aboutB.html" class="b">Boston2029</a></li>
      <li><a href="assets/aboutD.html" class="d">Delicemata</a></li>
      <!--<li><a></a></li> -->
    </ul>
  </nav>

  <img src="/assets/ghost.jpeg" class="team">
  <div class="content">
    <h1>GhostCoders</h1>
    <p></p>
  </div>
  
  
  
  <script src="script.js"></script>
</body>

<!-- I need all of our fav colors and things so we can make 3 diff pages about us. make another comment for yalls fav colors-->
<!-- yall can also add whatever yall want to the site. its about us!-->

</html>

heres my html for reference

42 replies

KPCKevin Powell - Community

•Created by Haruto on 4/26/2024 in #front-end

Navbar help

there we go

42 replies

KPCKevin Powell - Community

•Created by Haruto on 4/26/2024 in #front-end

Navbar help

/* Style for the navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Style for the list items in the navigation */
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* Style for the individual list items */
nav li {
  margin: auto;
  padding: 0; 
}

/* Style for the links within the list items */
nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effect for the links */
nav .home:hover {
  color: #04659e;
}

nav .h:hover {
  color: #129eaa;
}

nav .b:hover {
  color: #11c491;
}

nav .d:hover {
  color: #c61b88;
}

.content {
  background: #333;
  color: #fff;
  
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  
  border-radius: 1rem;
  text-align: center;
  position: relative;
  bottom: 20px;
}

.team {
  width: 100%;
  border-radius: 10px;
}

.home {
  color: deepskyblue;
}

.h {
  color: #17c8d8;
}

.b {
  color: #11c438;
}

.d {
  color: deeppink;
}
/* feel free to change ur colors*/

/* Style for the navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Style for the list items in the navigation */
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

/* Style for the individual list items */
nav li {
  margin: auto;
  padding: 0; 
}

/* Style for the links within the list items */
nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hover effect for the links */
nav .home:hover {
  color: #04659e;
}

nav .h:hover {
  color: #129eaa;
}

nav .b:hover {
  color: #11c491;
}

nav .d:hover {
  color: #c61b88;
}

.content {
  background: #333;
  color: #fff;
  
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  
  border-radius: 1rem;
  text-align: center;
  position: relative;
  bottom: 20px;
}

.team {
  width: 100%;
  border-radius: 10px;
}

.home {
  color: deepskyblue;
}

.h {
  color: #17c8d8;
}

.b {
  color: #11c438;
}

.d {
  color: deeppink;
}
/* feel free to change ur colors*/