Skip to content

Commit 8d1cf17

Browse files
projects section done
1 parent 2f1c07d commit 8d1cf17

File tree

5 files changed

+72
-8
lines changed

5 files changed

+72
-8
lines changed

design 3/images/project1.jpg

877 KB
Loading

design 3/images/project2.jpg

207 KB
Loading

design 3/images/project3.jpg

2.47 MB
Loading

design 3/index.html

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,14 @@ <h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
7979
<!-- services -->
8080

8181
<section>
82-
<h2 class="services-header">services</h2>
82+
<h2 class="services-header">SERVICES</h2>
8383
<div class="services">
8484
<div>
8585
<i class="fa-solid fa-mobile-button"></i>
8686
<h3>Mobile App Development</h3>
8787
<p>
8888
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
89-
modi, numquam cupiditate quidem veritatis repellat
89+
modi, numquam cupiditate quidem veritatis repellat
9090
</p>
9191
<a href="#"><button>Learn More ></button></a>
9292
</div>
@@ -95,17 +95,17 @@ <h3>Mobile App Development</h3>
9595
<h3>React Development</h3>
9696
<p>
9797
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
98-
modi, numquam nesciunt ea
99-
quibusdam reprehenderit nam?
98+
modi, numquam nesciunt ea quibusdam reprehenderit nam?
10099
</p>
101100
<a href="#"><button>Learn More ></button></a>
102101
</div>
103102
<div>
104103
<i class="fa-brands fa-wordpress"></i>
105104
<h3>Wordpress Development</h3>
106105
<p>
107-
Lorem ipsum dolor sit amet consectetur adipisicing elit. cupiditate quidem veritatis repellat nesciunt ea
108-
quibusdam reprehenderit nam?
106+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
107+
cupiditate quidem veritatis repellat nesciunt ea quibusdam
108+
reprehenderit nam?
109109
</p>
110110
<a href="#"><button>Learn More ></button></a>
111111
</div>
@@ -115,8 +115,7 @@ <h3>Wordpress Development</h3>
115115
<h3>Android Development</h3>
116116
<p>
117117
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
118-
modi, numquam cupiditate ea
119-
quibusdam reprehenderit nam?
118+
modi, numquam cupiditate ea quibusdam reprehenderit nam?
120119
</p>
121120
<a href="#"><button>Learn More ></button></a>
122121
</div>
@@ -141,6 +140,43 @@ <h3>SEO Services</h3>
141140
</div>
142141
</div>
143142
</section>
143+
144+
<!-- projects -->
145+
146+
<section>
147+
<h2 class="projects-text">PROJECTS</h2>
148+
<div class="projects">
149+
<div>
150+
<img src="images/project1.jpg" alt="" />
151+
<h3>Portfolio Websites</h3>
152+
<p>
153+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
154+
Provident, minus. Quam officiis fuga ratione qui assumenda,
155+
quibusdam distinctio Quas!
156+
</p>
157+
</div>
158+
<div>
159+
<img src="images/project2.jpg" alt="" />
160+
<h3>company website</h3>
161+
<p>
162+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
163+
Provident, minus. Quam officiis fuga ratione qui assumenda,
164+
quibusdam distinctio Quas!
165+
</p>
166+
</div>
167+
<div>
168+
<img src="images/project3.jpg" alt="" />
169+
<h3>Ticket booking</h3>
170+
<p>
171+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
172+
Provident, minus. Quam officiis fuga ratione qui assumenda,
173+
quibusdam distinctio Quas!
174+
</p>
175+
</div>
176+
</div>
177+
</section>
178+
179+
144180
</main>
145181
</body>
146182
</html>

design 3/styles.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,3 +183,31 @@ section .services-header{
183183
cursor: pointer;
184184
transition: 0.2s;
185185
}
186+
187+
/* projects */
188+
189+
section .projects-text{
190+
height: 100px;
191+
line-height: 200px;
192+
text-align: center;
193+
}
194+
section .projects{
195+
display: flex;
196+
justify-content: center;
197+
align-items: center;
198+
height: calc(100vh - 100px);
199+
color: rgb(73, 73, 73);
200+
}
201+
section .projects div{
202+
width: 300px;
203+
height: 500px;
204+
text-align: center;
205+
margin-left: 50px;
206+
padding: 50px 0;
207+
}
208+
section .projects img{
209+
width: 200px;
210+
height: 200px;
211+
border-radius: 50%;
212+
margin-bottom: 20px;
213+
}

0 commit comments

Comments
 (0)