Skip to content

Added category section html and css for both #35

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

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Added category section html and css for both #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a687685
added header html
itsashishbharti Jan 20, 2024
4f5c805
remove header html from main branch
itsashishbharti Jan 23, 2024
f044b45
added category html and link
itsashishbharti Jan 25, 2024
e644963
added category css for both mobile and desktop
itsashishbharti Jan 25, 2024
bfe26b0
added category.html and link css
itsashishbharti Jan 25, 2024
22139b3
added header css fro both mobile and desktop
itsashishbharti Jan 25, 2024
89a14a3
Modify the common.css with some tags variables
itsashishbharti Jan 25, 2024
5e4fe2c
addded recenpost section css for both
itsashishbharti Jan 25, 2024
28fb576
added category section css fro both
itsashishbharti Jan 25, 2024
c7ff7f4
added footer css for both
itsashishbharti Jan 25, 2024
ee7fdf0
added all img to of category section
itsashishbharti Jan 25, 2024
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
263 changes: 263 additions & 0 deletions blogs/01/category.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!Doctype HTML>
<html>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<head>
<title>Mini Blog</title>
<link rel="stylesheet" href="styles/common.css"/>
<link rel="stylesheet" href="styles/header.css"/>
<link rel="stylesheet" href="styles/recentpost.css"/>
<link rel="stylesheet" href="styles/footer.css"/>
<link rel="stylesheet" href="styles/category.css"/>
</head>
<body>


<header>
<nav>
<div class="container">
<div class="headername">
<a href="">Mini Blog</a>
</div>


<div class="list">

<div class="humble">
<div></div>
<div></div>
<div></div>
</div>


<div class="listmenu">
<ul>
<li> <a href="#home">Home</a></li>
<li> <a href="#politics">Politics</a></li>
<li> <a href="#tech">Tech</a></li>
<li> <a href="#entertainment">Entertainment</a></li>
<li> <a href="#travel">Travel</a></li>
<li> <a href="#sports">Sports</a></li>
<li> <a href=""><img src="img/search.png"/></a></li>
</ul>
</div>

</div>

</div>

</nav>
</header>

<section class="category-section">
<div class="category">
<div class="content">
<span>Category</span>
<h3>Sports</h3>
<p>Category description here.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam error eius quo, officiis non maxime quos reiciendis perferendis doloremque maiores!</p>
</div>
</div>
</section>

<section id="recentpost">
<div class="recent">
<div class="container">
<div class="lstchild">
<div class="first">
<a class="aa" href=" ">
</a>
<div class="box">
<span>POLITICS</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="second">
<a href=" " >
</a>
<div class="box">
<span>NATURE</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="third">
<a href=" ">
</a>
<div class="box">
<span>TRAVEL</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="fourth">
<a href=" ">
</a>
<div class="box">
<span>POLITICS</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>

</div>
<div class="fiveth">
<a href=" ">

</a>
<div class="box">
<span>NATURE</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="sixth">
<a href=" ">
</a>
<div class="box">
<span>SPORTS</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="seventh">
<a href=" ">

</a>
<div class="box">
<span>NATURE</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="eiegth">
<a href=" ">

</a>
<div class="box">
<span>SPORTS </span>
<span class="snd">TECH </span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
<div class="ninth">
<a href=" ">

</a>
<div class="box">
<span>SPORTS</span>
<span class="snd">LIFESTYLE</span>
<h2><a>The AI magically removes moving onjects from videos.</a></h2>
<div class="aimg">
<img src="https://placehold.co/30X30"/>
<span> By <a href=" ">Carrol Atkinson</a></span>
<span>&nbsp;-&nbsp; July 19,2019</span>
</div>
<p class="article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta beatae quia porro id est.</p>
<p><a href="">Red More</a></p>
</div>
</div>
</div>
<div class="border">
<div class="pagen">
<span>1</span>
<a href=" ">2</a>
<a href=" ">3</a>
<a href=" ">4</a>
<span>...</span>
<a href=" ">15</a>
</div>
</div>
</div>
</div>
</section>

<footer>
<div class="footer">
<div class="container">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Placeat reprehenderit magnam deleniti quasi saepe, consequatur atque sequi delectus dolore veritatis obcaecati quae, repellat eveniet omnis, voluptatem in. Soluta, eligendi, architecto.</p>
</div>
<div>
<ul>
<li><a href=" ">About Us</a></li>
<li><a href=" ">Advertise</a></li>
<li><a href=" ">Careers</a></li>
<li><a href=" ">Subscribes</a></li>
</ul>
<ul>
<li><a href=" ">Travel</a></li>
<li><a href=" ">Lifestyle</a></li>
<li><a href=" ">Sports</a></li>
<li><a href=" ">Nature</a></li>
</ul>
</div>
<div>
<h3>Connect With Us</h3>
<div>
<a href=""><img src="img/facebook.png"/></a>
<a href=""><img src="img/twitter.png"/></a>
<a href=""><img src="img/insta.png"/></a>
<a href=""><img src="img/wif.png"/></a>
<a href=""><img src="img/email.png"/></a>
</div>
</div>
</div>

<div>
<p>Copyright © 2024 All rights reserved | This template is made with<span> &#10084;</span> by<a href=""> Ashish</a>
</div>
</div>
</footer>
</body>
</html>
Binary file added blogs/01/img/Wif.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blogs/01/img/email.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blogs/01/img/facebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blogs/01/img/insta.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blogs/01/img/search.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added blogs/01/img/twitter.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 2 additions & 19 deletions blogs/01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,8 @@
<title>Mini Blog</title>
</head>
<body>
<header>
<nav class="header">
<h3>Mini Blog</h3>

<div class="slide">
<input type="checkbox" class="toogle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#"><img src="img/MagnifyingGlass.svg" alt=""></a></li>
</ul>
</div>
</nav>
</header>



<section class="post-highlight-section-1">
<div class="highlight-section-wrapper">
Expand Down
53 changes: 53 additions & 0 deletions blogs/01/styles/category.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.category{
height:175px;
width:100%;
background-color:var(--background-color);
padding:48px 0px;
}
.content{
height:175px;
width:570px;
background-color:var(--background-color);
padding:0px 15px;
line-height:1.5;
margin-left:150px;
}
.content > span {
height:20px;
width:67px;
color:var(--ptext-color);
display:block;
font-weight:350;
}
.content > p{
height:80px;
width:570px;
color:var(--ptext-color);
font-weight:350;
margin-top:0px;
}
.content > h3 {
font-size:28px;
margin-top:10px;
font-weight:380;
margin-bottom:8px;
color:#000;
}

@media screen and (max-width:424px){
.category{
height:200px;
}
.content{
height:200px;
margin:0px;
}
.content > h3 {
height:42px;
width:394px;
}
.content > p {
height:108px;
width:394px;
}
}
Loading