白色欧美样式bootstrap个人单页网页模板代码下载



4 12 5



模板描述:白色 欧美 bootstrap 个人单页 网页模板 代码下载,白色欧美样式bootstrap个人单页网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

2. HTML代码

    <div class="sidenav text-center">
		<div class="side_top">
			<img src="images/about.jpg" alt="news image" class="img-fluid navimg">
			<h1 class="top_hd mt-2"><a href="index.html">Conjoint</a></h1>
			<p class="top_hdp mt-2">Fermentum lobortis non tristique ante proin sociis</p>
        </div>
		<!-- header -->
        <header>
			<div class="nav-top">
				<nav class="mnu mx-auto">
                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop">
						<ul class="menu">
							<li class="active"><a href="#home" class="scroll">Home</a></li>
							 <li class="mt-sm-3"><a href="#about" class="scroll">About</a></li>
							<li class="mt-sm-3"><a href="#services" class="scroll">Services</a></li>
							<li class="mt-sm-3"><a href="#news" class="scroll">News</a></li>
                            <li class="mt-sm-3"><a href="#contact" class="scroll">Contact</a></li>
                        </ul>
				</nav>
			</div>
		</header>
        <!-- //header -->
    </div>
    <div class="main">
        <div class="banner-text-w3ls" id="home">
			<div class="container">
                <div class="mx-auto text-center">
                    <h3>Nibh eleifend nulla nascetur pharetra
				</h3>
					<p class="banp mx-auto mt-3">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu  </p>
					<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="#about" role="button">Learn More</a>
                </div>
            </div>
        </div>
		<!-- about -->
<section class="slide-wrapper" id="about">
	<h2 class="w3_head mb-4">About Me </h2>
	<h4 class="main_hd"> Fermentum lobortis non tristique ante proin sociis <br>accumsan lobortis auctor etiam.</h4>
	<p class="iner mt-md-5"> Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam mus lacinia lobortis phasellus suscipit. Fermentum lobortis non tristique ante proin sociis accumsan lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia natoque aenean scelerisque.</p>
</section>
<!-- //about -->
<!-- services -->
<section class="services" id="services">
	<div class="container">
		<h3 class="w3_head mb-4 text-left"> Services</h3>
		<p class="iner mt-md-5 text-left"> Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam mus lacinia lobortis.Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. </p>
			<ul class="list-unstyled mt-5">
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-code"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum adipiscing </h6>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-cubes"></span>
						</div>
						<div class="col-10">
							<h6>Fermentum lobortis </h6>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-book"></span>
						</div>
						<div class="col-10">
							<h6>Tristique ante </h6>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-coffee"></span>
						</div>
						<div class="col-10">
							<h6>Nascetur adipiscing</h6>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-bolt"></span>
						</div>
						<div class="col-10">
							<h6>Primis aliquam mus</h6>
						</div>
					</div>
				</li>
				<li>
					<div class="row">
						<div class="col-2 ic-lft">
							<span class="fa fa-cog"></span>
						</div>
						<div class="col-10">
							<h6>Lobortis phasellus</h6>
						</div>
					</div>
				</li>
			</ul>
	</div>
</section>
		<!-- //services -->
		<!-- news -->
       <div class="news" id="news">
		<h3 class="w3_head mb-4 text-left"> News</h3>
		<p class="iner mt-md-5 text-left"> Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam mus lacinia lobortis.Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. </p>
				<div class="row news-grids-left mt-5">
					<div class="col-lg-5 news_top">
						<img src="images/g1.jpg" alt="news image" class="img-fluid">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>Nulla pellentesque</h5>
						<p class="mt-3">Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>
					</div>
				</div>
				<div class="row news-grids-middle">
					<div class="col-lg-5 news_top">
						<img src="images/g2.jpg" alt="news image" class="img-fluid">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>Nulla pellentesque</h5>
						<p class="mt-3">Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>
					</div>
				</div>
				<div class="row news-grids-right">
					<div class="col-lg-5 news_top">
						<img src="images/g3.jpg" alt="news image" class="img-fluid">
					</div>
					<div class="col-lg-7 news_top1">
						<h5>Nulla pellentesque</h5>
						<p class="mt-3">Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>
					</div>
				</div>	
		</div>
<!-- //news -->
<!-- contact -->
	 <section class="wedo" id="contact">
	<h3 class="w3_head mb-4 text-left"> Contact Me</h3>
	<p class="iner mt-md-5 text-left"> Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam mus lacinia lobortis.Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. </p>
		<div class="contact_grid_right mt-5 mx-auto text-left">
				<form action="#" method="post">
					<div class="row contact_top">
						<div class="col-sm-6">
							<input type="text" name="Name" placeholder="Name" required="">
						</div>
						<div class="col-sm-6">
							<input type="email" name="Email" placeholder="Email" required="">
						</div>
					</div>	
						<input type="text" name="Name" placeholder="Name" required="">
						<textarea name="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
						<button type="submit" class="btn">Send Message</button>
						<button type="reset" class="btn">Reset</button>
						<div class="clearfix"></div>
				</form>
			</div>
			<div class="cpy-right text-center">
				<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			</div>
	</section>
	 <!-- //contact -->
    </div>



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


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 博客 blog 简洁 简约 简单 白色 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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