分享几个前端设计的源码和素材，不要链接直接给出代码

好的，下面是几个前端设计的源码和素材：

1. 一个简单的响应式导航栏

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

nav {
  background-color: #333;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

2. 一个简单的登录表单

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </div>
  <button type="submit">登录</button>
</form>

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form div {
  margin: 10px;
}

form label {
  display: inline-block;
  width: 80px;
  text-align: right;
}

form input[type="text"],
form input[type="password"] {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

form button[type="submit"] {
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

3. 一个简单的图片轮播

<div class="slider">
  <div class="slide active">
    <img src="img/slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="img/slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="img/slide3.jpg" alt="Slide 3">
  </div>
  <div class="slide">
    <img src="img/slide4.jpg" alt="Slide 4">
  </div>
</div>

.slider {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

希望这些源码和素材能对你有所帮助！