HTML/CSS

CSS:-

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li a.active
{
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) 
{
  background-color: #111;
}

li a:not(.active)
{
    float: right;     
}

.active 
{
  background-color: #111;
  font-size:20px;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  
  .hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
  }
  
  .hero-text button:hover {
    background-color: #555;
    color: white;
  }

HTML:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Insight</a></li>
        <li><a href="#news">how it works</a></li>
        <li><a href="#contact">Sign Up</a></li>
        <li><a href="#about">Login</a></li>
    </ul>

    <div class="hero-image">
        <div class="hero-text">
          <h1 style="font-size:50px">Don't Ignore Your Dreams</h1>
          <p></p>
          <button>See How it works</button>
          <button>Join Us</button>
        </div>
    </div>
</body>
</html>

Comments

Post a Comment