news update

This commit is contained in:
Nikita 2024-11-18 17:28:38 +02:00
parent 05cabdf108
commit 0c4ef225f6
3 changed files with 112 additions and 34 deletions

View file

@ -31,53 +31,39 @@
<!-- Дроп/блок новости 1--> <!-- Дроп/блок новости 1-->
<div class="post_box"> <div class="post_box">
<div class="post_name"> <div class="post_date">
<h3>Loaded post header</h3> <p>18/11/2024</p>
</div> </div>
<div class="post_name">
<h3>loaded post header</h3>
</div>
<div class="post_description multiline"> <div class="post_description multiline">
<p>only 2 first lines will be shown</p> <p>only 2 first lines will be shown</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p>
</div> </div>
<a class="content_butt" href="news/">read more...</a> <a class="content_butt readmore" href="news/">read more...</a>
</div> </div>
<!-- Дроп/блок новости 2--> <!-- Дроп/блок новости 2-->
<div class="post_box"> <div class="post_box">
<div class="post_date">
<p>18/11/2024</p>
</div>
<div class="post_name"> <div class="post_name">
<h3>Loaded post header</h3> <h3>loaded post header</h3>
</div> </div>
<div class="post_description multiline"> <div class="post_description multiline">
<p>only 2 first lines will be shown</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p>
</div> </div>
<a class="content_butt" href="news/">read more...</a> <a class="content_butt readmore" href="news/">read more...</a>
</div> </div>
<!-- Дроп/блок новости 3-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora suscipit non exercitationem consequatur, animi eveniet enim. Nam, error. Facilis iusto amet id architecto est, praesentium velit quibusdam enim deleniti ipsam ea molestias ullam tempore aperiam.</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
<!-- Дроп/блок новости 4-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora suscipit non exercitationem consequatur, animi eveniet enim. Nam, error. Facilis iusto amet id architecto est, praesentium velit quibusdam enim deleniti ipsam ea molestias ullam tempore aperiam.</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
</div> </div>
</div> </div>
</div> </div>

84
news/post_page.html Normal file
View file

@ -0,0 +1,84 @@
<!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="style.css">
<title>The App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<div class="page_container">
<div class="nav_box">
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
<h2>News</h2>
<div class="navigation">
<a class="nav_butt_2" href="about.html">About Us</a>
<a class="nav_butt_2" href="download.html">Download</a>
<a class="nav_butt_2" href="contact.html">Contact</a>
<a class="nav_butt_2" href="news.html">News</a>
<a class="nav_butt_2" href="">###</a>
<a class="nav_butt_2" href="">###</a>
</div>
</div>
<div class="content_wrap">
<div class="content_box">
<!-- Дроп/блок новости 1-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>only 2 first lines will be shown</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
<!-- Дроп/блок новости 2-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>only 2 first lines will be shown</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
<!-- Дроп/блок новости 3-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora suscipit non exercitationem consequatur, animi eveniet enim. Nam, error. Facilis iusto amet id architecto est, praesentium velit quibusdam enim deleniti ipsam ea molestias ullam tempore aperiam.</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
<!-- Дроп/блок новости 4-->
<div class="post_box">
<div class="post_name">
<h3>Loaded post header</h3>
</div>
<div class="post_description multiline">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora suscipit non exercitationem consequatur, animi eveniet enim. Nam, error. Facilis iusto amet id architecto est, praesentium velit quibusdam enim deleniti ipsam ea molestias ullam tempore aperiam.</p>
</div>
<a class="content_butt" href="news/">read more...</a>
</div>
</div>
</div>
</div>
</body>

View file

@ -152,6 +152,7 @@ p, a, ul, li{
} }
.post_name{ .post_name{
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase;
} }
.post_description{ .post_description{
margin-bottom: 20px; margin-bottom: 20px;
@ -162,3 +163,10 @@ p, a, ul, li{
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 2; /* Ограничение на 2 строки */ -webkit-line-clamp: 2; /* Ограничение на 2 строки */
} }
.post_date{
float: right;
}
.readmore{
}