Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added a trending section #49

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added a trending section #49

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 169 additions & 1 deletion dscblog/pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,174 @@
<br />
<br />
{% endif %}
{% if not request.user.is_authenticated %}
<div style="position:bottom ;
width:100%;

height:350px;
left: 60px;
top:60px;
margin-top:20px;
background: radial-gradient(91.06% 87.79% at 7.31% 5.58%, #96FF8B 0%, #A5FFC2 24.18%, #92FFF2 45.35%, #FFCAEF 74.34%, #FFE654 100%);
border-radius: 5px;">
<h1 style=" padding-top: 15px;
padding-left: 30px;
padding-right: 0px;">Unleash your creativity <br/> with DSC IEM</h1> <h7>
<div style="padding-top: 15px;padding-left: 30px;padding-right: 0px;">Read and share ideas from independent voices, world-class <br/> publications, and experts from around the globe. Everyone's <br/> welcome. </h7> <br/> </div> <div style="padding-top: 15px;padding-left: 30px;padding-right: 0px;">
<a class="hd_opt btn btn-bordered" href="/accounts/login" style="width: 100px ;">Log In</a>
</div>
{% endif %}
<br/>
<br/>
<br/>



<div style="background-color: #eee; padding: 10px;">
TRENDING<button style="background-color: #ccc; padding: 6px 12px; outline: none; border: 1px solid #aaa; border-radius: 15px;display: inline;margin-left:10px;">More</button>
</div>


<div>
{% for each in trending %}
<div class="blog_internal_cards">
<div class="blog_image_cards">
<img src="{{each.img_url}}" style="width: 100%;">
</div>
<div class="blog_text_cards">
<div style="height: 53px;">
<div class="blogger_image">
<img src="{{each.author.avatar_url}}" style="width: 100%;">
</div>
<div class="blogger_name">
{{each.author.name}}
</div>
<div class="blogger_desc">
{{each.title}}
</div>
</div>
</div>
</div>
{% endfor %}

</div>
<br><br>
<div style="width: 49%; display: inline-block; border: 1px solid #ddd; float: left;">
<div style="background-color: #333; padding: 10px; color: #ffffff;">
TOPICS FOR YOU
</div>
<div style="padding: 5px; text-align: right;">
<span style="float: left; color: purple;"> #webdev</span>
<button style="background-color: #ccc; padding: 6px 12px; outline: none; border: 1px solid #aaa; border-radius: 15px;">More</button>
</div>
<div style="padding: 5px; border: 1px solid #ddd;">
<div class="blogger_image2"> </div>
<div class="blogger_name2">
Baishakhi
</div>
<div class="blogger_desc2">
This is the description
</div>
</div>
<div style="padding: 5px; border: 1px solid #ddd;">
<div class="blogger_image2"> </div>
<div class="blogger_name2">
Baishakhi
</div>
<div class="blogger_desc2">
This is the description
</div>
</div>
</div>
<div style="width: 50%; display: inline-block">
<div style="background-color: #ccc; padding: 10px;">
NEW ARRIVALS
</div>
<div class="blog_internal_cards" style="width: 90%; margin: 4%;">
<div>
<div class="blog_image_cards"> </div>
<div class="blog_text_cards">
<div style="height: 53px;">
<div class="blogger_image"> </div>
<div class="blogger_name">
Baishakhi
</div>
<div class="blogger_desc" style="margin-top: 0px; width: 100%;">
This is a blog description
</div>
</div>
</div>
</div>
</div>
</div>

<style>
.blog_internal_cards{
display: inline-block;
margin: 0px;
box-sizing: border-box;
width: 33%;
height: 144px;
left: 38px;
border: 1px solid #aaa;
}
.blog_image_cards{
height: 100%;
background-color: gray;
width: 36%;
display: inline-block;
}
.blog_text_cards{
height: 100%;
width: 56%;
margin-left: 4%;
display: inline-block;
}
.blogger_image{
float: left;
margin: 10px;
background-color: gray;
width: 35px;
height: 35px;
border-radius: 50%;
}
.blogger_name{
float: left;
margin-top: 15px;
font-size: 20px;
}
.blogger_image2{
float: left;
margin: 10px;
background-color: gray;
width: 35px;
height: 35px;
border-radius: 50%;
}
.blogger_name2{
margin-top: 15px;
font-size: 20px;
}
.blogger_desc{
float: left;
margin-top: 10px;
font-size: 18px;
color: gray;
}
.blogger_desc2{
margin-top: 10px;
font-size: 28px;
color: gray;
}
</style>
<br>
<br>
<br/>
<br/>
<br/>



<div class="container" id="s1">
{% include "blocks/blogsGrid.html" with items=blogs.feed %}
</div>
Expand All @@ -33,4 +201,4 @@
</div>
<div style="height: 0.6rem;"></div>
{% endfor %}
{% endblock %}
{% endblock %}