Issue
I am working on this blog and I want to whenever a user makes a new post it gets displayed next to the others not under them but I don't know what should I do so far I have these cards but they keeps being displayed under each other if I need to post another part of my code please let me know
I appreciate the help
I want it to be something like this
post.html
{% extends "online_shop/base.html" %}
{% load static %}
{% block content %}
{% for post in posts %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="margin-top: 35px;"></div>
<div class="card-deck" style="max-width: 300px;">
<div class="card row">
<img class="card-img-top" src="{% static 'online_shop/unicorn-cake-14.jpg'%}" alt="Card image cap" width="300" height="310">
<div class="card-body">
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="card-text">{{ post.content }}</p>
{{ post.content|truncatewords_html:15 }}
</div>
<div class="card-footer">
<small class="text-muted"><a href="#">{{ post.author }}</a></small>
<small class="text-muted" style="margin-left: 5px;">{{ post.date_posted|date:"F d, Y" }}</small>
</div>
</div>
</div>
</body>
{% endfor %}
{% endblock content %}Solution
Please go through the code and run snippet on full page. I made something similar to what you want on your blog page.
I have used display : flex to make page responsive and user interactive.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: rgb(235, 235, 235);
}
.flex-box {
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card-1{
position: relative;
width: 480px;
height: 720px;
background: #eaf5f0;
border-radius: 5px;
box-shadow: 0 35px 80px rgba(0,0,0,0.15);
transition: 0.5s;
margin: 25px;
}
.card-1 .heading-1{
margin: 10px;
}
.card-1 .content-1{
position: relative;
height: 100%;
width: 480px;
padding-left: 10px;
}
.card-1 .extra-1{
position: relative;
padding : 10px;
color: black;
font-weight: 700;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="q3.css" />
<title>Blog</title>
</head>
<body>
<div class="flex-box">
<div class="card-1">
<div class="image-1">
<img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
</div>
<div class="detail-1">
<h2 class="heading-1">Lorem ipsum </h2>
<p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="extra-1"> DATE : dd/mm/yyyy</p>
</div>
</div>
<div class="card-1">
<div class="image-1">
<img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
</div>
<div class="detail-1">
<h2 class="heading-1">Lorem ipsum </h2>
<p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="extra-1"> DATE : dd/mm/yyyy</p>
</div>
</div>
<div class="card-1">
<div class="image-1">
<img src="https://www.storbeck-isolierungen.de/images/photos/480.png">
</div>
<div class="detail-1">
<h2 class="heading-1">Lorem ipsum </h2>
<p class="content-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="extra-1"> DATE : dd/mm/yyyy</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Answered By - ArthPatel02
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.