diff --git a/css/style.css b/css/style.css index 29cf849..dbc0d8c 100644 --- a/css/style.css +++ b/css/style.css @@ -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; @@ -154,7 +153,6 @@ span { margin: 2rem 0 3rem; } - .services h2 { margin-bottom: 5rem; } @@ -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 { @@ -181,7 +179,6 @@ span { .services-box i { font-size: 7rem; color: var(--main-color); - } .services-box h3 { font-size: 2.6rem; @@ -189,4 +186,74 @@ span { .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); } \ No newline at end of file diff --git a/images/1.jpg b/images/1.jpg new file mode 100644 index 0000000..ecfda4f Binary files /dev/null and b/images/1.jpg differ diff --git a/images/2.jpg b/images/2.jpg new file mode 100644 index 0000000..ade8041 Binary files /dev/null and b/images/2.jpg differ diff --git a/images/3.jpg b/images/3.jpg new file mode 100644 index 0000000..d01d0cc Binary files /dev/null and b/images/3.jpg differ diff --git a/images/4.jpg b/images/4.jpg new file mode 100644 index 0000000..ade8041 Binary files /dev/null and b/images/4.jpg differ diff --git a/images/5.jpg b/images/5.jpg new file mode 100644 index 0000000..ecfda4f Binary files /dev/null and b/images/5.jpg differ diff --git a/images/6.jpg b/images/6.jpg new file mode 100644 index 0000000..ec82844 Binary files /dev/null and b/images/6.jpg differ diff --git a/index.html b/index.html index b0f03f4..c3e2a2c 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,12 @@ href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" /> - - - + + + @@ -32,7 +35,7 @@

Hello, Its Me

Saleh

And I'm a Front Developer

-

Athlete elementary Teacher who love Coding...

+

Athlete elementary Teacher who loves Coding...

@@ -73,28 +76,109 @@

Our Services

Web Development

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel + quas laborum saepe amet consequatur magnam aperiam libero voluptas + ipsa. +

Read More

Graphic Design

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel + quas laborum saepe amet consequatur magnam aperiam libero voluptas + ipsa. +

Read More

Digital Marketing

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel quas laborum saepe amet consequatur magnam aperiam libero voluptas ipsa.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vel + quas laborum saepe amet consequatur magnam aperiam libero voluptas + ipsa. +

Read More
-
- - - - + + +
+

Latest Project

+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+
+ 1 +
+

Web Design

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Culpa, + voluptates? +

+ +
+
+ +
+