Question

https://github.com/ZK-George/html-and-css 下载图片，因为我不知道如何链接它们。

我希望它与 https://codepen.io/snappercridge/pen/eyrgMK 完全一样或相似。我希望我当前的导航栏按原样透明，徽标位于左上角。如果有人可以帮助我，那就太好了。 -->

*{
    margin: 0;
    padding: 0;
    font-family: system-ui;

}

#main{
    width: 100%;
    height: 50vh;
    background-image: url(./castlepoint.jpg);
    background-size: cover;
}

nav{
    width: 100%;
    height: 100px;
    background-color: #AARRGGBB;
    line-height: 100px;
    opacity: 0.9
    
}
nav ul{
    float: right;
    margin-right: 30px;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
    transition: 0.8s all;
    
}

nav ul li:hover{
    background-color: #f39d1a;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
    padding: 30px;
    
}

.centered {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: white
      
}

.information{
  font-size: 20px;
  margin-top: 50px;
  margin-left: 200px;
  margin-right: 200px;
}

.image{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 56%;
  margin-top: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

div.imagecontainer {
 text-align: center;
 padding: 20px 20px;
margin-bottom: 50px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Transparent Navigation Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
    <nav>
    <img src="matariki-logo.png" width="300" height="100">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul> 
    </nav>
</div>
<div class="container">
<div class="centered"><h1>What is Matariki?</h1></div>
</div>
    
<div class="information">
    <p>Matariki celebrations seem to have popped up on the Kiwi calendar recently, as a time to gather and celebrate in the middle of our chilly winter. It’s always a very special time of year for us at Tamaki – steeped in celebration and legends, it’s something our ancestors saw as the ‘highlight’ on the calendar! If you’re new to NZ, or new to our culture, here’s the low-down on what we’re actually celebrating: What is Matariki? </p>
    <br>
    <h2>Matariki is a Star Cluster that Maori Used to Predict the Weather</h2>
    <br>
    <p>Matariki is a smattering of stars that are also known as the Seven Sisters. For Māori, looking to the skies has always proven a smart way to ask nature about it’s secrets. The stars helped guide our ancestors, who were master navigators, on great sea voyages in waka (canoes).  During winter, Māori again looked to Matariki to see how the weather for the season ahead would be. If the stars shone bright, it bode well for the season ahead; if they were dull, it meant months of hard work and hungry bellies. </p>
    <br>
    </div>
    
<div class="image">
        <img src="https://assets.thespinoff.co.nz/1/2018/06/Matariki-southern.jpg">
      <div class="imagecontainer">
          <p>Our ancestors traditionally looked to the stars to predict the weather, and to find their way at sea.</p>
    </div>
    </div>
    
    
</body>
</html>

没有 Javascript 的汉堡下拉菜单

0 个答案: