Javascript 在html站点中添加3列
我在这里建立了这个网站。但这看起来真的很奇怪，因为他们是一个很大的空白。我怎样才能拿出一篇文章，让它紧跟在他们身边。网站链接： 我的html：Javascript 在html站点中添加3列,javascript,html,css,Javascript,Html,Css,我在这里建立了这个网站。但这看起来真的很奇怪，因为他们是一个很大的空白。我怎样才能拿出一篇文章，让它紧跟在他们身边。网站链接： 我的html： ACA NHS 站在博客上 a:链接{ 颜色：黑色； 背景色：透明； 文字装饰：无； } a:参观了{ 颜色：黑色； 背景色：透明； 文字装饰：无； } a:悬停{ 颜色：黑色； 背景色：透明； 文字装饰：无； } a:主动的{ 颜色：黑色； 背景色：透明； 文字装饰：无； } .btn{ 宽度：150px； 高度：150像素； 背景：ddd； 位置：
ACA NHS
站在博客上
a:链接{
颜色：黑色；
背景色：透明；
文字装饰：无；
}
a:参观了{
颜色：黑色；
背景色：透明；
文字装饰：无；
}
a:悬停{
颜色：黑色；
背景色：透明；
文字装饰：无；
}
a:主动的{
颜色：黑色；
背景色：透明；
文字装饰：无；
}
.btn{
宽度：150px；
高度：150像素；
背景：ddd；
位置：相对位置；
文本对齐：居中；
利润率：15px；
溢出：隐藏；
边界半径：100%；
显示：内联块；
}
.btn.download{
背景：#00CCFF；
}
.btn.download.cloud{
盒子阴影：0px 0px 0px 0px 0px 0px 0px 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 PX 0 0 0 0 0 0 0 0 0 PX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 A3cc，1像素1像素1像素1像素1像素0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0中国中国中国，2像素00 A30 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 15px 15px 00a3cc、13px 13px 00a3cc、14px 14px 00a3cc、15px 15px 00a3cc、16px 16px 00a3cc、17px 17px 00a3cc、18px 18px 00a3该公司，21PX21PX（21PX21PX）00a3cc，21PX21PX（21PX21PX）00a3cc，22PX22PX22PX（22PX22PX）00a3cc，22PX22PX（00a3cc，23PX23PX（23PX23PX23PX）00a3cc，23PX23PX 23px（00a3cc），24PX24PX24PX24PX 24px（00a3cc，25PX25PX25PX25PX25PX（30px）00a3像素）00A300a3中国，00a3cc，26px，26px（26px）是作为作为作为作为一个中国中国中国中国的A3A3A3A3A3A3，26px，26px作为作为作为作为一个中国，26像素，该该公司，26PX26作为作为作为作为作为作为一个中国的一个中国，该公司，该公司的一个中国，该公司，该公司的26像素，该00a3cc、31px 31px 00a3cc、32px 32px 00a3cc、33px 33px 00a3cc、34px 34px 00a3cc、35px 35px 00a3cc、36px 36px 00a3cc、37p该公司共有39PX39PX（39PX39PX）00A3C，40PX40PX40PX（40PX40PX）00A3C，40PX40PX40PX（00A3C），00A3C，40PX40PX40PX（00A3C），41PX41PX（41PX41PX）00A3C，41PX41PX41PX（00A3A3C）00a3cc，38PX38PX38PX38PX 38px（38px）38px（38px）00A3A3A3A3A3A300？00A3C，39PX39PX39PX，00A3A3A3A3300，00A3A3A3A3C，44PX44PX44PX4444PX44PX44PX44PX44PX44PX44像素（该）00A300A300A300A300A3协协协协协协协协协协协协协协协，00A300A300A3协协协协协协，00A333333协协，00A3协协协，00A3A349px 49px#00a3cc，50px 50px#00a3cc；
}
.btn.download.arrow{
-webkit动画：下载1s线性无限；
动画：下载1s线性无限；
}
.btn.upload{
背景#F49845；
}
.btn.upload.cloud{
盒影：0px 0px 0px 0px（f1515）f15f15f15f15f15f15f15f15f15f15f15f15f15f15f15f15f15f15f15、3p3p3px（f15f7d15、4px 4px（f15px0px）f15px 0px 0px（f15px）f15px0px0px（f15f15f7d15、3px3p3p3px3px（f7px）f7d15、f7f7d15、3p3px（f7d15、3px（f7d15、4pxxxxxxxx3px（f15px）f7d15、4px（f1515px）、f15px（f15f15f15、4px（f15px）f15f15px）、f1515F17D15，12px 12px#f17d15，13px 13px#f17d15，14px 14px#f17d15，15px 15px#f17d15，16px 16px#f17d15，17px 17px#f17d15，18px 18px#f17d15、15、15、15、15、19 PX 19 PX 19 PX 19 PX F17D115、20 PX 20 PX 20 PX f17d15、21 PX21 PX f17d15、22 PX22 PX f17d15、22 PX22 PX 22 PX f17d15、15、19 PX19 PX19 PX 19 PX 15、15、24 PX24 PX24 PX 18 18像素18 18像素15、25 PX25 PX25像素15、17像素15、26 PX18像素15、26 PX26 PX26像素15、26 PX26 PX26像素15、18像素15、18像素15、15、15、27 PX27 PX27像素、27 PX27像素27像素、18、18、15、15、15、15、18像素、18像素、15、15、15、15、15、15、15、15、15、15、15、15、15、18 PX7像素、18像素、18像素、15、15、15、15、18像素、18像素、15、15、18像素、PX30PX f17d15，31PX31PX f17d15，32PX32PX f17d15，33PX33PX f17d15，34PX34PX f17d15，35PX35PX f17d15，36PX36PX f17d15，37p第七层1515、39px 39px（第七层1515）、41px 40px（第七层15）、40px 40px（第七层15）、40px 40px（第七层15）、41px 40px（第七层15）、41px 41px（第七层15、41px 41px（第七层15、38px 38px 38px（第七层15）、41px（第五层15、38px（第七层15）、f17层15、15px 38px 39px（第三层）41px（第七层）41px（第七层）第七层15、39px（第七层）、第五层15px）第五层）、41px（第七层）、41px（第七层15、41px（第三层）、第七层）、41px（第七层）、41px（第五、第三层）、第三像素像素像素像素像素像素像素像素#f17d15，49px 49px#f17d15，50px 50px#f17d15；
}
.btn.upload.arrow{
-webkit动画：uplaod 1s线性无限；
动画：uplaod 1s线性无限；
}
.btn.upload.arrow:之后{
顶部：自动；
底部：100%；
边框颜色：透明透明#97CA03透明；
}
.云{
宽度：100px；
高度：40px；
位置：相对位置；
背景：#fff；
显示：内联块；
边界半径：50px；
保证金：60像素自动0；
盒子阴影：0px 0px 0px 0px 0px 0px 0px 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 PX 0 0 0 0 0 0 0 0 0 PX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 A3cc，1像素1像素1像素1像素1像素0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0中国中国中国，2像素00 A30 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 15px 15px 00a3cc、13px 13px 00a3cc、14px 14px 00a3cc、15px 15px 00a3cc、16px 16px 00a3cc、17px 17px 00a3cc、18px 18px 00a3该公司，21PX21PX（21PX21PX）00a3cc，21PX21PX（21PX21PX）00a3cc，22PX22PX22PX（22PX22PX）00a3cc，22PX22PX（00a3cc，23PX23PX（23PX23PX23PX）00a3cc，23PX23PX 23px（00a3cc），24PX24PX24PX24PX 24px（00a3cc，25PX25PX25PX25PX25PX（30px）00a3像素）00A300a3中国，00a3cc，26px，26px（26px）是作为作为作为作为一个中国中国中国中国的A3A3A3A3A3A3，26px，26px作为作为作为作为一个中国，26像素，该该公司，26PX26作为作为作为作为作为作为一个中国的一个中国，该公司，该公司的一个中国，该公司，该公司的26像素，该00a3cc、31px 31px 00a3cc、32px 32px 00a3cc、33px 33px 00a3cc、34px 34px 00a3cc、35px 35px 00a3cc、36px 36px 00a3cc、37p该公司共有39PX39PX（39PX39PX）00A3C，40PX40PX40PX（40PX40PX）00A3C，40PX40PX40PX（00A3C），00A3C，40PX40PX40PX（00A3C），41PX41PX（41PX41PX）00A3C，41PX41PX41PX（00A3A3C）00a3cc，38PX38PX38PX38PX 38px（38px）38px（38px）00A3A3A3A3A3A300？00A3C，39PX39PX39PX，00A3A3A3A3300，00A3A3A3A3C，44PX44PX44PX4444PX44PX44PX44PX44PX44PX44像素（该）00A300A300A300A300A3协协协协协协协协协协协协协协协，00A300A300A3协协协协协协，00A333333协协，00A3协协协，00A3A349px 49px#00a3cc，50px 50px#00a3cc；
}
.cloud:之后，.cloud:之前{
内容：''；
位置：绝对位置；
宽度：60px；
高度：60px；
边界半径：100%；
顶部：-20px；
背景：#fff；
左：5px；
}
.云：以前{
宽度：40px；
高度：40px；
左：50px；
}
.阿罗{
位置：绝对位置；
左：0；
右：0；
保证金：自动；
z指数：5；
顶部：10px；
宽度：15px；
高度：10px；
背景#97CA03；
显示：内联块；
}
.阿罗：之后{
内容：''；
位置：绝对位置；
左：-8px；
最高：100%；
边框：15px实心透明；
边框顶部颜色：#97CA03；
}
@-webkit关键帧下载{
0% {
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
}
100% {
-webkit转换：translateY（20px）；
变换：translateY（20px）；
不透明度：0；
}
}
@关键帧下载{
0% {
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
}
100% {
-webkit转换：translateY（20px）；
变换：translateY（20px）；
不透明度：0；
}
}
@-webkit关键帧上传{
0% {
-webkit转换：translateY（20px）；
变换：translateY（20px）；
}
100% {
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
不透明度：0；
}
}
@关键帧uplaod{
0% {
-webkit转换：translateY（20px）；
变换：translateY（20px）；
}
100% {
-webkit转换：translateY（-20px）；
转换：translateY（-20px）；
不透明度：0；
}
}
&emsp
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="favico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
<link rel="apple-touch-icon" href="favico/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favico/favicon-144.png">
<meta name="msapplication-config" content="favico/browserconfig.xml">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<title>Stand Blog Posts</title>
<link href="bootstrap.min.css" rel="stylesheet">
<style>
a:link {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: Black;
background-color: transparent;
text-decoration: none;
}
a:active {
color: Black;
background-color: transparent;
text-decoration: none;
}
</style>
<style>
.btn {
width: 150px;
height: 150px;
background: #ddd;
position: relative;
text-align: center;
margin: 15px;
overflow: hidden;
border-radius: 100%;
display: inline-block;
}
.btn.download {
background: #00CCFF;
}
.btn.download .cloud {
box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}
.btn.download .arrow {
-webkit-animation: download 1s linear infinite;
animation: download 1s linear infinite;
}
.btn.upload {
background: #F49845;
}
.btn.upload .cloud {
box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
}
.btn.upload .arrow {
-webkit-animation: uplaod 1s linear infinite;
animation: uplaod 1s linear infinite;
}
.btn.upload .arrow:after {
top: auto;
bottom: 100%;
border-color: transparent transparent #97CA03 transparent;
}
.cloud {
width: 100px;
height: 40px;
position: relative;
background: #fff;
display: inline-block;
border-radius: 50px;
margin: 60px auto 0;
box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}
.cloud:after, .cloud:before {
content: '';
position: absolute;
width: 60px;
height: 60px;
border-radius: 100%;
top: -20px;
background: #fff;
left: 5px;
}
.cloud:before {
width: 40px;
height: 40px;
left: 50px;
}
.arrow {
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 5;
top: 10px;
width: 15px;
height: 10px;
background: #97CA03;
display: inline-block;
}
.arrow:after {
content: '';
position: absolute;
left: -8px;
top: 100%;
border: 15px solid transparent;
border-top-color: #97CA03;
}
@-webkit-keyframes download {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
}
@keyframes download {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
}
@-webkit-keyframes uplaod {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
@keyframes uplaod {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
opacity: 0;
}
}
</style>
<link rel="stylesheet" href="assets/css/templatemo-stand-blog.css">
</head>
<body>
<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground"> </p>
<nav>
<ul class="nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a class="active" href="boyshome.html">Boys Campus</a></li>
<li><a class="active" href="girlshome.html">Girls Campus</a></li>
<li><a class="active" href="calculator.html">GPA Calculator</a></li>
</ul>
</nav>
<p class="bluebackground"> </p>
<br>
<h1 class="girls-message centermess"><center>NHS BOYS</center></h1>
<nav>
<p class="bluebackground"> </p>
<ul class="nav">
<li><a class="active" href="boyshome.html">Home</a></li>
<li><a class="active" href="nhs-articles.html">NHS Articles</a></li>
<li><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
<li><a class="active" href="boyscontact.html">Contact Us</a></li>
</ul>
</nav>
<p class="bluebackground"> </p>
<br>
<center>
<section class="blog-posts grid-system">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="all-blog-posts">
<center>
<div class="row">
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-01.jpg" alt="">
</div>
<div class="down-content">
<h4>التعلم عبادة</h4>
<ul class="post-info">
<li>Omar Sheir</li>
<li>23/9/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-02.jpg" alt="">
</div>
<div class="down-content">
<h4>Uyghur Muslims</h4>
<ul class="post-info">
<li>Khalid Kooheji</li>
<li>27/9/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-02.jpg" alt="">
</div>
<div class="down-content">
<h4>الأمير الراحل … أمير الإنسانية</h4>
<ul class="post-info">
<li>Mohammad Al-Obaidi</li>
<li>3/10/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-03.jpg" alt="">
</div>
<div class="down-content">
<h4>الصدقة</h4>
<ul class="post-info">
<li>Ahmad Al-Mazrouei</li>
<li>20/9/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-04.jpg" alt="">
</div>
<div class="down-content">
<h4>Corona Virus: A New World</h4>
<ul class="post-info">
<li>Majed Al-Shaheen</li>
<li>27/9/2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-05.jpg" alt="">
</div>
<div class="down-content">
<h4>Donec tincidunt leo</h4>
<ul class="post-info">
<li>Admin</li>
<li>May 12, 2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="blog-post">
<div class="blog-thumb">
<img src="assets/images/blog-thumb-06.jpg" alt="">
</div>
<div class="down-content">
<h4>Mauris ac dolor ornare</h4>
<ul class="post-info">
<li>Admin</li>
<li>May 10, 2020</li>
</ul>
<div class="btn download">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</section>
</center>
<footer class="footer-distributed">
<div class="footer-left">
<h3>NHS<span>ACA</span></h3>
<p class="footer-links">Boys Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
nhsb.aca</a> 
| 
<a href="mailto:nhsb.aca@gmail.com"><i class="fa fa-envelope"></i>
nhsb.aca@gmail.com</a>
</p>
<p class="footer-links">Girls Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
aca.nhs</a> 
| 
<a href="mailto:acanational.hs@gmail.com"><i class="fa fa-envelope"></i>
acanational.hs@gmail.com</a>
</p>
<br>
<p class="footer-company-name">© Mohammad al Nusif</p>
</div>
<div class="footer-center">
<br>
<br>
<br>
<div>
<a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
<p>Boys Campus Map</p></a>
</div>
<div>
<a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
<p>Girls Campus Map</p></a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br>
<br>
<br>
<span>Boys Campus:</span>
Advisor's Email - sali.alkhuraishi@aca.edu.kw<br>
President's Email - bahaabed2003@gmail.com<br>
Vice President's Email - azoibi17@gmail.com<br>
<br>
<span>Girls Campus:</span>
Advisor's Email - nicole.depew@aca.edu.kw<br>
President's Email - kayanalghanim@gmail.com<br>
Vice President's Email - skkh03@gmail.com <br>
<br>
<div class="footer-icons">
</div>
</div>
</footer>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="all-blog-posts">
<center>
<div class="col-lg-4">
<div class="blog-post">
Column 1
</div>
<div class="col-lg-4">
<div class="blog-post">
Column 2
</div>
<div class="col-lg-4">
<div class="blog-post">
Column 3
</div>
</div>