创意设计师个人网站模板
时间: 2023-11-21 07:58:41 浏览: 126
以下是几个创意设计师个人网站模板的例子,供您参考:
1. 《Ava》
Ava是一个非常适合创意设计师的个人网站模板。它有一个简洁的布局,可以让您的作品集成为焦点。此外,它还具有响应式设计,因此您的网站将在各种设备上都能够很好地展示。
2. 《Hazel》
Hazel是一个非常适合创意设计师的个人网站模板。它有一个现代化的设计,可以让您的作品集成为焦点。此外,它还具有响应式设计,因此您的网站将在各种设备上都能够很好地展示。
3. 《Kreo》
Kreo是一个非常适合创意设计师的个人网站模板。它有一个干净的布局,可以让您的作品集成为焦点。此外,它还具有响应式设计,因此您的网站将在各种设备上都能够很好地展示。
```HTML
<!-- 以下是Ava模板的HTML代码示例 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ava - Personal Portfolio Template</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<h1>Ava</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div class="container">
<h2>Welcome to my portfolio</h2>
<p>Check out my latest work below</p>
<a href="#" class="btn">View Portfolio</a>
</div>
</section>
<section id="about">
<div class="container">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam eget varius ultricies, ipsum nibh bibendum nunc, vel lacinia velit augue vel velit. Sed euismod, diam eget varius ultricies, ipsum nibh bibendum nunc, vel lacinia velit augue vel velit.</p>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<section id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<ul>
<li>
<a href="#">
<img src="img/portfolio-1.jpg" alt="">
<h3>Project 1</h3>
</a>
</li>
<li>
<a href="#">
<img src="img/portfolio-2.jpg" alt="">
<h3>Project 2</h3>
</a>
</li>
<li>
<a href="#">
<img src="img/portfolio-3.jpg" alt="">
<h3>Project 3</h3>
</a>
</li>
<li>
<a href="#">
<img src="img/portfolio-4.jpg" alt="">
<h3>Project 4</h3>
</a>
</li>
</ul>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Me</h2>
<form action="#">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
</form>
</div>
</section>
</body>
</html>
```
阅读全文