diff --git a/Activity.html b/Activity.html
new file mode 100644
index 0000000..9df4dc8
--- /dev/null
+++ b/Activity.html
@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>UMALL - Activity</title>
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<meta content="Free HTML Templates" name="keywords">
+<meta content="Free HTML Templates" name="description">
+
+<link id="icon" href="logo.png" rel="icon">
+
+<link rel="preconnect" href="https://fonts.gstatic.com/">
+<link href="static/css/css2.css" rel="stylesheet">
+
+<link href="static/css/all.min.css" rel="stylesheet">
+
+<link href="static/css/owl.carousel.min.css" rel="stylesheet">
+
+<link href="static/css/style.css" rel="stylesheet">
+
+<script src="js/function.js"></script>
+</head>
+<body>
+
+<div class="container-fluid bg-primary py-3">
+<div class="container">
+<div class="row">
+<div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
+<div class="d-inline-flex align-items-center">
+<a class="text-white pr-3" href="javascript:set_language('zh')">繁體中文</a>
+<span class="text-white">|</span>
+<a class="text-white px-3" href="javascript:set_language('ch')">简体中文</a>
+<span class="text-white">|</span>
+<a class="text-white pl-3" href="javascript:set_language('en')">English</a>
+</div>
+</div>
+<div class="col-md-6 text-center text-lg-right">
+<div class="d-inline-flex align-items-center">
+<a class="text-white px-3" href="">
+<i class="fab fa-facebook-f"></i>
+</a>
+<a class="text-white px-3" href="">
+<i class="fab fa-twitter"></i>
+</a>
+<a class="text-white px-3" href="">
+<i class="fab fa-linkedin-in"></i>
+</a>
+<a class="text-white px-3" href="">
+<i class="fab fa-instagram"></i>
+</a>
+<a class="text-white pl-3" href="">
+<i class="fab fa-youtube"></i>
+</a>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+
+<div class="container-fluid position-relative nav-bar p-0">
+<div class="container-lg position-relative p-0 px-lg-3" style="z-index: 9;">
+<nav class="navbar navbar-expand-lg bg-white navbar-light py-3 py-lg-0 pl-3 pl-lg-5">
+<a href="" class="navbar-brand">
+<h1 class="m-0 text-secondary"><span class="text-primary">UM</span>ALL</h1>
+</a>
+<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
+<span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
+<div class="navbar-nav ml-auto py-0">
+<a name="home" href="index.html" class="nav-item nav-link">home</a>
+<a name="activity" href="Activity.html" class="nav-item nav-link active">Activity</a>
+<a name="about" href="" class="nav-item nav-link">about</a>
+<a name="pricing" href="" class="nav-item nav-link">pricing</a>
+<a name="contact" href="" class="nav-item nav-link">contact</a>
+</div>
+</div>
+</nav>
+</div>
+</div>
+
+
+<div class="page-header container-fluid bg-secondary pt-2 pt-lg-5 pb-2 mb-5">
+<div class="container py-5">
+<div class="row align-items-center py-4">
+<div class="col-md-6 text-center text-md-left">
+<h1 name="activity" class="mb-4 mb-md-0 text-white">Activity</h1>
+</div>
+<div class="col-md-6 text-center text-md-right">
+<div class="d-inline-flex align-items-center">
+<a name="home" class="btn text-white" href="">Home</a>
+<i class="fas fa-angle-right text-white"></i>
+<a name="activity" class="btn text-white disabled" href="">Activity</a>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+
+<div class="container py-5">
+<div class="row">
+
+
+<div class="row">
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-1.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-2.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+ </a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-3.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-1.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-2.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+ </div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-3.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-1.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-2.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+ </div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-3.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+<div class="col-md-6 mb-2">
+<div class="bg-light mb-4">
+<div class="position-relative">
+<img class="img-fluid w-100" src="static/picture/blog-3.jpg" alt="">
+<a href="" class="position-absolute w-100 h-100 d-flex flex-column align-items-center justify-content-center   text-decoration-none p-4" style="top: 0; left: 0; background: rgba(0, 0, 0, .4);">
+<h4 class="text-center text-white font-weight-medium mb-3">Dolor site amet clita kasd sanct ipsum</h4>
+<div class="d-flex text-light">
+<small class="mr-2"><i class="fa fa-user text-secondary"></i> Admin</small>
+<small class="mr-2"><i class="fa fa-folder text-secondary"></i> Web Design</small>
+<small class="mr-2"><i class="fa fa-comments text-secondary"></i> 15</small>
+</div>
+</a>
+</div>
+<p class="m-0 p-4">Amet dolores labore magna et amet tempor dolor et dolor. Et sit ipsum et eos rebum labore ea labore sea. Et sed elitr labore sed labore. Lorem et lorem amet sed sed kasd ipsum rebum</p>
+</div>
+</div>
+</div>
+<div class="row">
+<div class="col-12">
+<nav aria-label="Page navigation">
+<ul class="pagination justify-content-center mb-0">
+<li class="page-item disabled">
+<a class="page-link" href="#" aria-label="Previous">
+<span aria-hidden="true">&laquo;</span>
+<span class="sr-only">Previous</span>
+</a>
+</li>
+<li class="page-item active"><a class="page-link" href="#">1</a></li>
+<li class="page-item"><a class="page-link" href="#">2</a></li>
+<li class="page-item"><a class="page-link" href="#">3</a></li>
+<li class="page-item">
+<a class="page-link" href="#" aria-label="Next">
+<span aria-hidden="true">&raquo;</span>
+<span class="sr-only">Next</span>
+</a>
+</li>
+</ul>
+</nav>
+</div>
+</div>
+
+
+
+
+
+</div>
+</div>
+
+
+<div class="container-fluid bg-primary text-white mt-5 pt-5 px-sm-3 px-md-5">
+    <div class="row pt-5">
+    <div class="col-lg-3 col-md-6 mb-5">
+    <a href=""><h1 class="text-secondary mb-3"><span class="text-white">UM</span>ALL</h1></a>
+    <p name="introduction">Integration of all information. Introduce what these are..</p>
+    <div class="d-flex justify-content-start mt-4">
+    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-twitter"></i></a>
+    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-facebook-f"></i></a>
+    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-linkedin-in"></i></a>
+    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-instagram"></i></a>
+    </div>
+    </div>
+    <div class="col-lg-3 col-md-6 mb-5">
+    <h4 name="contact" class="text-white mb-4">Get In Touch</h4>
+    <i class="fa fa-map-marker-alt mr-2"></i><p name="plice">University of Macau Avenida da Universidade Taipa, Macau, China</p>
+    <p><i class="fa fa-phone-alt mr-2"></i>+853 0000 0000</p>
+    <p><i class="fa fa-envelope mr-2"></i><a href="">admin@admin.admin</a></p>
+    </div>
+    <div class="col-lg-3 col-md-6 mb-5">
+    <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
+    <div class="d-flex flex-column justify-content-start">
+    <a name="home" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Home</a>
+    <a name="about" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>About Us</a>
+    <a name="services" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Services</a>
+    <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a>
+    <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a>
+    </div>
+    </div>
+    <div class="col-lg-3 col-md-6 mb-5">
+    <h4 name="newsletter" class="text-white mb-4">Newsletter</h4>
+    <form action="">
+    <div class="form-group">
+    <input type="text" class="form-control border-0" placeholder="Your ID" required="required">
+    </div>
+    <div class="form-group">
+    <input type="password" class="form-control border-0" placeholder="Your Password" required="required">
+    </div>
+    <div>
+    <button name="submit" class="btn btn-lg btn-secondary btn-block border-0" type="submit">Submit Now</button>
+    </div>
+    </form>
+    </div>
+    </div>
+    </div>
+    <div class="container-fluid bg-dark text-white py-5 px-sm-5 px-md-5">
+    <p name="copyright" class="m-0 text-center text-white">
+    
+    
+    </p>
+    </div>
+    
+    
+    
+    
+    
+    </body>
+    </html>
+    
+    <script>
+        Printf("begin");
+    
+        function set_language(lang)
+        {
+            var web_language_path = "/data/language.json?v="+Date.now();
+            var web_language = Get_Json(web_language_path);
+            for(var key in web_language)
+            {
+                var langdata=web_language[key][lang];
+                if(langdata==null|langdata=="")
+                {
+                    langdata=web_language[key][en];
+                }
+                var objname=document.getElementsByName(key)
+                if(objname)
+                {
+                    for(var i=0;i<objname.length;i++)
+                    {
+                        objname[i].innerHTML=langdata;
+                    }
+    
+                }
+                
+    
+            }
+        }
+    
+        set_language("zh");
+      
+    </script>
+      
\ No newline at end of file
diff --git a/data/language.json b/data/language.json
index cc0b4ec..81c0a0a 100644
--- a/data/language.json
+++ b/data/language.json
@@ -76,5 +76,11 @@
         "en":"Submit",
         "zh":"提交",
         "ch":"提交"
+    },
+    "activity":
+    {
+        "en":"Activity",
+        "zh":"活動",
+        "ch":"活动"
     }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index aa4f606..d712391 100644
--- a/index.html
+++ b/index.html
@@ -69,9 +69,9 @@
 </button>
 <div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
 <div class="navbar-nav ml-auto py-0">
-<a name="home" href="" class="nav-item nav-link active">home</a>
+<a name="home" href="index.html" class="nav-item nav-link active">home</a>
+<a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a>
 <a name="about" href="" class="nav-item nav-link">about</a>
-<a name="services" href="" class="nav-item nav-link">services</a>
 <a name="pricing" href="" class="nav-item nav-link">pricing</a>
 <a name="contact" href="" class="nav-item nav-link">contact</a>
 </div>
