HTML5黄色宽屏样式搞怪可爱手工蛋糕企业网站模板代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 40 14



模板描述:黄色 宽屏样式 搞怪可爱手工蛋糕。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用搞怪可爱手工蛋糕行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/yellowmoon-font.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/libs/smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/libs/modernizr.mq.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

3. HTML代码

<header id="header">
	<!-- Section title -->
	<h1 class="sr-only">YellowMoon | Home page</h1>
</header>
<main>
	<section id="home" class="home">
		<!-- Section title -->
		<h2 class="sr-only">Home</h2>
		<div class="l-align-both">
			<figure class="logo">
				<img src="img/logo/yellowmoon_logo_01.svg" title="YellowMoon Logo" alt="Cartoon illustration of the moon">
				<figcaption class="sr-only">YellowMoon Logo</figcaption>
			</figure>
			<span class="h3 -white">Welcome to the  yellow side of moon</span>
			<span class="h1 -yellow">We do some creative stuff!!!</span>
			<a href="javascript:void(0)" class="button">Explore</a>
			<a href="#about" class="chevron-down smoothScroll">
				<img class="icon" src="img/chevron_down_white.svg" title="Scroll down" alt="Chevron pointing downwards">
				<span class="sr-only">Scroll down</span>
			</a>
		</div>
	</section> <!-- /.home -->
	<div class="nav-container">
		<nav id="main-navigation" class="navbar navbar-default">
		  <!-- Section title -->
		  <h2 class="sr-only">Main navigation</h2>
		  <div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="sr-only">Toggle navigation</span>
			  </button>
			  <a class="navbar-brand smoothScroll" href="#home">
				<img class="logo" src="img/logo/yellowmoon_logo_02.svg" title="YellowMoon Logo" alt="Cartoon illustration of the moon and brand title">
				<span class="sr-only">YellowMoon Logo</span>
			  </a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div id="main-navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="active"><a class="smoothScroll" href="#home">Home <span class="sr-only">(current)</span></a></li>
					<li><a class="smoothScroll" href="#about">About us</a></li>
					<li><a class="smoothScroll" href="#portfolio">Portfolio</a></li>
					<li><a class="smoothScroll" href="#clients">Clients</a></li>
					<li><a class="smoothScroll" href="#contact">Contact</a></li>
				</ul>
			</div> <!-- /.navbar-collapse -->
		  </div> <!-- /.container -->
		</nav> <!-- /.navbar -->
	</div> <!-- /.nav-container -->
	<section id="about" class="about">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<!-- Section title -->
					<h2 class="title -black">About us</h2>
					<span class="subtitle h3 -yellow">Yellow side of the moon is not secret anymore</span>
				</div>
			</div> <!-- /.row -->
			<div class="row box-container">
				<div class="col-sm-4">
					<div class="about-box">
						<h3 class="title -one -black">We make some art</h3>
						<p class="desc">Its just some empty spaces with some 
						text, images and more empty spaces</p>
					</div> <!-- /.about-box -->
				</div>
				<div class="col-sm-4">
					<div class="about-box">
						<h3 class="title -two -black">We develope some apps</h3>
						<p class="desc">You click and magic happen, 
						well someone must make magic</p>
					</div> <!-- /.about-box -->
				</div>
				<div class="col-sm-4">
					<div class="about-box">
						<h3 class="title -three -black">We take some photographs</h3>
						<p class="desc">This is the easy part of job, 
						just point camera and shoot</p>
					</div> <!-- /.about-box -->
				</div>
			</div> <!-- /.row -->
		</div> <!-- /.box-container -->
	</section> <!-- /.about -->
	<section id="quote" class="quote">
		<!-- Section title -->
		<h2 class="sr-only">Quote</h2>
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<span class="h2 -black text-center">This is some random text 
					Where you get inspired and do some cool stuff</span>
					<span class="h3 -white text-center">No...We are not lazy,every website need blank space</span>
				</div>
			</div> <!-- /.row -->
		</div> <!-- /.container -->
	</section> <!-- /.quote -->
	<section id="portfolio" class="portfolio">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<!-- Section title -->
					<h2 class="title -black">Portfolio</h2>
					<span class="subtitle h3 -yellow">When we are bored we make some of these</span>
				</div>
			</div> <!-- /.row -->
			<div class="row box-container">
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_01.jpg" title="Portfolio image one title" alt="Portfolio image one description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_02.jpg" title="Portfolio image two title" alt="Portfolio image two description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_03.jpg" title="Portfolio image three title" alt="Portfolio image three description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_04.jpg" title="Portfolio image four title" alt="Portfolio image four description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
			</div> <!-- /.row -->
			<div class="row">
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_05.jpg" title="Portfolio image five title" alt="Portfolio image five description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_06.jpg" title="Portfolio image six title" alt="Portfolio image six description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_07.jpg" title="Portfolio image seven title" alt="Portfolio image seven description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
				<div class="col-xxs-12 col-xs-6 col-md-3">
					<div class="portfolio-item">
						<img src="img/portfolio/portfolio_08.jpg" title="Portfolio image eight title" alt="Portfolio image eight description">
						<div class="overlay">
							<div class="content">
								<span class="h2 -black text-center">Warning</span>
								<span class="h3 -white text-center">Shocking good art</span>
							</div>
						</div> <!-- /.overlay -->
					</div> <!-- /.portfolio-item -->
				</div>
			</div> <!-- /.row -->
		</div> <!-- /.container -->
		<p class="load-more -yellow text-center">Oh...We have more of these</p>
		<a href="javascript:void(0)" class="chevron-down">
			<img class="icon" src="img/chevron_down_black.svg" title="Load more..." alt="Chevron pointing downwards">
			<span class="sr-only">Load more...</span>
		</a>
	</section> <!-- /.portfolio -->
	<section id="clients" class="clients">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<!-- Section title -->
					<h2 class="title -white">Clients</h2>
					<span class="subtitle h3 -yellow">Somebody actually pay us for these stuff</span>
				</div>
			</div> <!-- /.row -->
			<div class="row box-container">
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_01.svg" title="Client logo one title" alt="Client logo one description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_02.svg" title="Client logo two title" alt="Client logo two description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_03.svg" title="Client logo three title" alt="Client logo three description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_04.svg" title="Client logo four title" alt="Client logo four description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_05.svg" title="Client logo five title" alt="Client logo five description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
				<div class="col-xs-6 col-sm-4 col-md-2">
					<div class="logo-box">
						<a href="javascript:void(0)">
							<img class="client-logo" src="img/clients/logo_06.svg" title="Client logo six title" alt="Client logo six description">
						</a>
					</div> <!-- /.logo-box -->
				</div>
			</div> <!-- /.row -->
		</div> <!-- /.container -->
	</section> <!-- /.clients -->
	<section id="contact" class="contact">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<!-- Section title -->
					<h2 class="title -black">Contact us</h2>
					<span class="subtitle h3 -yellow">Sure...We can take some time for chat</span>
				</div>
			</div> <!-- /.row -->
			<div class="row box-container">
				<div class="col-md-10 col-md-offset-1">
					<form class="contact-form">
						<div class="container-fluid">
							<div class="row">
								<div class="col-sm-6">
									<label class="sr-only" for="Name">Name</label>
									<input type="text" name="name" id="Name" class="name" placeholder="Name" required>
								</div>
								<div class="col-sm-6">
									<label class="sr-only" for="Email">Email</label>
									<input type="email" name="email" id="Email" class="email" placeholder="Mail" required>
								</div>
							</div> <!-- /.row -->
							<div class="row">
								<div class="col-sm-12">
									<label class="sr-only" for="Subject">Subject</label>
									<input type="text" name="subject" id="Subject" class="subject" placeholder="Subject" required>
								</div>
							</div> <!-- /.row -->
							<div class="row">
								<div class="col-sm-12">
									<label class="sr-only" for="Message">Message</label>
									<textarea name="message" id="Message" class="message" rows="7" placeholder="Message" required></textarea>
								</div>
							</div> <!-- /.row -->
							<div class="row">
								<div class="col-sm-12">
									<button type="submit" class="btn btn-submit">Send</button>
								</div>
							</div> <!-- /.row -->
						</div> <!-- /.container -->
					</form>	<!-- /.contact-form -->
				</div>
			</div> <!-- /.row -->
		</div> <!-- /.container -->
	</section> <!-- /.contact -->
</main>
<footer id="footer" class="footer">
	<!-- Section title -->
	<h2 class="sr-only">Footer</h2>
	<div class="container">
		<div class="row">
			<div class="col-sm-6">
				<small class="copyright -yellow">Copyright &copy; 2021.Company name All rights reserved.</small>
			</div>
			<div class="col-sm-6">
				<ul class="social-list">
					<li><a href="javascript:void(0)"><span class="icon icon-facebook" aria-hidden="true"></span></a></li>
					<li><a href="javascript:void(0)"><span class="icon icon-twitter" aria-hidden="true"></span></a></li>
					<li><a href="javascript:void(0)"><span class="icon icon-dribbble" aria-hidden="true"></span></a></li>
					<li><a href="javascript:void(0)"><span class="icon icon-google" aria-hidden="true"></span></a></li>
					<li><a href="javascript:void(0)"><span class="icon icon-youtube" aria-hidden="true"></span></a></li>
				</ul>
			</div>
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</footer>	
<!-- Scripts -->
<!-- Latest compiled and minified JavaScript Bootstrap-->
<!-- Custom JS -->
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	Collect from <a href="http://www.51qianduan.com/"  title="网站模板">模板之家</a>
	<a href="https://www.51qianduan.com/"  title="查字典">查字典</a>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到