Alena/Figma_itproger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

section_news

Browse Source
This commit is contained in:
Alena Trushcheva
2026-03-09 19:49:23 +03:00
parent f71f914a65
commit ffca9f3c31
15 changed files with 268 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
about.html
View File

@@ -18,10 +18,10 @@
<li class="item"> <li class="item">
<a class="link" href="/">Home</a> <a class="link" href="/">Home</a>
</li> </li>
<li class="item active"><a class="link" href="/about.html">About us</a></li> <li class="item active"><a class="link" href="./about.html">About us</a></li>
<li class="item"><a class="link" href="/portfolio.html">Portfolio</a></li> <li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item"><a class="link" href="/news.html">News</a></li> <li class="item"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="/contacts.html">Contacts</a></li> <li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

8
contacts.html
View File

@@ -17,10 +17,10 @@
<li class="item"> <li class="item">
<a class="link" href="/">Home</a> <a class="link" href="/">Home</a>
</li> </li>
<li class="item"><a class="link" href="/about.html">About us</a></li> <li class="item"><a class="link" href="./about.html">About us</a></li>
<li class="item"><a class="link" href="/portfolio.html">Portfolio</a></li> <li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item"><a class="link" href="/news.html">News</a></li> <li class="item"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="/contacts.html">Contacts</a></li> <li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

BIN
images/news/RIGHT/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
images/news/RIGHT/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
images/news/RIGHT/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
images/news/RIGHT/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
images/news/RIGHT/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
images/news/RIGHT/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/news/RIGHT/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/news/left/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 KiB

BIN
images/news/left/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 KiB

8
index.html
View File

@@ -18,10 +18,10 @@
<li class="item active"> <li class="item active">
<a class="link" href="/">Home</a> <a class="link" href="/">Home</a>
</li> </li>
<li class="item"><a class="link" href="/about.html">About us</a></li> <li class="item"><a class="link" href="./about.html">About us</a></li>
<li class="item"><a class="link" href="/portfolio.html">Portfolio</a></li> <li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item"><a class="link" href="/news.html">News</a></li> <li class="item"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="/contacts.html">Contacts</a></li> <li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

156
news.html
View File

@@ -17,10 +17,10 @@
<li class="item"> <li class="item">
<a class="link" href="/">Home</a> <a class="link" href="/">Home</a>
</li> </li>
<li class="item"><a class="link" href="/about.html">About us</a></li> <li class="item"><a class="link" href="./about.html">About us</a></li>
<li class="item"><a class="link" href="/portfolio.html">Portfolio</a></li> <li class="item"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item active"><a class="link" href="/news.html">News</a></li> <li class="item active"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="/contacts.html">Contacts</a></li> <li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
@@ -33,6 +33,154 @@
</div> </div>
</div> </div>
<div class="news container">
<div class="news_separation">
<div class="news_left">
<div class="news_post">
<img class="news_image" src="images/news/left/1.png" alt="img">
<div class="news_content">
<div class="news_title">
John smash
</div>
<div class="news_time">
.5min
</div>
<h1 class="news_h1">Lorem Ipsum is simply dummy text dummy text</h1>
<p class="news_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</p>
<p class="news_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
<div class="news_line"></div>
<div class="news_post">
<img class="news_image" src="images/news/left/2.png" alt="img">
<div class="news_content">
<div class="news_title">
John smash
</div>
<div class="news_time">
.5min
</div>
<h1 class="news_h1">Lorem Ipsum is simply dummy text dummy text</h1>
<p class="news_p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</p>
</div>
</div>
<h1 class="news_h1">Lorem Ipsum</h1>
<p class="news_p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="news_right">
<!-- 1 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/1.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 2 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/2.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_2">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 3 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/3.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_3">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 4 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/4.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_4">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 5 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/5.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_5">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 6 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/6.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_6">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
<!-- 7 -->
<div class="news_items">
<div class="news_item">
<img class="news_item_img" src="images/news/RIGHT/7.png" alt="">
<div class="news_cont">
<div class="news_cont_title">
<h4 class="news_item_h4 news_item_h4_7">John smash</h4>
<div class="news_item_time">
.5min
</div>
</div>
<h2 class="news_item_h2">Lorem Ipsum is simply dummy text dummy text ? </h2>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer"> <footer class="footer">
<div class="blocks container"> <div class="blocks container">
<div class="footer_info"> <div class="footer_info">

8
portfolio.html
View File

@@ -17,10 +17,10 @@
<li class="item"> <li class="item">
<a class="link" href="/">Home</a> <a class="link" href="/">Home</a>
</li> </li>
<li class="item"><a class="link" href="/about.html">About us</a></li> <li class="item"><a class="link" href="./about.html">About us</a></li>
<li class="item active"><a class="link" href="/portfolio.html">Portfolio</a></li> <li class="item active"><a class="link" href="./portfolio.html">Portfolio</a></li>
<li class="item"><a class="link" href="/news.html">News</a></li> <li class="item"><a class="link" href="./news.html">News</a></li>
<li class="item btn"><a class="link" href="/contacts.html">Contacts</a></li> <li class="item btn"><a class="link" href="./contacts.html">Contacts</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>

100
style.css
View File

@@ -689,12 +689,112 @@ textarea {
border-radius: 10px; border-radius: 10px;
z-index: 0; z-index: 0;
background-color: #1C140F; background-color: #1C140F;
color: #fff;
line-height: 1.8;
} }
.input_news input { .input_news input {
position: relative; position: relative;
} }
/* -------------------------------------NEWS-CONTENT------------------------------------- */
.news {
}
.container {
}
.news_separation {
display: flex;
gap: 80px;
}
.news_left {
flex-basis: 50%;
}
.news_post {
}
.news_image {
padding-bottom: 25px;
}
.news_content {
}
.news_title {
font-size: 16px;
line-height: 1.8;
padding: 15px 40px;
background-color: #2351F5;
display: inline-block;
margin-right: 15px;
margin-bottom: 30px;
}
.news_time {
display: inline;
}
.news_h1 {
line-height: 1.5;
}
.news_p {
font-weight: 100;
line-height: 1.8;
}
.news_line {
border-top: 0.1px solid rgba(255, 255, 255, 0.7);
padding-bottom: 80px;
}
.news_right {
flex-basis: 50%;
}
.news_items {
}
.news_item {
display: flex;
padding-bottom: 80px;
}
.news_item_img {
width: 100%;
height: 100%;
}
.news_cont {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30px 0px 30px 30px;
}
.news_cont_title {
display: flex;
align-items: center;
gap: 20px;
}
.news_item_h4 {
padding: 15px 20px;
background-color: #FF8484;
}
.news_item_time {
font-size: 14px;
}
.news_item_h2 {
font-size: 23px;
font-weight: 500;
line-height: 1.8;
}
.news_item_h4_2 {
background-color: #2351F5;
}
.news_item_h4_3 {
background-color: #FF7C32;
}
.news_item_h4_4 {
background-color: #2351F5;
}
.news_item_h4_5 {
background-color: #23A54F;
}
.news_item_h4_6 {
background-color: #2351F5;
}
.news_item_h4_7 {
background-color: #9921C3;
}
/* -----------------------------------FOOTER------------------------------------------ */ /* -----------------------------------FOOTER------------------------------------------ */
.footer { .footer {