Coding the post page and adding the styles
Welcome back!!!. If you want to understand this post please do refer my previous tutorial. Let’s start coding the blog post page . Our post page contains a image,video and description about the post.
You can name the post page as you want but keep the same name to link the post to main page.
<html><head><title>Biryani</title><link rel="stylesheet" href="post.css" ></head><body><div class="posts"><div class="image"><img src="https://www.indianhealthyrecipes.com/wp-content/uploads/2019/02/chicken-biryani-recipe-500x500.jpg" alt="img" height="350" width="350"></div><div class="video"><iframe width="380" height="250" src="https://www.youtube.com/embed/OyxWVJQUC18?start=6" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><div class="desc"><center><h1>Title</h1></center><p>Your content here</p></div></div></body></html>
This is a very simple and basic template for a blog post, still we can add links to external sites and embed files.
Now coming to the most important part CSS styles for both main page and blog posts
We will first start with the main page styles main.css.
.intro{height: 70%;width: 100%;background-image: url("https://images.unsplash.com/photo-1490818387583-1baba5e638af?ixlib=rb-1.2.1&w=1000&q=80");background-size: cover;}#name{font-family: cursive;padding-left:40%;padding-top: 10%;padding-bottom: 40%;padding-right: 20%;font-size:xx-large;}* {box-sizing: border-box;}.column {float: left;width: 33%;padding: 5px 5px;}.blog {margin: 0 -5px;}.blog:after {content: "";display: table;clear: both;}.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */padding: 16px;text-align: center;background-color: #f1f1f1;}@media screen and (max-width: 600px) {.column {width: 100%;display: block;margin-bottom: 20px;}img{height:auto;width: auto;}}#about{text-align: center;font-size: x-large;}.aboutme{padding-top: 5%;padding-bottom: 5%;}#mypic{border-radius: 50%;}.fa{padding: 20px;font-size: 30px;width: 50px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%}.fa:hover {opacity: 0.7;}.fa-facebook {background: #3B5998;color: white;}.fa-instagram {background: #125688;color: white;}
Next I have added the styles for blog post template. post.css
.image{position: absolute;top: 5vh;left: 3vw;border-radius: 50%;}.video{position: absolute;left: 3vw;bottom: 4vw;}.desc{position: absolute;margin-left: 12cm;margin-top: 2cm;margin-bottom: 2cm;margin-right: 1cm;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */text-align: center;background-color: #f1f1f1;}.posts{margin-top: 5px;margin-bottom: 5px;margin-left: 5px;margin-right: 5px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */background-color: #f1f1f1;}
As of now I don’t want to confuse you with CSS explanation. If someone is more interested to learn about CSS selectors and styling attributes, you can visit www.w3schools.com
Now its very simple to add blog posts, after creating the blog post link it with the main page by adding the card component to the columns.
Thanks for reading my tutorial!
