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

section_portfolio

Browse Source
This commit is contained in:
Alena Trushcheva
2026-03-01 16:44:30 +03:00
parent bd95f02596
commit 98e9ee1d5d
7 changed files with 163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Hero Video.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 KiB

BIN
images/Vector.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 758 B

BIN
images/portfolio/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 KiB

BIN
images/portfolio/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

BIN
images/portfolio/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

80
portfolio.html
View File

@@ -64,6 +64,86 @@
</p>
</div>
</div>
<div class="portfolio_about">
<img class="portfolio_video" src="images/Hero Video.png" alt="hero_video">
<div class="portfolio_content">
<h2 class="portfolio_h2">Lorem Ipsum is simply dummy text.</h2>
<p class="portfolio_p_2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy .
</p>
<ul class="portfolio_ul">
<li class="portfolio_li">
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
</li>
<li class="portfolio_li">
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
</li>
<li class="portfolio_li">
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
</li>
<li class="portfolio_li">
<img class="porftfolio_vector" src="images/Vector.png" alt="vector">
<p class="portfolio_li_p">Lorem Ipsum is simply</p>
</li>
</ul>
</div>
</div>
<div class="portfolio_readme">
<div class="portfolio_readme_content">
<h3 class="portfolio_h3">
Lorem Ipsum is simply dummy
text dummy text
</h3>
<p class="portfolio_p_row">
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="portfolio_p_row">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button class="portfolio_btn" type="button">Read more</button>
</div>
<img class="portfolio_img" src="images/portfolio/1.png" alt="image">
</div>
<div class="portfolio_readme portfolio_readme_reverse">
<div class="portfolio_readme_content">
<h3 class="portfolio_h3">
Lorem Ipsum is simply dummy
text dummy text
</h3>
<p class="portfolio_p_row">
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="portfolio_p_row">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button class="portfolio_btn" type="button">Read more</button>
</div>
<img class="portfolio_img" src="images/portfolio/2.png" alt="image">
</div>
<div class="portfolio_readme">
<div class="portfolio_readme_content">
<h3 class="portfolio_h3">
Lorem Ipsum is simply dummy
text dummy text
</h3>
<p class="portfolio_p_row">
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="portfolio_p_row">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button class="portfolio_btn" type="button">Read more</button>
</div>
<img class="portfolio_img" src="images/portfolio/3.png" alt="image">
</div>
</div>

83
style.css
View File

@@ -532,6 +532,7 @@ textarea {
border-radius: 10px;
padding: 30px;
margin-top: 30px;
margin: 0px 80px;
}
.portfolio_item {
padding: 30px 0;
@@ -568,6 +569,88 @@ textarea {
font-size: 20px;
}
.portfolio_about {
padding-top: 120px;
display: flex;
justify-content: space-between;
}
.portfolio_video {
object-fit: contain;
}
.portfolio_content {
margin-left: 80px;
}
.portfolio_h2 {
font-size: 30px;
font-weight: 900;
padding-bottom: 20px;
line-height: 1.8;
}
.portfolio_p_2 {
font-size: 14px;
font-weight: 500;
padding-bottom: 25px;
line-height: 1.8;
}
.portfolio_ul {
}
.portfolio_li {
display: flex;
align-items: center;
gap: 15px;
overflow: hidden;
padding-bottom: 10px;
}
.porftfolio_vector {
width: 100%;
height: 100%;
height: 24px;
width: 24px;
}
.portfolio_li_p {
font-size: 14px;
font-weight: 500;
line-height: 1.8;
}
.portfolio_readme {
padding-top: 160px;
display: flex;
justify-content: space-between;
gap: 140px;
}
.portfolio_readme_reverse {
flex-direction: row-reverse;
}
.portfolio_readme_content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.portfolio_h3 {
font-size: 30px;
font-weight: 500;
line-height: 1.5;
}
.portfolio_p_row {
font-size: 17px;
line-height: 1.5;
}
.portfolio_btn {
width: 40%;
border-radius: 0;
background: none;
background-color: #DC7000;
font-size: 16px;
transition: all 500ms ease;
}
.portfolio_btn:hover {
transform: none;
background-color: #b01414;
}
.portfolio_img {
}
/* -----------------------------------FOOTER------------------------------------------ */
.footer {