Skip to content

Commit

Permalink
Portfolio section finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@salehMb1999
salehMb1999 committed Sep 19, 2023
1 parent 20fd5fb commit 8335fe6
Show file tree
Hide file tree
Showing 8 changed files with 168 additions and 17 deletions.
77 changes: 72 additions & 5 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@

* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
text-decoration: none;
border: none;
Expand Down Expand Up @@ -154,7 +153,6 @@ span {
margin: 2rem 0 3rem;
}


.services h2 {
margin-bottom: 5rem;
}
Expand All @@ -171,7 +169,7 @@ span {
padding: 3rem 2rem 4rem;
border-radius: 2rem;
text-align: center;
border: .2rem solid var(--bg-color);
border: 0.2rem solid var(--bg-color);
transition: all 0.3s ease-in-out;
}
.services-container .services-box:hover {
Expand All @@ -181,12 +179,81 @@ span {
.services-box i {
font-size: 7rem;
color: var(--main-color);

}
.services-box h3 {
font-size: 2.6rem;
}
.services-box p {
font-size: 1.6rem;
margin: 1rem 0 3rem;
}

.portfolio {
background: var(--second-bg-color);
}

.portfolio h2 {
margin-bottom: 4rem;
}
.portfolio-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 2.5rem;
}
.portfolio-container .portfolio-box {
position: relative;
border-radius: 2rem;
box-shadow: 0 0 1rem var(--bg-color);
overflow: hidden;
display: flex;
}
.portfolio-box img {
width: 100%;
transition: .3s all ease-in-out;

}
.portfolio-box .portfolio-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.1), var(--main-color));
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
padding: 0 4rem;
transform: translateY(100%);
transition: .3s all ease-in-out;
}
.portfolio-box img:hover {
transform: scale(1.1);

}
.portfolio-box:hover .portfolio-layer {
transform: translateY(0);

}
.portfolio-layer h4 {
font-size: 3rem;
}
.portfolio-layer p {
font-size: 1.6rem;
margin: .3rem 0 1rem;
}
.portfolio-layer a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 5rem;
height: 5rem;
background: var(--text-color);
border-radius: 50%;
}
.portfolio-layer a i {
font-size: 2rem;
color: var(--second-bg-color);
}
Binary file added images/1.jpg
View file
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 images/2.jpg
View file
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 images/3.jpg
View file
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 images/4.jpg
View file
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 images/5.jpg
View file
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 images/6.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
108 changes: 96 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,12 @@
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<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=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<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=Poppins:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Header Design -->
Expand All @@ -32,7 +35,7 @@
<h3>Hello, Its Me</h3>
<h1>Saleh</h1>
<h3>And I'm a <span>Front Developer</span></h3>
<p>Athlete elementary Teacher who love Coding...</p>
<p>Athlete elementary Teacher who loves Coding...</p>
<div class="social-media">
<a href="#"><i class="bx bxl-telegram"></i></a>
<a href="#"><i class="bx bxl-twitter"></i></a>
Expand Down Expand Up @@ -73,28 +76,109 @@ <h2 class="heading">Our <span>Services</span></h2>
<div class="services-box">
<i class="bx bx-code-alt"></i>
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel
quas laborum saepe amet consequatur magnam aperiam libero voluptas
ipsa.
</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="services-box">
<i class="bx bxs-paint"></i>
<h3>Graphic Design</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel
quas laborum saepe amet consequatur magnam aperiam libero voluptas
ipsa.
</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="services-box">
<i class="bx bx-bar-chart-alt"></i>
<h3>Digital Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel
quas laborum saepe amet consequatur magnam aperiam libero voluptas
ipsa.
</p>
<a href="#" class="btn">Read More</a>
</div>

</div>
</section>



</section>

<!-- Portfolio Section Design -->
<section class="portfolio" id="portfolio">
<h2 class="heading">Latest <span>Project</span></h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="images/1.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="images/2.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="images/3.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="images/4.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="images/5.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="images/6.jpg" alt="1" />
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa,
voluptates?
</p>
<a href="#"><i class="bx bx-link-external"></i></a>
</div>
</div>

</div>
</section>
<!-- Js -->
<script src="./js/app.js"></script>
</body>
Expand Down

0 comments on commit 8335fe6

Please sign in to comment.