模板 1
3 分
这是一个白标模板。要使其符合您的品牌和风格，您需要对提供的模板进行进一步自定义
外观如下：
使用下面的链接查看白标模板的外观。请记住，每个颜色/徽标/占位符都可以自定义以匹配您的风格和品牌。
自定义代码文件：
提示：使用代码编辑器右上角的 Copy 按钮复制全部代码
我们已为您在下面的代码编辑器中添加了自定义代码。查看如何使用它 在这里
<!-- START Include headers -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
crossorigin="anonymous"
></script>
<!-- END Include headers-->
<!-- START NOT NEEDED -->
<link rel="stylesheet" href="/style.css" />
<script src="/script.js"></script>
<!-- END NOT NEEDED -->
<!-- START Landing page -->
<div class="body">
<header class="header">
<div class="search-bar">
<div class="search-form">
<input class="form-control" type="text" placeholder="Search..." />
<button class="search-button">
<span class="material-symbols-outlined"> search </span>
</button>
</div>
<button class="close-icon">
<span class="material-symbols-outlined"> close </span>
</button>
</div>
<div class="logo-bar">
<div class="container">
<div class="logo-bar-inner">
<a class="logo" href=""
><img
src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
alt="logo"
/></a>
<div class="search-wrape mobile">
<button class="search-btn">
<span class="material-symbols-outlined"> search </span>
</button>
</div>
<div class="toggle-icon"> </div>
</div>
</div>
</div>
<div class="navigation-menu">
<div class="container">
<div class="nav-menu">
<nav>
<ul>
<li><a href="">LINK</a></li>
<li><a href="">LINK</a></li>
<li><a href="">LINK</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="home-banner">
<div class="banner-width container">
<div class="banner-wrape">
<div class="banner-row">
<div class="banner-col-sm">
<div class="banner-wrape">
<div class="banner-text">
<h1>Title <strong>Subtitle</strong></h1>
</div>
</div>
</div>
<div class="banner-col-lg">
<div class="banner-image">
<figure>
<img
src="https://placehold.co/1115x530/2166ae/FFF?text=Banner%20Image"
alt="banner-img"
/>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro-section">
<div class="container">
<div class="intro-width">
<div class="intro-text">
<h2>Intro title</h2>
<h5>Intro subtitle</h5>
<p>
Some intro description. Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Doloremque id mollitia dolorum quam. Aspernatur
omnis vitae debitis consequatur aliquam exercitationem facilis? Vero
maiores aut dignissimos aspernatur quod pariatur odit quasi!
</p>
</div>
</div>
</div>
</section>
<section class="info-section">
<div class="container">
<div class="info-parent">
<div class="overview-data">
<div class="overview-row">
<div class="overview-col">
<div class="overview-wrape">
<div class="overview-box">
<h3>Title</h3>
<p>Subtitle</p>
<a class="btn-default" href="">Browse</a>
</div>
</div>
</div>
<div class="overview-col">
<div class="overview-wrape">
<div class="overview-box">
<h3>Title</h3>
<p>Subtitle</p>
<a class="btn-default" href="">Explore</a>
</div>
</div>
</div>
</div>
</div>
<div class="framework-data">
<div class="framework-row">
<div class="framework-col">
<div class="framework-wrape">
<div class="framework-box">
<figure>
<img
src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
alt="framework-icon-1"
/>
</figure>
<div class="framework-text">
<h4>Title</h4>
<p>Description</p>
<a class="start-btn" href="">Start ></a>
</div>
</div>
</div>
</div>
<div class="framework-col">
<div class="framework-wrape">
<div class="framework-box">
<figure>
<img
src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
alt="framework-icon-2"
/>
</figure>
<div class="framework-text">
<h4>Title</h4>
<p>Description</p>
<a class="start-btn" href="">Start ></a>
</div>
</div>
</div>
</div>
<div class="framework-col">
<div class="framework-wrape">
<div class="framework-box">
<figure>
<img
src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
alt="framework-icon-3"
/>
</figure>
<div class="framework-text">
<h4>Title</h4>
<p>Description</p>
<a class="start-btn" href="">Start ></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="buttons-link-section">
<div class="container">
<div class="buttons-link-group">
<div class="buttons-link">
<a class="btn-default" href="">Button</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-wrape">
<a class="foot-logo" href="#"
><img
src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
alt="logo"
/></a>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="copyright-inner">
<p>
© Copyright 2023 | | <a href="#">Link</a> |
<a href="#">Link</a> | <a href="#">Link</a> by
<a href="#">Nobody</a>
</p>
<ul>
<li>
<a href=""
><span class="material-symbols-outlined"> grid_guides </span>
</a>
</li>
<li>
<a href=""
><span class="material-symbols-outlined"> grid_guides </span>
</a>
</li>
<li>
<a href=""
><span class="material-symbols-outlined"> grid_guides </span>
</a>
</li>
<!-- Your social links -->
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- END Landing page-->
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.