├── bg.jpg
├── screenshot.jpg
├── README.md
├── style.css
└── index.html


/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Simple-Blog-Page/HEAD/bg.jpg


--------------------------------------------------------------------------------
/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/Simple-Blog-Page/HEAD/screenshot.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Simple Blog Page
 2 | In this tutorial ([Open in Youtube](https://youtu.be/wSMfn6etuus)), I'm going to show you how to use modern HTML and CSS to create a completely responsive Simple Blog Page. We'll be using CSS Flexbox and Media queries for our responsive project, and CSS  background for it's background❗️
 3 | 
 4 | # Screenshot
 5 | Here we have project screenshot :
 6 | 
 7 | ![screenshot](screenshot.jpg)
 8 | 
 9 | # AsmrProg
10 | 
11 | We create a project each 4 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
12 | You can vote for upcoming projects on our channel **community** page :wink:


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | body{
 10 |     font-family: 'Poppins', sans-serif;
 11 |     display: flex;
 12 |     justify-content: center;
 13 |     height: 100vh;
 14 |     color: #fff;
 15 |     background-color: #202020;
 16 |     padding: 50px;
 17 | }
 18 | 
 19 | body .container{
 20 |     max-width: 1000px;
 21 | }
 22 | 
 23 | body .container header{
 24 |     background: url(bg.jpg) center / cover no-repeat;
 25 |     display: flex;
 26 |     flex-direction: column;
 27 |     justify-content: space-between;
 28 |     min-height: 400px;
 29 |     padding: 20px 50px 60px;
 30 |     border-radius: 16px;
 31 | }
 32 | 
 33 | body .container header .category{
 34 |     font-size: 1.2rem;
 35 |     font-weight: bold;
 36 |     letter-spacing: 0.3rem;
 37 |     text-transform: uppercase;
 38 | }
 39 | 
 40 | body .container header .info{
 41 |     text-align: center;
 42 | }
 43 | 
 44 | body .container header .info .tags i{
 45 |     font-size: 18px;
 46 |     margin-right: 4px;
 47 | }
 48 | 
 49 | body .container header .info .tags span{
 50 |     font-size: 0.8rem;
 51 | }
 52 | 
 53 | body .container header .info .title{
 54 |     margin: 20px 0;
 55 |     font-size: 3rem;
 56 |     font-weight: bold;
 57 | }
 58 | 
 59 | body .container header .info .subtitle{
 60 |     min-width: 70%;
 61 |     margin: 0 auto 20px;
 62 |     font-size: 1rem;
 63 | }
 64 | 
 65 | body .details{
 66 |     display: flex;
 67 |     justify-content: space-between;
 68 |     background: rgba(0, 0, 0, 0.14);
 69 |     margin-top: 50px;
 70 |     padding: 20px 50px;
 71 |     border-radius: 16px;
 72 |     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 73 |     border: 1px solid rgba(0, 0, 0, 0.68);
 74 | }
 75 | 
 76 | body .details .item .item-title{
 77 |     color: #ccc;
 78 | }
 79 | 
 80 | body .details .item .item-text{
 81 |     margin-top: 12px;
 82 |     font-size: 1.5rem;
 83 | }
 84 | 
 85 | body article{
 86 |     margin-top: 50px;
 87 |     padding-bottom: 20px;
 88 |     line-height: 1.70;
 89 | }
 90 | 
 91 | body article h4{
 92 |     margin-top: 50px;
 93 |     margin-bottom: 20px;
 94 |     font-size: 1.25rem;
 95 | }
 96 | 
 97 | body article p{
 98 |     margin-bottom: 20px;
 99 |     color: #999;
100 |     font-size: 1.1rem;
101 | }
102 | 
103 | body article blockquote{
104 |     margin: 40px 0;
105 |     background-color: #181818;
106 |     padding: 30px;
107 |     border-radius: 16px;
108 | }
109 | 
110 | @media screen and (max-width: 768px) {
111 |     
112 |     body .container header{
113 |         padding: 10px 20px 30px;
114 |         min-height: 300px;
115 |     }
116 | 
117 |     body .container header .category{
118 |         font-size: 0.9rem;
119 |     }
120 | 
121 |     body .container header .info .title{
122 |         font-size: 2.2rem;
123 |     }
124 | 
125 |     body .container header .info .subtitle{
126 |         font-size: 0.8rem;
127 |     }
128 | 
129 |     body .container .details {
130 |         flex-direction: column;
131 |     }
132 | 
133 |     body .container .details .item:not(:last-child){
134 |         margin-bottom: 30px;
135 |     }
136 | 
137 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Simple Blog Page | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <header>
16 |             <div class="category">TECH</div>
17 |             <div class="info">
18 |                 <div class="tags">
19 |                     <i class="fa-solid fa-tag"></i>
20 |                     <span>Coding, Programming</span>
21 |                 </div>
22 |                 <h1 class="title">Web Coding!</h1>
23 |                 <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi consequatur
24 |                     cupiditate incidunt cumque illo alias, odit dolorem et reprehenderit.</p>
25 |             </div>
26 |         </header>
27 |         <section class="details">
28 |             <div class="item">
29 |                 <h5 class="item-title">Reading Time</h5>
30 |                 <p class="item-text"><span class="item-data">3</span> Mins</p>
31 |             </div>
32 |             <div class="item">
33 |                 <h5 class="item-title">Publish Date</h5>
34 |                 <p class="item-text"><span class="item-data">May 27, 2023</span></p>
35 |             </div>
36 |             <div class="item">
37 |                 <h5 class="item-title">View</h5>
38 |                 <p class="item-text"><span class="item-data">12.7K</span> Views</p>
39 |             </div>
40 |         </section>
41 |         <article>
42 |             <h4>What is Web Coding?</h4>
43 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At cupiditate deleniti voluptas dolor, non optio
44 |                 vitae reiciendis, eveniet ullam suscipit harum velit esse provident id! Dolore culpa omnis ullam! Atque?
45 |             </p>
46 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque aliquam quasi deleniti molestias
47 |                 consequatur veniam nobis porro perferendis ex quae enim nesciunt, laborum odit quo tenetur velit
48 |                 corrupti odio facere.</p>
49 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At exercitationem labore et omnis quod, sit
50 |                 corporis beatae deleniti est totam vel eos, molestiae velit laudantium quam culpa ad ipsa ipsam!</p>
51 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore harum aspernatur provident reiciendis
52 |                 neque nobis, esse veritatis, dolore consequuntur odit aliquid laboriosam quo eveniet facere. Minima sit
53 |                 nobis architecto quos?</p>
54 | 
55 |             <h4>Coding Daily, Coding All Time!</h4>
56 |             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, sint. Eveniet ex labore possimus minima
57 |                 adipisci quasi sint ab voluptatibus, enim aliquid repudiandae magnam. Error harum distinctio sint iste
58 |                 eos.</p>
59 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto eos dicta facilis, fugit, ducimus
60 |                 unde magni sit numquam omnis dolorem magnam debitis tempore aliquid esse quod laboriosam laudantium
61 |                 voluptate ad?</p>
62 |             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam provident voluptatibus reiciendis
63 |                 quae, voluptatem ut, tenetur, vel eligendi porro commodi dolore quam autem. Sint beatae repellat
64 |                 voluptates dolorem quia dolore?</p>
65 |             <blockquote>
66 |                 "In the realm of code, where logic meets creativity, a programmer finds their true wings,
67 |                 soaring above challenges and crafting digital dreams." &mdash; ChatGPT
68 |             </blockquote>
69 |             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto nam odio iste unde laboriosam. Modi
70 |                 dolorum ipsum aliquid labore minus fuga exercitationem sunt enim! Amet quaerat vero minima ea assumenda.
71 |             </p>
72 |         </article>
73 |     </div>
74 | 
75 | </body>
76 | 
77 | </html>


--------------------------------------------------------------------------------