用HTML CSS JS打造企业级官网-源码直接可用

共计 17261 个字符，预计需要花费 44 分钟才能阅读完成。

页面效果：本前端网站应用多个 JS 特效

1.`index.html`：

DOCTYPE html>
html lang="zxx">
head>
	title>蓝网团队title>
	meta name="viewport" content="width=device-width, initial-scale=1">
	meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	script>
	link href="css/ 简介.css" rel='stylesheet' type='text/css' />
head>
body>
	div class="banner-sec-agile">
		div class="top-nav menu-top">
			div class="container">
				div class="navbar-header">
					h1>
						蓝色网络安全建设
					h1>
				div>

				div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					div class="menu-left navbar-right">
						ul class="nav navbar">
							li>
								a href="index.html" class="active">主页a>
							li>
							li>
								a href="#about" class="scroll">关于蓝网a>
							li>
							li>
								a href="#education" class="scroll">网络安全a>
							li>
							li>
								a href="#gallery" class="scroll">公益项目a>
							li>
							li>
								a href="#contact" class="scroll">联系方式a>
							li>
						ul>
					div>
				div>
			div>
		div>

		section class="banner-w3l">
			div class="container">
				div class="banner-left-agile">
					img src="images/ 空白 logo.jpg" alt="" class="animated-img"/>
				div>
				div class="banner-left-wthree">
					h6>你好！我是：h6>
					h2>温轻舟h2>
						div class="popEffect">
							span>网页设计师span>
							span>爬虫工程师span>
							span>阿里云专家博主span>
							span>CSDN 全栈领域创作者span>
						div>
					p class="zi">蓝网，意在打造网络安全建设，维护网络蓝天的纯净p>
					a href="#contact" class="wthree-btn btn-6 scroll">联系我
						span>span>
					a>
				div>
			div>
		section>
	div>
	div class="banner-bottom-agileits" id="about">
		div class="container">
			h3 class="tittle-w3ls">
				关于蓝网
			h3>
			div class="welcome-sub-agileits">
				div class="col-md-111 banner_bottom_left-w3ls">
					h4>蓝网团队h4>
					p>
						      网络安全涵盖广泛，从日常浏览的普通网站到关乎国家安全的机密信息，维护网络安全是每个人的责任与义务。br>
						      蓝网团队自成立之初，就致力于从根本上加强网络安全防护，严厉打击不良及违法网站，以保护网络环境的纯净与安全。为此，蓝网团队不仅采取了强有力的技术措施，还成立了公益性的网络项目，旨在广泛宣传网络安全技术知识，提升公众对网络安全的认识与防范能力。通过举办研讨会以及发布教育资料，蓝网团队积极引导社会各界关注网络安全问题，共同构建安全、健康的网络环境。未来，蓝网团队将继续秉持初心，不断创新，为维护网络世界的和谐稳定贡献更多力量。p>
					a href="#contact" class="wthree-btn btn-6 scroll">联系我
						span>span>
					a>
				div>
				div class="col-md-6 banner_bottom_right-w3l">
					ul class="some_facts">
						li>
							span class="fa fa-bar-chart" aria-hidden="true">span>
							label>***label> 累计护网次数li>
						li>
							span class="fa fa-line-chart" aria-hidden="true">span>
							label>***label> 累计公益项目li>
						li>
							span class="fa fa-magic" aria-hidden="true">span>
							label>***label> 成员人数li>
						li>
							span class="fa fa-user" aria-hidden="true">span>
							label>100 万 +label> 累计教程字数li>
					ul>
				div>
			div>
		div>
	div>

	div class="stats-w3layouts">
		div class="container">
			div class="stats-info">
				div class="col-xs-3 stats-grid-w3-agile">
					div class="stats-img">
						span class="fa fa-clone" aria-hidden="true">span>
					div>
					p>p>
				div>
				div class="clearfix">div>
			div>
		div>
	div>

	div class="education-agileinfo" id="education">
		h3 class="tittle-w3ls">网络安全h3>
		div class="container">
			div class="col-xs-4 eduleft-agileinfo">
				div class="left1-w3ls">
					h3>青少年网络安全h3>
					p>（1）网络沉迷：p>
					p>（2）网络诈骗：p>
					p>（3）网络欺凌：p>
				div>
				div class="left1-w3ls">
					h3>隐私泄露问题h3>
					p>（1）主动泄露：p>
					p>（2）恶意软件：p>
					p>（3）技术漏洞：p>
				div>
				div class="left1-w3ls">
					h3>不良信息接触h3>
					p>（1）不良网站：p>
					p>（2）社交媒体：p>
					p>（3）搜索引擎：p>
				div>
			div>
			div class="col-xs-8 eduright-agileinfo">
				div class="right1-w3ls">
					h3>类型描述：h3>
					p>指青少年习惯长时间沉浸在网络空间，对互联网产生依赖，忽视现实事务等p>
					p>红包返利、免费皮肤陷阱、钓鱼网站、解除游戏防沉迷限制及钓鱼链接诈骗等p>
					p>用文字、音视频等形式对他人进行侮辱、诽谤、威胁或私自公开他人信息等p>
				div>
				div class="right1-w3ls">
					h3>类型描述：h3>
					p>在社交平台上分享个人信息，如生日、住址，参与在线问卷调查或抽奖活动等p>
					p>下载并安装恶意软件后，该软件会在后台收集用户信息，并将其发送给攻击者p>
					p>企业的系统或应用存在安全漏洞，被攻击者利用以窃取用户数据p>
				div>
				div class="right1-w3ls">
					h3>类型描述：h3>
					p>指含有淫秽、色情、暴力、赌博、大量广告、恐怖主义等违法违规内容的网站p>
					p>一些不法分子或恶意用户会利用社交媒体散布不良信息，危害网络安全p>
					p>在使用搜索引擎时，一些不良信息链接或恶意软件，有可能隐藏在结果页面中p>
				div>
			div>
			div class="clearfix">div>
		div>
	div>

	div class="stats-w3layouts">
		div class="container">
			div class="stats-info">
				div class="col-xs-3 stats-grid-w3-agile">
					div class="stats-img">
						span class="fa fa-clone" aria-hidden="true">span>
					div>
					p>p>
				div>
				div class="clearfix">div>
			div>
		div>
	div>

	div class="gallery-agile" id="gallery">
		div class="container">
			h3 class="tittle-w3ls">公益项目h3>
			div class="gallery-agile-kmsrow">
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="col-xs-4 gallery-agile-grids">
					div class="portfolio-hover">
						a href="images/ 空白 logo.jpg" data-lightbox="example-set">
							img src="images/ 空白 logo.jpg" class="img-responsive zoom-img" alt="" />
						a>
					div>
				div>
				div class="clearfix"> div>
			div>
		div>
	div>

	div class="contact-w3l" id="contact">
		div class="container">
			h3 class="tittle-w3ls">联系我
			h3>
			p class="we">联系方式:
			a class="email-link">邮箱: 2*********@qq.coma>
			p>
		div>
	div>
	div class="footer-bot-wthree">
		div class="container">
			div class="visit-w3ls">
				h3>欢迎阅读h3>
			div>
			p class="copy-right-agile">蓝网团队
				a>温轻舟a>
			p>
		div>
	div>
	script type="text/javascript" src="js/jquery-2.1.4.min.js">script>
	script type="text/javascript" src="js/move-top.js">script>
	script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	script>

	script type="text/javascript">
		$(document).ready(function () {
			$().UItoTop({
				easingType: 'easeOutQuart'
			});
		});
		jQuery.extend( jQuery.easing,
{
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
});
	script>
body>
html>

2. `简介.css`：


body, html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;  
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block; 
}


body {
	padding: 0;            
	margin: 0;             
	background: #FFF;      
    font-family: 'Open Sans', sans-serif;  
}

body a {
	transition: 0.5s all;        
	-webkit-transition: 0.5s all; 
	-moz-transition: 0.5s all;    
	-o-transition: 0.5s all;      
	text-decoration: none;       
}


p {
    
    margin: 0;
    
    font-size: 15px;
    
    line-height: 1.9;
    
    color: #999;
    
    letter-spacing: 1px;
}


nav.navbar.navbar-default {
    
    background-color: inherit;
    
    border: none;
    
    margin: 0;
}


ul.nav.navbar {
    
    text-align: center;
    
    margin: 17px 0 0;
    
    min-height: inherit;
}


.top-nav ul li {
    
    margin: 0 1em;
    
    display: inline-block;
}


.top-nav ul li a {
    
    text-decoration: none;
    
    letter-spacing: 1px;
    
    font-size: 17px;
    
    color: #fff;
    
    position: relative;
    
    padding: 0;
    
    display: inline-block;
}


.nav > li > a:hover, .nav > li > a:focus {
    background: none;  
}


.top-nav ul li a:hover, .top-nav ul li a.active {
    color: #305dff;  
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);     
    -o-transform: scale(1.1);       
    -ms-transform: scale(1.1);      
    transform: scale(1.1);          
}


.top-nav .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #FF5722;  
    text-decoration: none;  
    background-color: transparent;  
}


.navbar-right {
    margin-right: 0;  
}


.banner-sec-agile {
    background: #0ecff7;  
}


.banner-left-agile img {
    height: 450px;  
    width: 100%;  
}


.banner-left-agile {
    float: left;  
    width: 45%;  
}


.banner-left-wthree {
    float: right;  
    width: 50%;  
}

.banner-left-wthree {
    margin:5px auto 0; 
    text-align: right; 
}

.banner-left-wthree h6 {
    font-size: 28px; 
    color: #fff; 
    letter-spacing: 1px; 
    font-style: italic; 
    margin-bottom: 5px; 
}


.banner-left-wthree h2 {
    color: #5d30ff;
    font-size: 80px; 
    font-family: 'Scada', sans-serif; 
    text-shadow: 2px 2px 11px rgba(12, 70, 92, 0.46); 
    font-style: italic; 
}

.banner-left-wthree p.zi {
    
  background: linear-gradient(to bottom, #89dc4d, #32a9cd, #885cd0, #cb0db1,dimgray);
  
  -webkit-background-clip: text;
  
  -webkit-text-fill-color: transparent;
  color: transparent;
    letter-spacing: 1px; 
    font-size: 15px; 
    margin-top: 4em; 

    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0.8); 
    opacity: 0; 
    animation: coolFadeInZoomMove 3.5s forwards 1.5s;
}


@keyframes coolFadeInZoomMove {
    0% {
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.8); 
    }
    20% {
        opacity: 1; 
        transform: translate(-50%, -50%) scale(2); 
    }
    50% {
        opacity: 1; 
        transform: translate(-50%, -50%) scale(2); 
    }
    70% {
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); 
    }
    100% {
        opacity: 1; 
        transform: translate(0, 0) scale(1); 
        top: auto; 
        left: auto; 
        position: static; 
    }
}


.popEffect span {
    animation: pop 10s linear infinite 0s; 
    -ms-animation: pop 10s linear infinite 0s; 
    -webkit-animation: pop 10s linear infinite 0s; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    width: 70%; 
    left:9.5%; 
    color: #fff; 
    font-family: 'Open Sans', sans-serif; 
    letter-spacing: 1px; 
    font-size: 40px; 
}

.popEffect span:nth-child(2){
    animation-delay: 2.5s; 
    -ms-animation-delay: 2.5s; 
    -webkit-animation-delay: 2.5s; 
}
.popEffect span:nth-child(3) {
    animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    -webkit-animation-delay: 5s; 
}

.popEffect span:nth-child(4) {
    animation-delay: 7.5s; 
    -ms-animation-delay: 7.5s; 
    -webkit-animation-delay: 7.5s; 
}
.popEffect span:nth-child(5) {
    animation-delay: 10s; 
    -ms-animation-delay: 10s; 
    -webkit-animation-delay: 10s; 
}
@-moz-keyframes pop {
    
    0% { opacity: 0; } 
    5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } 
    10% { opacity: 1; -moz-transform: translateY(0px); } 
    25% { opacity: 1; -moz-transform: translateY(0px); } 
    30% { opacity: 0; -moz-transform: translateY(0px); } 
    80% { opacity: 0; } 
    100% { opacity: 0; } 
}

@-webkit-keyframes pop {
    
    
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes pop {
    
    
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

@-ms-keyframes pop {
    
    
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

.wthree-btn {
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    padding: 11px 20px; 
    color: #fff; 
    z-index: 9; 
    font-size: 1em; 
    outline: none; 
    letter-spacing: 4px; 
    font-weight: 300; 
    background-color: #ff304f; 
    -webkit-transition: .5s all; 
    -moz-transition: .5s all; 
    -o-transition: .5s all; 
    -ms-transition: .5s all; 
    transition: .5s all; 
    border-radius: 20px 0 0; 
    margin-top: 2em; 
}

.wthree-btn.btn-6 span {
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -o-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    background-color: #1796f8; 
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
    -moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
    -o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
    -ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    z-index: -1; 
}


.wthree-btn.btn-6:hover,
.wthree-btn.btn-6:focus {
    color: #fff;
}


.wthree-btn.btn-6:hover span {
    width: 225%;
    height: 562.5px;
}


.wthree-btn.btn-6:active {
    background-color: #FFC107;
}


h3.tittle-w3ls {
  
   background: linear-gradient(to bottom, #3ad3ee, #2fb6ff, #00acfc, #1655c1,deepskyblue,cadetblue);
  
  -webkit-background-clip: text;
  
  -webkit-text-fill-color: transparent;
  color: transparent;
    font-size: 3.7em;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px; 
}

.we {
    
    text-align: center; 
    margin-bottom: 5px; 
    font-weight: bold; 
    color: #0f1011;
}


.email-link {
    display: block; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    color: #0f1011; 
    text-decoration: none; 
    font-size: 16px; 
    transition: 0.3s; 
}

.email-link:hover {
    text-decoration: underline; 
    color: #0ecff7;
}



h3.tittle-w3ls span {
    color: #0ecff7;
}

 
.banner-bottom-agileits,
.education-agileinfo,
.stats-w3layouts,
.expert-agile,
.experience-w3layouts,
.services-w3-agile,
.contact-w3l {
    padding: 20px 0;
}

.banner_bottom_left-w3ls
{
    margin-right: 20px;
}

.banner_bottom_left-w3ls h4 {
    font-size: 2.2em;
    color: #262c38;
    letter-spacing: 2px;
    margin-bottom: 20px;
}


.banner_bottom_left-w3ls p {
    color: #666;
    line-height: 2em;
    margin-bottom: 1em;
}


.banner_bottom_left-w3ls p:nth-child(3) {
    margin-bottom: 0;
}


.banner_bottom_right-w3l {
    padding: 20px 50px;
    margin-top: 20px; 
    margin-bottom: 30px; 
    
    
    box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}


ul.some_facts li {
    list-style: none;
    margin: 15px 0;
    color: #444;
    font-size: 1.1em;
    letter-spacing: 1px;
}


ul.some_facts span.fa {
    width: 60px;
    font-size: 21px;
    height: 60px;
    background: #fff;
    text-align: center;
    line-height: 57px;
    margin-right: 30px;
    border: 1px solid #000;
    box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -webkit-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -moz-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
    -o-box-shadow: 0 1px 1px 1px rgba(12, 12, 12, 0.17);
}


ul.some_facts label {
    font-size: 1.6em;
    color: #000;
    margin-right: 12px;
}


.stats-w3layouts {
    background: url(../images/bg.jpg)no-repeat center fixed;
    background-size: cover;
    text-align: center;
}


.stats-grid-w3-agile {
    margin: 10em 0;
}


.stats-info p {
    color: #e6e6e6;
    letter-spacing: 3px;
    font-size: 20px;
    font-weight: 300;
}


.right1-w3ls h3, .left1-w3ls h3 {
    color: #000;
    text-transform: uppercase;
    margin-bottom: .5em;
    font-size: 21px;
    letter-spacing: 1px;
}


.right1-w3ls p, .left1-w3ls p {
    font-size: 15px;
    letter-spacing: .5px;
    color: #909090;
}


.right1-w3ls {
    margin-bottom: 3em;
}


.left1-w3ls {
    margin-bottom: 3em;
    text-align: right;
    padding-right: 4em;
    position: relative;
}


.left1-w3ls span {
    position: absolute;
    right: -11%;
    top: -4%;
    font-size: 38px;
    color: #ff304f;
}


.left1-w3ls:nth-child(4) {
    margin-bottom: 0em;
}


.right1-w3ls:nth-child(4) {
    margin-bottom: 0em;
}


.eduright-agileinfo {
    padding-left: 5em;
}


.eduleft-agileinfo {
    border-right: 1px solid rgba(8, 8, 8, 0.25);
}


.left1-w3ls h3 {
    color: #0ecff7;
}


.eduleft-agileinfo, .eduright-agileinfo {
    margin-top: 1.5em;
}


.expert-agile {
    background: #0ecff7;
}


.expert-agile h3.tittle-w3ls span {
    color: #fff;
}


.w3-agileits-services-w3-agile-grids {
    margin: 4em 0 0 0;
}


.services-w3-agile-right-grid {
    text-align: center;
}


#toTop {
    display: none; 
    text-decoration: none; 
    position: fixed; 
    bottom: 24px; 
    right: 1%; 
    overflow: hidden; 
    z-index: 999; 
    width: 64px; 
    height: 64px; 
    border: none; 
    text-indent: 100%; 
    background: url("../images/move-up.png") no-repeat 0px 0px; 
}


#toTopHover {
    width: 64px; 
    height: 64px; 
    display: block; 
    overflow: hidden; 
    float: right; 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
}

@media(max-width: 1280px){
    .banner-left-wthree h2 {
        font-size: 50px; 
        height: 35px; 
    }
    .banner-w3l {
        margin-top: 1px; 
    }
}


* {
  -webkit-box-sizing: border-box; 
}


.img-responsive {
  max-width: 100%; 
}


h1, h2, h6 {
  font-family: inherit; 
  font-weight: 500; 
  line-height: 1; 
  color: inherit; 
}


h1, h2 {
  margin-top: 20px; 
  margin-bottom: 10px; 
}


.container {
  padding-right: 55px; 
  padding-left: 55px; 
}


.col-xs-4, .col-xs-8 {
  float: left; 
}


.col-xs-8 {
  width: 60.66666667%; 
}


.col-xs-4 {
  width: 33.33333333%; 
}


@media (min-width: 992px) {
  .col-md-6 {
    float: right; 
    

  }
}


.welcome-sub-agileits {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    
    padding: 0 15px; 
}

.banner_bottom_left-w3ls,
.banner_bottom_right-w3l {
    
    flex: 0 0 auto; 
    width: calc(50% - 15px); 
    
}


@media (min-width: 768px) {
  .navbar-header {
    float: left; 
  }
}


.container:after,
.navbar-collapse:before { 
  display: table; 
  content: ""; 
}


.container:after {
  clear: both; 
}



.top-nav {
    background: #333;     
    padding: 1em 0;       
}


.navbar-header h1{
    color: #298ee7;                
    font-size: 2.5em;           
}


.nav li a {
    color: #fff;                
    padding: 0.5em 1em;         
    text-decoration: none;      
    display: inline-block;      
    transition: 0.3s;           
}


.nav li a:hover, .nav li a.active {
    background: #73f16f;        
    border-radius: 5px;         
}




.banner-w3l {
    background-size: cover;     
    padding: 6em 0;             
    color: #fff;                
    text-align: center;         
}


.banner-left-agile img {
    width: 200px;               
    height: 200px;              
    border-radius: 50%;         
}

.banner-left-agile img.animated-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    left: 100px; 
    top: -300px; 
    
    animation: slideDownBounce 3.5s forwards,
               shrinkAndMove 1.2s forwards 1.5s,
               rotate 3s linear infinite 4.7s;
}

@keyframes slideDownBounce {
    0% {
        top: -300px; 
        opacity: 0;
        transform: scale(3); 
    }
    50% {
        top: 0; 
        opacity: 1;
        transform: translateY(-20px) scale(1.1); 
    }
    70% {
        transform: translateY(0); 
    }
    100% {
        top: 0; 
        transform: scale(1.1); 
    }
}

@keyframes shrinkAndMove {
    0% {
        transform: scale(1.1); 
        left: 100px; 
    }
    100% {
        transform: scale(1); 
        left: 0; 
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(360deg); 
    }
}



.banner-left-wthree h2 {
    font-size: 2.5em;           
    margin: 1em 0 0em;        
}
.popEffect span {
    display: block; 
    font-size: 1.5em; 
    margin: 0.3em 0; 
    color: #bb00ff; 
    transition: 1s; 
}


.wthree-btn {
    display: inline-block; 
    padding: 0.7em 2em; 
    color: #fff; 
    background: #0d131a; 
    text-transform: uppercase; 
    border: none; 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
    transition: 0.3s; 
}

.wthree-btn:hover {
    background: #054b93; 
}

.wthree-btn:hover span {
    left: 0; 
}


.left1-w3ls p{
    font-size: 1em; 
    color: #777; 
    line-height: 2em; 
}
.right1-w3ls p
{
    font-size: 1em; 
    color: #777; 
    line-height: 2em;
}

.gallery-agile {
    padding: 20px 0; 
    background: #f5f5f5; 
}


.gallery-agile-grids {
    padding: 0.5em; 
}


.portfolio-hover img {
    width: 100%; 
    transition: 0.3s; 
}


.portfolio-hover img:hover {
    transform: scale(1.1); 
}



.footer-bot-wthree {
    padding: 2em 0; 
    background: #333; 
    text-align: center; 
    color: #fff; 
}


.copy-right-agile a {
    color: #007BFF; 
    text-decoration: none; 
    transition: 0.3s; 
}


.copy-right-agile a:hover {
    color: #FF6347; 
}


.scroll {
    cursor: pointer; 
}