Skip to content

Commit 2f1c07d

Browse files
alirezatayebinejadalirezatayebinejad
committed
services section completed
1 parent 19cd1b4 commit 2f1c07d

File tree

2 files changed

+159
-39
lines changed

2 files changed

+159
-39
lines changed

‎design 3/index.html‎

Lines changed: 108 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -28,50 +28,119 @@ <h1>VIBRACODE</h1>
2828
</div>
2929
</header>
3030

31-
<!-- showcase -->
31+
<main>
32+
<!-- showcase -->
3233

33-
<section class="showcase">
34-
<div class="showcase-content">
35-
<h2>Building Websites and Mobile Apps For Boosting Your Business</h2>
36-
<p>
37-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
38-
placeat, velit fugiat tenetur eveniet
39-
</p>
40-
<button>EXPLORE</button>
41-
</div>
42-
</section>
34+
<section class="showcase">
35+
<div class="showcase-content">
36+
<h2>Building Websites and Mobile Apps For Boosting Your Business</h2>
37+
<p>
38+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
39+
placeat, velit fugiat tenetur eveniet
40+
</p>
41+
<button>EXPLORE</button>
42+
</div>
43+
</section>
4344

44-
<!-- about -->
45+
<!-- about -->
4546

46-
<section class="about">
47-
<h2 class="about-text">ABOUT US</h2>
48-
<div class="about-content">
49-
<div class="picture">
50-
<img src="images/about.jpg" alt="" />
47+
<section class="about">
48+
<h2 class="about-text">ABOUT US</h2>
49+
<div class="about-content">
50+
<div class="picture">
51+
<img src="images/about.jpg" alt="" />
52+
</div>
53+
<div class="about-right">
54+
<h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
55+
<hr />
56+
<p>
57+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
58+
temporibus nisi accusamus deleniti deserunt repellat rerum
59+
provident tenetur illo blanditiis tempora cumque qui eligendi
60+
minus, inventore minima maxime eaque ea! Lorem ipsum dolor sit
61+
amet consectetur adipisicing elit. Suscipit itaque deleniti
62+
perspiciatis
63+
</p>
64+
<ul>
65+
<li>providing you solutions for all your software needs</li>
66+
<li>mobile apps development</li>
67+
<li>wordpress development made easy</li>
68+
</ul>
69+
<div class="socials">
70+
<a href=""> <i class="fa-brands fa-instagram"></i></a>
71+
<a href=""><i class="fa-brands fa-facebook"></i></a>
72+
<a href=""><i class="fa-brands fa-twitter"></i></a>
73+
<a href=""><i class="fa-brands fa-youtube"></i></a>
74+
</div>
75+
</div>
5176
</div>
52-
<div class="about-right">
53-
<h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
54-
<hr />
55-
<p>
56-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
57-
temporibus nisi accusamus deleniti deserunt repellat rerum provident
58-
tenetur illo blanditiis tempora cumque qui eligendi minus, inventore
59-
minima maxime eaque ea! Lorem ipsum dolor sit amet consectetur
60-
adipisicing elit. Suscipit itaque deleniti perspiciatis
61-
</p>
62-
<ul>
63-
<li>providing you solutions for all your software needs</li>
64-
<li>mobile apps development</li>
65-
<li>wordpress development made easy</li>
66-
</ul>
67-
<div class="socials">
68-
<a href=""> <i class="fa-brands fa-instagram"></i></a>
69-
<a href=""><i class="fa-brands fa-facebook"></i></a>
70-
<a href=""><i class="fa-brands fa-twitter"></i></a>
71-
<a href=""><i class="fa-brands fa-youtube"></i></a>
77+
</section>
78+
79+
<!-- services -->
80+
81+
<section>
82+
<h2 class="services-header">services</h2>
83+
<div class="services">
84+
<div>
85+
<i class="fa-solid fa-mobile-button"></i>
86+
<h3>Mobile App Development</h3>
87+
<p>
88+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
89+
modi, numquam cupiditate quidem veritatis repellat
90+
</p>
91+
<a href="#"><button>Learn More ></button></a>
92+
</div>
93+
<div>
94+
<i class="fa-brands fa-react"></i>
95+
<h3>React Development</h3>
96+
<p>
97+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
98+
modi, numquam nesciunt ea
99+
quibusdam reprehenderit nam?
100+
</p>
101+
<a href="#"><button>Learn More ></button></a>
102+
</div>
103+
<div>
104+
<i class="fa-brands fa-wordpress"></i>
105+
<h3>Wordpress Development</h3>
106+
<p>
107+
Lorem ipsum dolor sit amet consectetur adipisicing elit. cupiditate quidem veritatis repellat nesciunt ea
108+
quibusdam reprehenderit nam?
109+
</p>
110+
<a href="#"><button>Learn More ></button></a>
111+
</div>
112+
113+
<div>
114+
<i class="fa-brands fa-android"></i>
115+
<h3>Android Development</h3>
116+
<p>
117+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
118+
modi, numquam cupiditate ea
119+
quibusdam reprehenderit nam?
120+
</p>
121+
<a href="#"><button>Learn More ></button></a>
122+
</div>
123+
<div>
124+
<i class="fa-brands fa-apple"></i>
125+
<h3>Iphone App Development</h3>
126+
<p>
127+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
128+
modi, numquam cupiditate
129+
</p>
130+
<a href="#"><button>Learn More ></button></a>
131+
</div>
132+
<div>
133+
<i class="fa-solid fa-magnifying-glass"></i>
134+
<h3>SEO Services</h3>
135+
<p>
136+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
137+
modi, numquam cupiditate quidem veritatis repellat nesciunt ea
138+
quibusdam reprehenderit nam?
139+
</p>
140+
<a href="#"><button>Learn More ></button></a>
72141
</div>
73142
</div>
74-
</div>
75-
</section>
143+
</section>
144+
</main>
76145
</body>
77146
</html>

‎design 3/styles.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,54 @@ button {
132132
border: none;
133133
width: 30%;
134134
}
135+
136+
/* services */
137+
138+
section .services-header{
139+
text-align: center;
140+
height: 100px;
141+
line-height: 100px;
142+
}
143+
.services {
144+
display: flex;
145+
width: 80%;
146+
height: calc(100vh - 100px);
147+
flex-flow: wrap;
148+
justify-content: center;
149+
align-items: center;
150+
margin: auto;
151+
}
152+
.services div {
153+
text-align: center;
154+
width: 270px;
155+
height: 270px;
156+
font-size: 12px;
157+
margin: 0 0 12px 40px;
158+
padding: 10px;
159+
position: relative;
160+
border-radius: 5px;
161+
box-shadow: 0px 0px 5px rgb(223, 223, 223);
162+
}
163+
.services div:hover{
164+
box-shadow: 0px 0px 10px rgb(212, 212, 212);
165+
transition: 0.3s;
166+
}
167+
.services div i {
168+
color: #d11414;
169+
font-size: 40px;
170+
}
171+
.services div button {
172+
background-color: transparent;
173+
border: 1px solid rgb(156, 156, 156);
174+
padding: 5px;
175+
position: absolute;
176+
bottom: 0;
177+
left: 27%;
178+
}
179+
.services div button:hover {
180+
background-color: #d11414;
181+
color: white;
182+
border-color: #d11414;
183+
cursor: pointer;
184+
transition: 0.2s;
185+
}

0 commit comments

Comments
 (0)