蓝色大气形式HTML个人主页网页模板代码



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

35 139 47



模板描述:蓝色 大气 HTML 个人主页 网页模板代码。蓝色大气形式HTML个人主页网页模板代码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=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">

2. HTML代码

    <div class="sidenav">
		<div class="side_top">
			<img src="images/t3.jpg" alt="news image" class="img-fluid navimg">
			<h1> Eu ac iaculis ac nunc nisi lorem <br>vulputate lorem neque cubilia ac in <br>adipiscing in curae</h1>
		</div>
		<!-- header -->
		<header>
			<div class="container-fluid px-lg-5 ">
				<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="index.html">Home</a></li>
							 <li class="mt-sm-3"><a href="#about" class="scroll">About</a></li>
							 <li class="mt-sm-3"><a href="#gallery" class="scroll">Gallery</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>
    </div>
    <div class="main" id="about">
        <div class="banner-text-w3ls">
            <div class="container">
                <div class="mx-auto text-left">
                    <h2>Eu ac iaculis ac nunc nisi lorem
					<br>vulputate lorem neque cubilia ac in.</h2>
					<p class="banp mt-5">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis ac nunc nisi lorem vulputate lorem neque cubilia ac in adipiscing in curae lobortis tortor primis integer massa adipiscing id nisi accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque cubilia.</p>
					<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="#services" role="button">Learn More</a>
                </div>
            </div>
        </div>
		 <!-- Gallery -->
    <section class="gallery" id="gallery">
        <div class="container py-lg-5">
           <h3 class="w3_head mb-5">My Projects</h3>
			 <div class="row news-grids mt-lg-5 mt-4 text-center">
                <div class="col-md-6 gal-img">
                    <a href="#gal1"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-6 proj-1 gal-img">
                    <a href="#gal2"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-6 mt-5 gal-img">
                    <a href="#gal3"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-6 mt-5 gal-img">
                    <a href="#gal4"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-6 mt-5 gal-img">
                    <a href="#gal5"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-6 mt-5 gal-img">
                    <a href="#gal6"><img src="images/g7.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>
        </div>
        <!-- popup-->
        <div id="gal1" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal2" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal3" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup3 -->
        <!-- popup-->
        <div id="gal4" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal5" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
        <!-- popup-->
        <div id="gal6" class="pop-overlay animate">
            <div class="popup">
                <img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
                <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                <a class="close" href="#gallery">&times;</a>
            </div>
        </div>
        <!-- //popup -->
    </section>
<!-- services -->
			<section class="slide-wrapper" id="services">
                    <div class="services">
					<h3 class="w3_head mb-5">Our Services</h3>
					<div class="row service_w3top mt-5">
                                <div class="col-lg-6">
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-pencil"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Inagittis Lacg</h4>
                                            <p>
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-rocket"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Velitdipisc Inagittis</h4>
                                            <p>
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                                <div class="col-lg-6">
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-laptop"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Vulputate Velitdipisc</h4>
                                            <p>
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-paint-brush"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                            <p>
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                            </div>
                            <!-- .Row ends here -->
                        <!-- .Container ends here -->
                    </div>
                    <!-- .Services ends here -->
                </section>
			<!-- //services -->
		<!-- news -->
       <div class="news" id="news">
		<div class="text-left">
			<h3 class="w3_head mb-5">Recent News</h3>
		</div>
			<div class="row news-grids">
				<div class="col-lg-6 news-grids-left">
					<div class="news_top">
						<img src="images/g1.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
				<div class="col-lg-6 news-grids-middle">
					<div class="news_top">
						<img src="images/g8.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
				<div class="col-lg-6 news-grids-right">
					<div class="news_top">
						<img src="images/g9.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
				<div class="col-lg-6 news-grids-right">
					<div class="news_top">
						<img src="images/g10.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
				<div class="col-lg-6 news-grids-right">
					<div class="news_top">
						<img src="images/g11.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
				<div class="col-lg-6 news-grids-right">
					<div class="news_top">
						<img src="images/g12.jpg" alt="news image" class="img-fluid">
						<h4>Nulla pellentesque</h4>
						<p class="newsp">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis </p>
					</div>
				</div>
			</div>
			<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr" href="#about" role="button">Learn More</a>			
		</div>
<!-- //news -->
<!-- contact -->
	 <section class="wedo" id="contact">
			<h3 class="w3_head mb-5">Get In Touch </h3>
		   <p class="banp mt-5"> Integer porttitor mollisar curae suspendisse mauris posuere accumsan massa posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus sit arcu sociis.</p>
		   <div class="row mt-4">
			   <div class="col-lg-7 contact_grid_right">
					<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>	
							<textarea name="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
							<input type="submit" class="btn" value="Send Message">
					</form>
				</div>
				<div class="col-lg-5 contact_grid_left">
				<h3 class="w3_head mb-5">Locate Us </h3>
					<ul class="footer-bottom-list">
							<li>
								<span class="fa fa-map-marker"></span> 3481 Honey Street
								<span> California, USA </span>
							</li>
							<li>
								<span class="fa fa-envelope"></span>
								<a href="https://www.51qianduan.com/">51前端</a>
							</li>
							<li>
								<span class="fa fa-phone"></span> +143 367 436 2049 </li>
							<li>
								<span class="fa fa-fax"></span> +166 367 808 5055 </li>
							<li>
								<span class="fa fa-globe"></span>
								<a href="#"> www.websitename.com</a>
							</li>
					</ul>
				</div>
			</div>
			<div class="cpy-right text-left">
				<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
				</p>
			</div>
	</section>
	 <!-- //contact -->
    </div>



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


热门标签: 扁平化 宽屏全屏 黑色 bootstrap自适应 蓝色 普通自适应 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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