Responsive Blog Page UI

sachincpu · Aug 29, 2020 · c339ffd · c339ffd
1 parent d26d22b
commit c339ffd
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/blog.css b/blog.css
@@ -0,0 +1,29 @@
+body{
+    border:20px solid #bdc3d7;
+    padding: 20px;
+    max-width: 700px;
+    width:80%;
+    margin: 20px auto;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-weight:900;
+}
+#My{
+      background-color: #f5d0cb;
+}
+.quote{
+    border-left: 5px solid #bdc3d7;
+    padding-left: 5px;
+}
+.date{
+ color: #3498db;
+text-transform: uppercase;
+    letter-spacing: 1px;
+    padding-top: 10px;
+}
+h2{
+    color: #2c3e50;
+    font-size: 30px;
+}
+.post{
+    margin-bottom: 20px;
+}
diff --git a/blog_idea.html b/blog_idea.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>About Me</title>
+<link rel="stylesheet" type="text/css" href="blog.css">
+<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="My">
+<div class="post">
+    <div class="date">Janaurary 1 2020</div>
+<h2>This is my First Article</h2>
+    <div class="quote">   
+        <p> Esse iudicem ex labore veniam. Ex incididunt aut possumus hic pariatur quae 
+        noster voluptate illum est et ea praesentibus, quem ita se eram consequat an 
+        aute o ex fugiat senserit iis enim arbitrantur excepteur magna mentitum, 
+        incurreret dolore lorem do lorem in ad ne voluptatibus.Enim proident id sint 
+        quid.</p>
+    </div>
+
+      <p>noster voluptate illum est et ea praesentibus, quem ita se eram consequat an 
+        aute o ex fugiat senserit iis enim arbitrantur excepteur magna mentitum, 
+        incurreret dolore lorem do lorem in ad ne voluptatibus.Enim proident id sint 
+        quid. Ab cillum offendit, probant sunt aute se multos, ea culpa eiusmod, noster 
+        quibusdam eruditionem e quae ne iudicem, velit cupidatat e proident ea de eu 
+        consectetur, eu enim offendit. Occaecat tamen ea tempor firmissimum ad aliquip 
+        comprehenderit sed expetendis. Lorem ea doctrina, ne elit aliquip offendit aut 
+        mentitum anim ea singulis voluptatibus, fugiat laborum iudicem.</p>
+
+    <p>Varias fabulas qui quae lorem si et esse incurreret litteris, sunt voluptatibus cernantur sint deserunt, ad quae velit o admodum, ex ut summis consequat, legam hic ea quid eiusmod ex tempor anim mentitum vidisse qui ullamco e malis. Ne cillum te anim. Deserunt arbitrantur do commodo si quae eiusmod est varias multos si ono distinguantur, labore cupidatat si labore veniam.</p>
+    </div>
+    <hr>
+
+    <div class="post">
+    <div class="date">February 2 2020</div>
+<h2>This is my Another Article</h2>
+    <div class="quote">   
+        <p> Esse iudicem ex labore veniam. Ex incididunt aut possumus hic pariatur quae 
+        noster voluptate illum est et ea praesentibus, quem ita se eram consequat an 
+        aute o ex fugiat senserit iis enim arbitrantur excepteur magna mentitum, 
+        incurreret dolore lorem do lorem in ad ne voluptatibus.Enim proident id sint 
+        quid.</p>
+    </div>
+
+      <p>noster voluptate illum est et ea praesentibus, quem ita se eram consequat an 
+        aute o ex fugiat senserit iis enim arbitrantur excepteur magna mentitum, 
+        incurreret dolore lorem do lorem in ad ne voluptatibus.Enim proident id sint 
+        quid. Ab cillum offendit, probant sunt aute se multos, ea culpa eiusmod, noster 
+        quibusdam eruditionem e quae ne iudicem, velit cupidatat e proident ea de eu 
+        consectetur, eu enim offendit. Occaecat tamen ea tempor firmissimum ad aliquip 
+        comprehenderit sed expetendis. Lorem ea doctrina, ne elit aliquip offendit aut 
+        mentitum anim ea singulis voluptatibus, fugiat laborum iudicem.</p>
+
+    <p>Varias fabulas qui quae lorem si et esse incurreret litteris, sunt voluptatibus cernantur sint deserunt, ad quae velit o admodum, ex ut summis consequat, legam hic ea quid eiusmod ex tempor anim mentitum vidisse qui ullamco e malis. Ne cillum te anim. Deserunt arbitrantur do commodo si quae eiusmod est varias multos si ono distinguantur, labore cupidatat si labore veniam.</p>
+    </div>
+    </div>
+ </body>
+</html>