All Articles Web Page with sample articleswith pictures

bf0f0dd5 · Muhammad Butt · 692d475b · bf0f0dd5 · bf0f0dd5 · bf0f0dd5
Commit bf0f0dd5 authored 5 years ago by Muhammad Butt
--- a/Articles!.html
+++ b/Articles!.html
+<!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
--- a/Images/cosmos1.jpg
+++ b/Images/cosmos1.jpg
--- a/Images/cosmos2.jpg
+++ b/Images/cosmos2.jpg
--- a/Images/cosmos3.jpg
+++ b/Images/cosmos3.jpg
--- a/Images/cosmos4.jpg
+++ b/Images/cosmos4.jpg
--- a/Images/download.jpg
+++ b/Images/download.jpg
--- a/Images/images.jpg
+++ b/Images/images.jpg
--- a/Images/palm tree.jpg
+++ b/Images/palm tree.jpg
--- a/Images/palm_tree.jpg
+++ b/Images/palm_tree.jpg
--- a/Project Description.pdf
+++ b/Project Description.pdf
--- 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>

--- a/styles/article-figure.css
+++ b/styles/article-figure.css
+.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
--- a/styles/article-figure.txt
+++ b/styles/article-figure.txt
+.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
--- a/styles/article-text.css
+++ b/styles/article-text.css
+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
--- a/styles/article.css
+++ b/styles/article.css
+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
--- a/styles/debug.css
+++ b/styles/debug.css
+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
--- a/styles/reset.css
+++ b/styles/reset.css
+: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