section_portfolio
This commit is contained in:
BIN
images/Hero Video.png
Normal file
BIN
images/Hero Video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
BIN
images/Vector.png
Normal file
BIN
images/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 B |
BIN
images/portfolio/1.png
Normal file
BIN
images/portfolio/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 563 KiB |
BIN
images/portfolio/2.png
Normal file
BIN
images/portfolio/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
BIN
images/portfolio/3.png
Normal file
BIN
images/portfolio/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
@@ -64,6 +64,86 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
83
style.css
83
style.css
@@ -532,6 +532,7 @@ textarea {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
margin: 0px 80px;
|
||||||
}
|
}
|
||||||
.portfolio_item {
|
.portfolio_item {
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
@@ -568,6 +569,88 @@ textarea {
|
|||||||
font-size: 20px;
|
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------------------------------------------ */
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|||||||
Reference in New Issue
Block a user