Initial commit

CSS/style.css

+body{
+font:15px/1.5 Arial,helvetica,sans-serif;
+padding: 0;
+margin: 0;
+background-color: #f4f4f4;
+}
+/*Global */
+.container{
+  width:80%;
+  margin: auto;
+  overflow: hidden;
+}
+ul{
+  margin: 0;
+  padding: 0;
+}
+.button_1{
+  height: 38px;
+  background: #e8491d;
+  border: 0;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-right: 400px;
+  color: #ffffff;
+}
+.dark{
+  padding: 15px;
+  background: #35424a;
+  color: #ffffff;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+/*header **/
+header{
+  background: #35424a;
+  color: #ffffff;
+padding-top: 30px;
+min-height: 70px;
+border-bottom: #e8491d 3px solid;
+}
+header a{
+   color: #ffffff;
+   text-decoration: none;
+   text-transform: uppercase;
+   font-size: 16px;
+   }
+
+header li{
+  float: left;
+  display: inline;
+  padding: 0 20px 0 20px;
+}
+
+header #branding{
+  float:left;
+}
+
+header #branding h1{
+  margin : 0;
+}
+
+header nav{
+  float: right;
+  margin-top: 10px;
+}
+
+header .highlight, header .current a{
+  color:#e8491d !important;
+  font-weight: bold;
+}
+
+header a:hover{
+  color: #cccccc;
+  font-weight: bold;
+
+}
+
+/*showcase*/
+#showcase{
+  min-height: 400px;
+  background:url('../Images/showcase.jpg'), no-repeat,0 200px;
+text-align: center;
+color: #ffffff;
+}
+#showcase h1{
+  margin top: 100px;
+  font-size: 55px;
+  margin-bottom: 18px;
+}
+#showcase p{
+  font-size: 20px;
+}
+/* Newsletter*/
+#newsletter p{
+  padding: 15px;
+  color: #ffffff;
+  background:#35424a;
+}
+#newsletter h1{
+  float: left;
+}
+#newsletter form{
+  float: right;
+  margin-top: 15px;
+
+}
+#newsletter input[type="email"]{
+  padding: 4px;
+  height: 25px;
+  width: 250px
+}
+/* Boxes */
+#boxes{
+  margin-top: 20px;
+  }
+
+  #boxes .box{
+    float: left;
+    text-align: center;
+    width: 30%;
+    padding: 10px;
+    }
+    #Boxes .box img {
+      width: 90px;
+      }
+      /* Sidebar*/
+      aside#sidebar{
+        float:right;
+        width: 30%;
+        margin-top: 10px;
+      }
+      aside#sidebar .quote input, aside#sidebar .quote textarea{
+        width:90%;
+        padding:5px;
+      }
+      /* Main-col */
+      article#main-col{
+        float: left;
+        width: 65%;
+
+      }
+      /* Services*/
+      ul#services li{
+        list-style: none;
+        padding: 20px;
+        border: #cccccc solid 1px;
+        margin-bottom: 5px;
+        background:#e6e6e6;
+      }
+
+      footer{
+        padding: 20px;
+        margin-top: 20px;
+        color: #ffffff;
+        background-color: #e8491d;
+        text-align: center;
+      }
+/*login **/
+
+.login-page {
+  width: 60%;
+  padding: 7% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 468px;
+  margin: 60px auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+
+
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: #e8491d;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: #cccccc;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: #e8491d;
+  text-decoration: none;
+}
+.form  {
+  border-top: 20px;
+}
+form p   {
+  float: left;
+  margin-bottom: 30px;
+}
+form #role{
+  background: #f2f2f2;
+float: left;
+margin-top: 6px;
+  font-family: "Roboto", sans-serif;
+  margin-left: 5px;
+}
+form label{
+  font-family: "Roboto", sans-serif;
+  margin-left: 6px;
+}
+
+/*signup **/
+.signup{
+  padding-top: 7%;
+}
+/*articles shown in admins dashboard**/
+table {
+  font:15px/1.5 Arial,helvetica,sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}

Read it.txt

+the website is almost done ....but if you want to make it compatible to mobile devices then add the following 
+codes at the end of footer in style.css
+/* Media Queries */
+@media(max-width: 768px){
+header #branding,
+header nav,
+header nav li,
+#newsletter h1,
+#newsletter form,
+#boxes .box
+article#main-col,
+aside#sidebar{
+float:none;
+text-align:center;
+width:100%;
+}
+header{
+padding-bottom:20px;
+}
+#showcase h1{
+margin-top:40px;
+}
+#newsletter button, quote button{
+display:block;
+width:100%
+}
+#newsletter form input[type="email"], .quote input, quote textarea{
+width:100%
+margin-bottom:5px;
+
+}
+}
\ No newline at end of file

about.html

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device-width">
+    <meta name="description" content="Articles and Published Blogs">
+    <meta name="keywords" content="web design, fitness , meditation , professional, others">
+    <meta name="author" content="Saif Ali">
+    <title>Blogs| About</title>
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+  <body>
+<header>
+  <div class="container">
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</h1>
+        </div>
+      <nav>
+        <ul>
+          <li ><a href="index.html">Home</a></li>
+          <li class="current"><a href="About.html">About</a></li>
+          <li><a href="Services.html">Services</a></li
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+
+
+      <section id="newsletter">
+        <div class="container">
+          <h1>Subscribe to our Blogs</h1>
+          <form>
+            <input type="email" placeholder="Enter Username....">
+            <button type="submit" class="button_1">Subscribe</button>
+          </form>
+
+        </div>
+
+    </section>
+
+    <section id="main">
+<div class="container">
+  <article id="main-col">
+    <h1 class="page-title">About Us</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus sem sapien ac risus. Sed dignissim est quis mi molestie mattis. Integer sollicitudin pellentesque lorem, id sollicitudin arcu dapibus vitae. Pellentesque sit amet dolor sed odio euismod ultrices vel in diam. Nullam euismod lectus non ex auctor pulvinar. Praesent a lorem pharetra, vestibulum lacus in, luctus diam. Mauris nibh odio, mollis in tincidunt ac, lobortis quis mi. Pellentesque vestibulum venenatis felis eu condimentum. Praesent enim nulla, eleifend sit amet mauris in, luctus aliquet dolor. Nullam vulputate mattis imperdiet. Vestibulum augue nisi, aliquet in lectus sit amet, tincidunt tempus diam. Vivamus ac magna nunc. Sed sit amet pellentesque risus. Mauris sodales in eros mattis egestas.
+</p>
+<p class="dark">
+Pellentesque est tortor, tempus quis erat sit amet, dictum interdum arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce fermentum interdum venenatis. Etiam ac nisi libero. Suspendisse est magna, vulputate eu efficitur sit amet, ullamcorper vitae ex. Donec hendrerit eros nunc, sed vulputate leo pellentesque sed. Vestibulum rutrum bibendum lacus sit amet dictum. Proin eget lorem vel felis feugiat accumsan. Nam et lobortis velit.
+</p>
+
+
+  </article>
+  <aside id="sidebar">
+<div class="dark">
+<h3>What We Do</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet, enim tincidunt tristique lacinia, ex sapien ultrices nulla, nec rhoncus .
+    </p>
+    </div>
+  </aside>
+        </div>
+
+    </section>
+
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>
+
+
+
+  </body>
+</html>

adminPanel.html

+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width-device-width">
+  <meta name="description" content="Articles and Blogs">
+  <meta name="keywords" content="web design, fitness , meditation , professional, others">
+  <meta name="author" content="Saif Ali">
+  <title>Blogs| Welcome</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+<header>
+<div class="container" >
+  <div id="branding">
+    <h1><span class="highlight">Articles</span> and Blogs</h1>
+      </div>
+    <nav>
+      <ul>
+        <li class="current"><a href="index.html">Home</a></li>
+        <li><a href="About.html">About</a></li>
+        <li><a href="Services.html">Services</a></li>
+        <li><a href="login.html">Login</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+<body>
+  <ul>
+    <li ><a href="Articles.html">Articles</a></li>
+
+  </ul>
+</body>
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>

articles.html

+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width-device-width">
+  <meta name="description" content="Articles and Blogs">
+  <meta name="keywords" content="web design, fitness , meditation , professional, others">
+  <meta name="author" content="Saif Ali">
+  <title>Blogs| Welcome</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+<header>
+<div class="container" >
+  <div id="branding">
+    <h1><span class="highlight">Articles</span> and Blogs</h1>
+      </div>
+    <nav>
+      <ul>
+        <li class="current"><a href="index.html">Home</a></li>
+        <li><a href="About.html">About</a></li>
+        <li><a href="Services.html">Services</a></li>
+        <li><a href="login.html">Login</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+<body>
+  <h2>HTML Table</h2>
+
+  <table>
+    <tr>
+      <th>Article</th>
+      <th>Date</th>
+      <th>Edit</th>
+    </tr>
+    <tr>
+      <td>Alfreds Futterkiste</td>
+      <td>Maria Anders</td>
+      <td>Germany</td>
+    </tr>
+    <tr>
+      <td>Centro comercial Moctezuma</td>
+      <td>Francisco Chang</td>
+      <td>Mexico</td>
+    </tr>
+    <tr>
+      <td>Ernst Handel</td>
+      <td>Roland Mendel</td>
+      <td>Austria</td>
+    </tr>
+    <tr>
+      <td>Island Trading</td>
+      <td>Helen Bennett</td>
+      <td>UK</td>
+    </tr>
+    <tr>
+      <td>Laughing Bacchus Winecellars</td>
+      <td>Yoshi Tannamuri</td>
+      <td>Canada</td>
+    </tr>
+    <tr>
+      <td>Magazzini Alimentari Riuniti</td>
+      <td>Giovanni Rovelli</td>
+      <td>Italy</td>
+    </tr>
+  </table>
+
+
+
+</body>
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>

cooking.html

+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width-device-width">
+  <meta name="description" content="Articles and Blogs">
+  <meta name="keywords" content="web design, fitness , meditation , professional, others">
+  <meta name="author" content="Saif Ali">
+  <title>Blogs| Welcome</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<header>
+  <div class="container" >
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</h1>
+        </div>
+      <nav>
+        <ul>
+          <li class="current"><a href="index.html">Home</a></li>
+          <li><a href="About.html">About</a></li>
+          <li><a href="Services.html">Services</a></li>
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+<body>
+  
+</body>
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>

fitness.html

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width-device-width">
+  <meta name="description" content="Articles and Blogs">
+  <meta name="keywords" content="web design, fitness , meditation , professional, others">
+  <meta name="author" content="Saif Ali">
+  <title>Blogs| Welcome</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+<header>
+<div class="container" >
+  <div id="branding">
+    <h1><span class="highlight">Articles</span> and Blogs</h1>
+      </div>
+    <nav>
+      <ul>
+        <li class="current"><a href="index.html">Home</a></li>
+        <li><a href="About.html">About</a></li>
+        <li><a href="Services.html">Services</a></li>
+        <li><a href="login.html">Login</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+
+    <p>To get started, I want to start with the idea of ​​the all-rounder among the fitness blogs. These blogs are about different fitness topics. They all have a focus, but are relatively broad in content. On this site, every fitness enthusiast can find something suitable.
+</p>
+  </body>
+
+    <h1>1) Fitvolution</h1>
+
+  <body>
+    <p2>Yes, this is a fitness blog. So, if you've landed here on Google search and you do not know our blog yet, then check out here. Fitvolution is the fitness blog for busy people. Here we have made it our mission to help you with little time to optimize your training and get your diet under control. In our Blog Categories strength training , cardiovascular training , sports motivation , fitness nutrition and  fitness accessories you'll surely one or other useful items for you
+      </p2>
+  </body>
+  <footer>
+    <p>Tech-Science Blog, Copyright &copy; 2019</p>
+  </footer>
+
+</html>

football.html

+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width-device-width">
+  <meta name="description" content="Articles and Blogs">
+  <meta name="keywords" content="web design, fitness , meditation , professional, others">
+  <meta name="author" content="Saif Ali">
+  <title>Blogs| Welcome</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<header>
+  <div class="container" >
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</h1>
+        </div>
+      <nav>
+        <ul>
+          <li class="current"><a href="index.html">Home</a></li>
+          <li><a href="About.html">About</a></li>
+          <li><a href="Services.html">Services</a></li>
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>

index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device-width">
+    <meta name="description" content="Articles and Blogs">
+    <meta name="keywords" content="web design, fitness , meditation , professional, others">
+    <meta name="author" content="Saif Ali">
+    <title>Blogs| Welcome</title>
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+  <body>
+<header>
+  <div class="container" >
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</h1>
+        </div>
+      <nav>
+        <ul>
+          <li class="current"><a href="index.html">Home</a></li>
+          <li><a href="About.html">About</a></li>
+          <li><a href="Services.html">Services</a></li>
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+
+  <section id="showcase">
+    <div class="container">
+      <h1>Publish your desired Articles</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique odio ac tortor consectetur, nec luctus ipsum mollis. Aenean id maximus lorem. </p>
+    </div>
+  </section>
+
+      <section id="newsletter">
+        <div class="container">
+          <h1>Subscribe to our Blogs</h1>
+          <form>
+            <input type="email" placeholder="Enter Article Name....">
+            <button type="submit" class="button_1">Search</button>
+          </form>
+        </div>
+      </section>
+
+    <section id="boxes">
+<div class="container">
+  <div class="box">
+  <a href="fitness.html"target="_blank"><img src="./Images/fitness_PNG41.png"></a>
+    <h3>Fitness</h3>
+    <i><h4>by Saif Ali on 22-4-19</h4></i>
+    <p>To get started, I want to start with the idea of ​​the all-rounder among the fitness blogs.</p>
+  </div>
+    <div class="box">
+  <a href="meditation.html"target="_blank">
+    <img src="./Images/Meditation-PNG-Image.png">
+    </a>
+  <h3>Meditation</h3>
+    <i><h4>by Saif Ali on 22-4-19</h4></i>
+      <p>If you’re brand new to meditation, this is a great place to start.</p>
+</div>
+      <div class="box">
+<a href="profession.html"target="_blank">
+        <img src="./Images/rb-tlds-profession.png" alt="">
+</a>
+        <h3>Professions</h3>
+          <i><h4>by Saif Ali on 22-4-19</h4></i>
+        <p>The definition of professionalism is widespread and unique to whomever you may ask about it.</p>
+        </div>
+        <div class="box">
+          <a href="football.html"target="_blank"><img src="./Images/football.png" alt="">
+      </a>
+      <h3>Football</h3>
+        <i><h4>by Saif Ali on 22-4-19</h4></i>
+      <p>We at the Fanatic love for football recognize the many great football blogs and websites .</p>
+</div>
+      <div class="box">
+        <a href="pollution.html"target="_blank"><img src="./Images/pollution.jpg" alt="">
+        </a>
+        <h3>Pollution</h3>
+          <i><h4>by Saif Ali on 22-4-19</h4></i>
+        <p>Short-lived climate pollutants like blackcarbons and methane aren't as well-known.</p>
+</div>
+        <div class="box">
+          <a href="cooking.html"target="_blank"><img src="./Images/cooking.png" alt="">
+          </a>
+          <h3>Cooking</h3>
+  <i><h4>by Saif Ali on 22-4-19</h4></i>
+          <p>Well-tested interesting recipes, food science, techniques, equipment, and even food histories.</p>
+
+        </div>
+
+      </div>
+
+        </div>
+  </div>
+
+    </section>
+
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>
+
+
+
+
+
+
+</body>
+</html>

login.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device-width">
+    <meta name="description" content="Articles and Blogs">
+    <meta name="keywords" content="web design, fitness , meditation , professional, others">
+    <meta name="author" content="Saif Ali">
+    <title>Blogs| Welcome</title>
+    <link rel="stylesheet" href="./css/style.css">
+
+</head>
+<body>
+  <header>
+    <div class="container" >
+      <div id="branding">
+        <h1><span class="highlight">Articles</span> and Blogs</h1>
+          </div>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="About.html">About</a></li>
+            <li><a href="Services.html">Services</a></li>
+            <li class="current"><a href="login.html">Login</a></li>
+          </ul>
+        </nav>
+      </div>
+  </header>
+    <div class="login-page">
+  <div class="form">
+    <form class="login-form">
+      <form >
+      <p>
+             <label>Login as</label><br>
+             <select id = "role">
+               <option value = "1">Admin</option>
+               <option value = "2">Author</option>
+               <option value = "3">User</option>
+           </select>
+          </p>
+</form>
+      <input type="text" placeholder="username"/>
+      <input type="password" placeholder="password"/>
+      <a href="adminPanel.html">
+      <button>login</button>
+      </a>
+
+      <p class="message">Not registered? <a href="signup.html">Create an account</a></p>
+    </form>
+  </div>
+</div>
+
+
+
+  </body>
+</html>

meditation.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width-device-width">
+    <meta name="description" content="Articles and Blogs">
+    <meta name="keywords" content="web design, fitness , meditation , professional, others">
+    <meta name="author" content="Saif Ali">
+    <title>Blogs| Welcome</title>
+    <link rel="stylesheet" href="./css/style.css">
+  </head>
+  <body>
+<header>
+  <div class="container" >
+    <div id="branding">
+      <h1><span class="highlight">Articles</span> and Blogs</h1>
+        </div>
+      <nav>
+        <ul>
+          <li class="current"><a href="index.html">Home</a></li>
+          <li><a href="About.html">About</a></li>
+          <li><a href="Services.html">Services</a></li>
+          <li><a href="login.html">Login</a></li>
+        </ul>
+      </nav>
+    </div>
+</header>
+<footer>
+  <p>Tech-Science Blog, Copyright &copy; 2019</p>
+</footer>