diff --git a/Articles!.html b/Articles!.html
new file mode 100644
index 0000000000000000000000000000000000000000..99b77081dd912efcbe21f88bdd61b23f8f2b6cc1
--- /dev/null
+++ b/Articles!.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Articles!</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
+ <link rel="stylesheet" href="styles/reset.css">
+ <link rel="stylesheet" href="styles/-debug.css">
+ <link rel="stylesheet" href="styles/article.css">
+ <link rel="stylesheet" href="styles/article-figure.css">
+ <link rel="stylesheet" href="styles/article-text.css">
+ <link rel="stylesheet" href="styles/article-share.css">
+ </head>
+ <body>
+ <article id="the-galaxies-4">
+ <h1><a href="#the-galaxies-4">The <em>Galaxies</em> is all there is</a></h1>
+ <h2>This article is about the astronomical structure.</h2>
+
+ <time datetime="07-07-2016">july. 7, 2016</time>
+ <p>
+ <em>A Galaxy is a</em>, gravitationally <a href="https://en.wikipedia.org/wiki/Galaxy">Galaxy</a> bound system of stars, stellar remnants, interstellar gas, dust, and dark matter. The word galaxy is derived from the Greek galaxias, literally "milky", a reference to the Milky Way. Galaxies range in size from dwarfs with just a few hundred million stars to giants with one hundred trillion stars, each orbiting its galaxy's center of mass.
+
+Galaxies are categorized according to their visual morphology as elliptical, spiral, or irregular. Many galaxies are thought to have supermassive black holes at their centers. The Milky Way's central black hole, known as Sagittarius A*, has a mass four million times greater than the Sun. As of March 2016, GN-z11 is the oldest and most distant observed galaxy with a comoving distance of 32 billion light-years from Earth, and observed as it existed just 400 million years after the Big Bang. stars that never die, discover atoms as massive as suns and universes smaller than atoms.
+ </p>
+
+ <figure class="size-2">
+ <img src="./Images/download.jpg">
+ </figure>
+ <figcaption><p>The <em>Galaxy</em>.</p></figcaption>
+
+ <h3>Palm Tree</h3>
+ <p>
+Palm trees are a botanical family of perennial lianas, shrubs, and trees. They are the only members of the family Arecaceae, which is the only family in the order Arecales. They grow in hot climates.
+
+Well known palm trees are:
+Date palm
+Coconut palm
+There are about 2600 species of palm trees, most of them living in tropical, subtropical, and warm temperate climates.
+Palms are one of the best known and most widely planted tree families. They have held an important role for humans throughout much of history. Many common products and foods come from palms. They are often used in parks and gardens that are in areas that do not have heavy frosts.
+In the past palms were symbols of victory, peace, and fertility. Today palms are a popular symbol for the tropics and for ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything.
+ <strong>Palm trees to keep environment green.</strong>
+ </p>
+
+ <div class="share">
+ <figure class="size-2">
+ <img src="./Images/palm tree.jpg">
+ </figure>
+ <figcaption><p>The <em>Palm Tree</em>.</p></figcaption>
+ </article>
+
+ <article id="the-cosmos-2">
+ <h1><a href="#the-cosmos-2">The <em>Cosmos</em> is all there is</a></h1>
+ <h2>Author: Carl Sagan</h2>
+
+ <time datetime="03-09-2014">MAR. 9, 2014</time>
+ <p>
+ <em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science.
+ It's time to get going again.
+ We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future.
+ We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms.
+ </p>
+
+ <figure class="size-2">
+ <img src="./Images/cosmos3.jpg">
+ </figure>
+ <figcaption><p>The <em>Cosmos</em>.</p></figcaption>
+
+ <h3>COSMOS IS ALSO A STORY ABOUT US</h3>
+ <p>
+ It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes.
+ To make this journey, we'll need imagination.
+ But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine.
+ This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything.
+ <strong>Accept these terms, and the cosmos is yours.</strong>
+ </p>
+
+ <div class="share">
+ <figure class="size-2">
+ <img src="./Images/cosmos1.jpg">
+ <img src="./Images/cosmos4.jpg">
+
+ </div>
+ </article>
+ </body>
+</html>
\ No newline at end of file
diff --git a/Images/cosmos1.jpg b/Images/cosmos1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..10ffeef1afd155a27669024bfc8c93c5acccf552
Binary files /dev/null and b/Images/cosmos1.jpg differ
diff --git a/Images/cosmos2.jpg b/Images/cosmos2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d1bb865827dffba002be5030530ebe7a4b499f0d
Binary files /dev/null and b/Images/cosmos2.jpg differ
diff --git a/Images/cosmos3.jpg b/Images/cosmos3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5ce185a62f6da403a26af4438578dfef41041b3e
Binary files /dev/null and b/Images/cosmos3.jpg differ
diff --git a/Images/cosmos4.jpg b/Images/cosmos4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..068bf603971d78d2e20be9af4d17bf6a7355b0af
Binary files /dev/null and b/Images/cosmos4.jpg differ
diff --git a/Images/download.jpg b/Images/download.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b542aad65c523fec5e4da60630f7282255412f9b
Binary files /dev/null and b/Images/download.jpg differ
diff --git a/Images/images.jpg b/Images/images.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4cd6bdadc9b0ebe2fc75e35086404c90e84b476e
Binary files /dev/null and b/Images/images.jpg differ
diff --git a/Images/palm tree.jpg b/Images/palm tree.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ea3d94750bb0a4e6adbe2527b9f3be6d93fe2d4d
Binary files /dev/null and b/Images/palm tree.jpg differ
diff --git a/Images/palm_tree.jpg b/Images/palm_tree.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8244d5c3486a435224229449b10bee951cc9e26f
Binary files /dev/null and b/Images/palm_tree.jpg differ
diff --git a/Project Description.pdf b/Project Description.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..d9686082b456d5c82a7f4e35770b2b8f96be210e
Binary files /dev/null and b/Project Description.pdf differ
diff --git a/index.html b/index.html
index bd3bc39f38d56618adf51d55d24a2c71f8c217da..9e26c1d4fe197a94ec0c3f17750a0a9499ce14bb 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
<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="keywords" content="web design, fitness , meditation , professional, Galaxy, others">
<meta name="author" content="Saif Ali">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="refresh" content="5">
<title>Blogs| Welcome</title>
<link rel="stylesheet" href="./css/style.css">
</head>
@@ -21,6 +23,7 @@
<li><a href="About.html">About</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="login.html">Login</a></li>
+ <li><a href="articles!.html">articles!</a></li>
</ul>
</nav>
</div>
@@ -37,7 +40,7 @@
<div class="container">
<h1>Subscribe to our Blogs</h1>
<form>
- <input type="email" placeholder="Enter Article Name....">
+ <input type="Article" placeholder="Enter Article Name....">
<button type="submit" class="button_1">Search</button>
</form>
</div>
@@ -48,7 +51,8 @@
<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>
+ <i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </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">
@@ -56,7 +60,8 @@
<img src="./Images/Meditation-PNG-Image.png">
</a>
<h3>Meditation</h3>
- <i><h4>by Saif Ali on 22-4-19</h4></i>
+ <i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </h4></i>
<p>If you’re brand new to meditation, this is a great place to start.</p>
</div>
<div class="box">
@@ -64,28 +69,32 @@
<img src="./Images/rb-tlds-profession.png" alt="">
</a>
<h3>Professions</h3>
- <i><h4>by Saif Ali on 22-4-19</h4></i>
+ <i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </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>
+ <<i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </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>
+ <i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </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>
+ <i><h4>Author: XYZ </h4></i>
+ <i><h4>Date: DD.MM.YYYY </h4></i>
<p>Well-tested interesting recipes, food science, techniques, equipment, and even food histories.</p>
</div>
diff --git a/styles/article-figure.css b/styles/article-figure.css
new file mode 100644
index 0000000000000000000000000000000000000000..fa6b15b94b83384986e946fc7ceda6bb4841c5fe
--- /dev/null
+++ b/styles/article-figure.css
@@ -0,0 +1,6 @@
+.size-1 { grid-column: 4 / 5; }
+.size-2 { grid-column: 3 / 6; }
+.size-3 { grid-column: 2 / 7; }
+.size-4 { grid-column: 1 / 8; }
+
+img.size-1, img.size-2, img.size-3, img.size-4 { width: 100%; }
\ No newline at end of file
diff --git a/styles/article-figure.txt b/styles/article-figure.txt
new file mode 100644
index 0000000000000000000000000000000000000000..2e712d9d010edb5e384907300862cb66277db674
--- /dev/null
+++ b/styles/article-figure.txt
@@ -0,0 +1,13 @@
+.size-1 { grid-column: 4 / 5; }
+.size-2 { grid-column: 3 / 6; }
+.size-3 { grid-column: 2 / 7; }
+.size-4 { grid-column: 1 / 8; }
+
+.size-1 img, .size-2 img, .size-3 img, .size-4 img { width: 100%; }
+
+figcaption {
+ margin-top: 0.5rem;
+
+ display: flex;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/styles/article-text.css b/styles/article-text.css
new file mode 100644
index 0000000000000000000000000000000000000000..8d283b694112a4d8f15b9a309ef1c0bfa7fe63f3
--- /dev/null
+++ b/styles/article-text.css
@@ -0,0 +1,13 @@
+h2, p { margin-bottom: 2.4rem; }
+
+h1 { font: 700 2.0rem/1.2 "Roboto"; color: hsl(000, 000%, 33%); }
+h2 { font: 400 1.5rem/1.2 "Roboto"; color: hsl(000, 000%, 83%); }
+time { font: 700 1.0rem/1.2 "Roboto"; color: hsl(250, 100%, 83%); }
+h3 { font: 700 1.0rem/1.2 "Roboto"; color: hsl(250, 100%, 67%); }
+p { font: 400 1.0rem/1.5 "Roboto"; color: hsl(000, 000%, 33%); }
+figcaption p { font: 400 1.0rem/1.5 "Roboto"; color: hsl(000, 000%, 83%); }
+
+a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }
+
+@media (max-width: 8.5in) { :root { font-size: 18px; } }
+@media (max-width: 5.0in) { :root { font-size: 16px; } }
\ No newline at end of file
diff --git a/styles/article.css b/styles/article.css
new file mode 100644
index 0000000000000000000000000000000000000000..7672ed9f1bae7721fca96b3521abf7416a464734
--- /dev/null
+++ b/styles/article.css
@@ -0,0 +1,14 @@
+article {
+ padding: 0.5in 0;
+
+ display: grid;
+ grid-template-columns: 1fr 0.5in [start] 1.25in 5in 1.25in [end] 0.5in 1fr;
+
+ background: linear-gradient(yellow, white 1in);
+}
+
+article * { grid-column: start / end; }
+
+@media (max-width: 8.5in) {
+ article { grid-template-columns: 1fr 5% [start] 15% 60% 15% [end] 5% 1fr; }
+}
\ No newline at end of file
diff --git a/styles/debug.css b/styles/debug.css
new file mode 100644
index 0000000000000000000000000000000000000000..4e3f197e389bcf961c324a897b5432ee9a5f9e32
--- /dev/null
+++ b/styles/debug.css
@@ -0,0 +1,11 @@
+body * {
+ color: hsla(210, 100%, 100%, 0.88) !important;
+ background: hsla(210, 100%, 50%, 0.33) !important;
+ outline: 0.25rem solid hsla(210, 100%, 100%, 0.50) !important;
+}
+
+.debug-center {
+ display: flex;
+ justify-content: center;
+ align-items:
+}
\ No newline at end of file
diff --git a/styles/reset.css b/styles/reset.css
new file mode 100644
index 0000000000000000000000000000000000000000..4472aceea1371f8a105105b63030cfa4c46c524c
--- /dev/null
+++ b/styles/reset.css
@@ -0,0 +1,13 @@
+:root { font: 20px/1.2 "Roboto", sans-serif; }
+
+body,
+body * {
+ margin: unset;
+ box-sizing: unset;
+ padding: unset;
+ font-size: unset;
+ color: unset;
+ text-decoration: unset;
+}
+
+figure * { display: block; }
\ No newline at end of file