diff --git a/frontend/css/color.txt b/frontend/css/color.txt
new file mode 100644
index 0000000..16bafb7
--- /dev/null
+++ b/frontend/css/color.txt
@@ -0,0 +1,14 @@
+grey:#555; (font color)
+red:#e74c3c,rgba(231, 76, 60,1.0),
+orange:#e67e22,rgba(230, 126, 34,1.0),
+orange2:#fbc531
+dark blue like:#2c3e50
+purple like:#130f40
+
+
+Colors according to logo
+orange : ##fdad15 rgb(253, 173, 21)
+red : #b10e16, rgb(177, 14, 22)
+
+
+
diff --git a/frontend/css/img/kite.jpg b/frontend/css/img/kite.jpg
new file mode 100644
index 0000000..31d53c6
Binary files /dev/null and b/frontend/css/img/kite.jpg differ
diff --git a/frontend/css/main.css b/frontend/css/main.css
index a0c2b66..d657772 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -92,3 +92,53 @@ body {
 }
 /* Events end */
 
+/************************************
+Base
+**************************************/
+
+*{
+  margin:0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html,
+body{
+  background-color: #fff;
+  color:#555;
+  font-family: 'Muli', sans-serif;
+  font-size: 16px;
+  text-rendering: optimizeLegibility;
+  font-weight: 300;
+  overflow-x: hidden;
+}
+
+::selection{
+  background-color: #b10e16;
+  color: #fdad15;
+}
+
+/***************************************
+Headings
+****************************************/
+#content{
+  position: relative;
+}
+
+#content_head{
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  text-transform: uppercase;
+  font-size: 200px;
+  text-align: center;
+  font-weight: 600;
+  letter-spacing: 2px;
+  padding: 0px 120px;   
+  display: inline-block;
+  margin: 60px auto;
+  color: #f4f4f4;
+  outline: 10px solid #f4f4f4;
+  outline-offset: 20px;
+}
diff --git a/frontend/css/notice.css b/frontend/css/notice.css
new file mode 100644
index 0000000..bd5b3b7
--- /dev/null
+++ b/frontend/css/notice.css
@@ -0,0 +1,214 @@
+
+*{
+    z-index: 10;
+}
+
+*::before{
+    z-index: 5;
+}
+
+html,body{
+    font-size: 62.5%; /*1rem = 10px*/
+}
+
+body {
+    box-sizing: border-box;
+    background: linear-gradient(45deg,#b10e16,#e74c3c );
+    color: #4d4d4d;
+    height: 195rem;/* to avoid annoying scoll bar. change this if content is added and change it in queries_news.css*/
+}
+
+
+/************************
+Heading edit
+************************/
+
+#content_head{
+    font-size: 12rem;
+    top: 65vh;
+    margin: 0;
+    padding: 0px 8rem;   
+}
+
+
+.MsoNormal:nth-child(1){
+    display: none;
+}
+
+/******Heading background*****/
+#content_head_bottom::before{
+    content: "";
+    position: absolute;
+    top: 5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90vw;
+    height: 90vh;
+    background: linear-gradient(45deg,#fbc531,#fdad15);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+/*********Picture in header *********/
+
+
+.MsoNormal:nth-child(5)::before{
+    content: "";
+    background-image: linear-gradient(rgba(255,255,255,0),rgba(0,0,0,.7)),url('img/kite.jpg');
+    position: absolute;
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85vw;
+    height: 90vh;
+    background-size: cover;
+    z-index: 6;
+    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+}
+
+/**************************
+Content
+*****************************/
+
+p,div{
+    font-size: 1.9rem;
+}
+
+/* Date */
+#content_text div:nth-child(2){
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 5px;
+    color: #f4f4f4;
+}
+
+/*Heading of notice*/
+#content_text div:nth-child(1){
+    position: absolute;
+    top: 115vh;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 21rem auto;
+    font-size: 3.7rem;
+    letter-spacing: 3px;
+    text-align: center;
+}
+
+#content_text div:nth-child(1)::after{
+    content: "";
+    height: 4px;
+    background-color: #fdad15;
+    width: 15rem;
+    margin: 0 auto;
+    position: absolute;
+    top: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.MsoNormal:nth-child(2),
+.MsoNormal:nth-child(4),
+.MsoNormal:nth-child(7),
+.MsoNormal:nth-child(8),
+.MsoNormal:nth-child(10),
+.MsoNormal:nth-child(12),
+.MsoNormal:nth-child(13){
+    position: absolute;
+    top: 115vh;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 65rem;
+    text-align: center;
+    letter-spacing: 1px;
+    line-height: 2.4rem;
+}
+
+
+.MsoNormal:nth-child(2){
+    margin-top: 35rem;
+    
+}
+.MsoNormal:nth-child(4){
+    margin-top: 42rem;
+}
+
+.MsoNormal:nth-child(7){
+    margin-top: 52rem;
+}
+
+.MsoNormal:nth-child(8){
+    margin-top: 56rem;
+    font-size: 1.7rem;
+    font-style: italic;
+}
+
+.MsoNormal:nth-child(10){
+    margin-top: 65rem;
+    font-size: 1.7rem;
+    font-style: italic;
+}
+.MsoNormal:nth-child(12){
+    margin-top: 77rem;
+}
+.MsoNormal:nth-child(13){
+    margin-top: 79.5rem;
+}
+
+
+
+/* paper effect*/
+.MsoNormal:nth-child(6) {
+  background: #f5f5f5;
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
+  max-width: 60vw;
+  min-height: 80rem;
+  padding: 24px;
+  position: absolute;
+  top: 100vh;
+  width: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 8;
+  margin: 21rem auto 15rem auto;
+}
+.MsoNormal:nth-child(6):before, .MsoNormal:nth-child(6):after {
+  content: "";
+  height: 98%;
+  position: absolute;
+  width: 100%;
+}
+.MsoNormal:nth-child(6):before {
+  background: #fff;
+  box-shadow: 0 0 8px rgba(0,0,0,0.2);
+  left: -5px;
+  top: 4px;
+  transform: rotate(-2.5deg);
+  z-index: 4;
+}
+.MsoNormal:nth-child(6):after {
+  background: #f4f4f4;
+  box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  right: -3px;
+  top: 1px;
+  transform: rotate(1.4deg);
+  z-index: 3;
+
+}
+/* paper effect end*/
+
+/* watermark of logo*/
+
+.MsoNormal:nth-child(11){
+    background-image: url('../img/logo_b.png');
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 31rem;
+    top: 115vh;
+    height: 30rem;
+    width: 38rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: .2;
+    z-index: 9;
+}
\ No newline at end of file
diff --git a/frontend/css/queries_notice.css b/frontend/css/queries_notice.css
new file mode 100644
index 0000000..2d3cbe1
--- /dev/null
+++ b/frontend/css/queries_notice.css
@@ -0,0 +1,176 @@
+@media only screen and (max-width:1200px){
+    html,body{
+        font-size: 56.25%;
+    }
+    body{
+        height: 230rem;/*to solve scroll bar problem*/
+    }
+
+}
+@media only screen and (max-width:900px){
+    html,body{
+        font-size: 50%;
+    }
+
+    .MsoNormal:nth-child(6){
+        max-width: 80vw;
+    }
+    #content_head{
+        top: 50vh;
+    }
+}
+
+
+@media only screen and (max-width:883px){
+    .MsoNormal:nth-child(2){
+        margin-top: 37rem;
+        
+    }
+    .MsoNormal:nth-child(4){
+        margin-top: 47.5rem;
+    }
+    
+    .MsoNormal:nth-child(7){
+        margin-top: 57.5rem;
+    }
+    
+    .MsoNormal:nth-child(8){
+        margin-top: 62rem;
+    }
+    
+    .MsoNormal:nth-child(10){
+        margin-top: 74.5rem;
+    }
+    .MsoNormal:nth-child(12){
+        margin-top: 87.5rem;
+    }
+    .MsoNormal:nth-child(13){
+        margin-top: 90rem;
+    }
+    .MsoNormal:nth-child(6) {
+        min-height: 90rem;
+    }
+}
+
+@media only screen and (max-width:787px){
+    #content_head{
+        font-size: 10rem;
+    }
+    /*Heading of notice*/
+    #content_text div:nth-child(1)::after{
+        top: 90px;
+    }
+    .MsoNormal:nth-child(6){
+        max-width: 87vw;
+        width: 100%;
+    }
+    .MsoNormal:nth-child(2),
+    .MsoNormal:nth-child(4),
+    .MsoNormal:nth-child(7),
+    .MsoNormal:nth-child(8),
+    .MsoNormal:nth-child(10),
+    .MsoNormal:nth-child(12),
+    .MsoNormal:nth-child(13){
+        max-width: 65rem;
+        width: 100%;
+    }
+    .MsoNormal:nth-child(5)::before{
+        background-position: center;
+    }
+}
+
+@media only screen and (max-width:660px){
+    body{
+        height: 240rem;/*to solve scroll bar problem*/
+    }
+    .MsoNormal:nth-child(2),
+    .MsoNormal:nth-child(4),
+    .MsoNormal:nth-child(7),
+    .MsoNormal:nth-child(8),
+    .MsoNormal:nth-child(10),
+    .MsoNormal:nth-child(12),
+    .MsoNormal:nth-child(13){
+        max-width: 48rem;
+    }
+    #content_head{
+        font-size: 7rem;
+    }
+}
+
+@media only screen and (max-width:478px){
+    #content_head{
+        font-size: 5.5rem;
+        padding: 0 2rem;
+    }
+}
+
+@media only screen and (max-width:465px){
+    body{
+        height: 270rem;
+    }
+
+    .MsoNormal:nth-child(2),
+    .MsoNormal:nth-child(4),
+    .MsoNormal:nth-child(7),
+    .MsoNormal:nth-child(8),
+    .MsoNormal:nth-child(10),
+    .MsoNormal:nth-child(12),
+    .MsoNormal:nth-child(13){
+        max-width: 36rem;
+    }
+    #content_text div:nth-child(1)::after{
+        top: 135px;
+    }
+
+    .MsoNormal:nth-child(2){
+        margin-top: 44rem;
+        
+    }
+    .MsoNormal:nth-child(4){
+        margin-top: 59rem;
+    }
+    
+    .MsoNormal:nth-child(7){
+        margin-top: 69rem;
+    }
+    
+    .MsoNormal:nth-child(8){
+        margin-top: 73rem;
+    }
+    
+    .MsoNormal:nth-child(10){
+        margin-top: 95.5rem;
+    }
+    .MsoNormal:nth-child(12){
+        margin-top: 115rem;
+    }
+    .MsoNormal:nth-child(13){
+        margin-top: 117.5rem;
+    }
+    .MsoNormal:nth-child(6) {
+        min-height: 120rem;
+    }
+    
+}
+
+@media only screen and (max-width:465px){
+    .MsoNormal:nth-child(2),
+    .MsoNormal:nth-child(4),
+    .MsoNormal:nth-child(7),
+    .MsoNormal:nth-child(8),
+    .MsoNormal:nth-child(10),
+    .MsoNormal:nth-child(12),
+    .MsoNormal:nth-child(13){
+        max-width: 27rem;
+    }
+    .MsoNormal:nth-child(11){
+        height: 24rem;
+        width: 32rem;
+    }
+}
+@media only screen and (min-width:1200px){
+    
+    html,body{
+        font-size: 75%;
+    }
+}
diff --git a/frontend/img/logo_b.png b/frontend/img/logo_b.png
new file mode 100644
index 0000000..cdbbe02
Binary files /dev/null and b/frontend/img/logo_b.png differ
diff --git a/frontend/img/logo_s.png b/frontend/img/logo_s.png
new file mode 100644
index 0000000..1bd9f3a
Binary files /dev/null and b/frontend/img/logo_s.png differ
diff --git a/frontend/news_notice/notice_raw.html b/frontend/news_notice/notice_raw.html
index 9dfa2f2..8c7be0e 100644
--- a/frontend/news_notice/notice_raw.html
+++ b/frontend/news_notice/notice_raw.html
@@ -1,131 +1,143 @@
-<html>
- <body>
-  <div id="content">
-   <div>
-    <div>
-    </div>
-    <div id="contentpage">
-     <div align="center" id="content_head">
-      notice
-     </div>
-     <div id="content_head_bottom">
-     </div>
-     <!-- <h3>&nbsp;</h3>-->
-     <div id="content_text">
-      <div>
-       Dashain-Tihar Vacation
-      </div>
-      <div>
-       Monday, 30 Sep 2019
-      </div>
-      <div>
-       <p align="center" class="MsoNormal">
-        <strong>
-         <span>
-          Notice
-         </span>
-        </strong>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         This is to inform that the
-         <em>
-          Dashain-Tihar Vacation
-         </em>
-         begins from
-        </span>
-        <strong>
-         <span>
-          Friday, October 4, 2019
-         </span>
-         <span>
-         </span>
-         <span>
-          (Aswin 17, 2076).
-         </span>
-        </strong>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         <span>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-         </span>
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         The College reopens on
-        </span>
-        <strong>
-         <span>
-          Thursday
-         </span>
-         <span>
-          ,
-         </span>
-         <span>
-          October
-         </span>
-         <span>
-          31, 2019
-         </span>
-         <span>
-          (Kartik 14, 2076).
-         </span>
-        </strong>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         &nbsp;
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         &nbsp;
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <u>
-         <strong>
-          <span>
-           Note:
-          </span>
-         </strong>
-        </u>
-       </p>
-       <p class="MsoNormal">
-        <em>
-         <span>
-          The College Administration and the Library will remain open from 10 am to 5 pm during the Vacation except on the holidays indicated in the Academic Calendar.
-         </span>
-        </em>
-       </p>
-       <em>
-       </em>
-       <p class="MsoNormal">
-        <span>
-         <em>
-          Medical &amp; Engineering Entrance Preparation Classes will run during Vacation from 14 to 25 October (27 Aswin to 8 Kartik).
-         </em>
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         &nbsp;
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <span>
-         Principal
-        </span>
-       </p>
-       <p class="MsoNormal">
-        <span class="apple-style-span">
-         <span>
-          Monday, September 30, 2019
-         </span>
-        </span>
-       </p>
+<html>
+       <head>
+              <meta charset="utf-8"/>
+              <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
+              <link href="https://fonts.googleapis.com/css?family=Muli:300,600&display=swap" rel="stylesheet">
+              <link rel="stylesheet" href="../css/main.css" type="text/css">
+              <link rel="stylesheet" href="../css/notice.css" type="text/css">
+              <link rel="stylesheet" href="../css/queries_notice.css" type="text/css">
+
+              <link rel="shortcut icon" type="image/png" href="../img/logo_s.png">
+
+              <title>Notice</title>
+       </head>
+ <body>
+  <div id="content">
+   <div>
+    <div>
+    </div>
+    <div id="contentpage">
+     <div align="center" id="content_head">
+      notice
+     </div>
+     <div id="content_head_bottom">
+     </div>
+     <!-- <h3>&nbsp;</h3>-->
+     <div id="content_text">
+      <div>
+       Dashain-Tihar Vacation
+      </div>
+      <div>
+       Monday, 30 Sep 2019
+      </div>
+      <div>
+       <p align="center" class="MsoNormal"><!--1-->
+        <strong>
+         <span>
+          Notice
+         </span>
+        </strong>
+       </p>
+       <p class="MsoNormal"><!--2-->
+        <span>
+         This is to inform that the
+         <em>
+          Dashain-Tihar Vacation
+         </em>
+         begins from
+        </span>
+        <strong>
+         <span>
+          Friday, October 4, 2019
+         </span>
+         <span>
+         </span>
+         <span>
+          (Aswin 17, 2076).
+         </span>
+        </strong>
+       </p>
+       <p class="MsoNormal"><!--3-->
+        <span>
+         <span>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+         </span>
+        </span>
+       </p>
+       <p class="MsoNormal"><!--4-->
+        <span>
+         The College reopens on
+        </span>
+        <strong>
+         <span>
+          Thursday
+         </span>
+         <span>
+          ,
+         </span>
+         <span>
+          October
+         </span>
+         <span>
+          31, 2019
+         </span>
+         <span>
+          (Kartik 14, 2076).
+         </span>
+        </strong>
+       </p>
+       <p class="MsoNormal"><!--5-->
+        <span>
+         &nbsp;
+        </span>
+       </p>
+       <p class="MsoNormal"><!--6-->
+        <span>
+         &nbsp;
+        </span>
+       </p>
+       <p class="MsoNormal"><!--7-->
+        <u>
+         <strong>
+          <span>
+           Note:
+          </span>
+         </strong>
+        </u>
+       </p>
+       <p class="MsoNormal"><!--8-->
+        <em>
+         <span>
+          The College Administration and the Library will remain open from 10 am to 5 pm during the Vacation except on the holidays indicated in the Academic Calendar.
+         </span>
+        </em>
+       </p>
+       <em>
+       </em>
+       <p class="MsoNormal"><!--9-->
+        <span>
+         <em>
+          Medical &amp; Engineering Entrance Preparation Classes will run during Vacation from 14 to 25 October (27 Aswin to 8 Kartik).
+         </em>
+        </span>
+       </p>
+       <p class="MsoNormal"><!--10-->
+        <span>
+         &nbsp;
+        </span>
+       </p>
+       <p class="MsoNormal"><!--11-->
+        <span>
+         Principal
+        </span>
+       </p>
+       <p class="MsoNormal"><!--12-->
+        <span class="apple-style-span">
+         <span>
+          Monday, September 30, 2019
+         </span>
+        </span>
+       </p>
        <!--[if gte mso 9]><xml>
 <w:WordDocument>
 <w:View>Normal</w:View>
@@ -166,7 +178,7 @@
 <m:intLim m:val="subSup" />
 <m:naryLim m:val="undOvr" />
 </m:mathPr></w:WordDocument>
-</xml><![endif]-->
+</xml><![endif]-->
        <!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="false"
 DefSemiHidden="false" DefQFormat="false" DefPriority="99"
@@ -736,7 +748,7 @@
 <w:LsdException Locked="false" Priority="52"
 Name="List Table 7 Colorful Accent 6" />
 </w:LatentStyles>
-</xml><![endif]-->
+</xml><![endif]-->
        <!--[if gte mso 10]>
 <style>
 /* Style Definitions */
@@ -761,13 +773,13 @@
 mso-hansi-font-family:Calibri;
 mso-hansi-theme-font:minor-latin;}
 </style>
-<![endif]-->
-      </div>
-     </div>
-    </div>
-    <div>
-    </div>
-   </div>
-  </div>
- </body>
+<![endif]-->
+      </div>
+     </div>
+    </div>
+    <div>
+    </div>
+   </div>
+  </div>
+ </body>
 </html>
\ No newline at end of file