BOOTSTRAP 4 İLE SERVİSLER TASARIMI YAPIMI

Fauda · 6 Ara 2021

BOOTSTRAP 4 İLE SERVİSLER TASARIMI YAPIMI !

Bu yazımda Css3 ile birlikte gelen transform ve transition özelliklerini kullanarak kurumsal web sitelerinde sıkça karşımıza çıkan servisler alanının tasarımını responsive olarak yapacağız.

Tasarımımızın son hali şu şekilde olacak.

Kodlarımızı yazarken Css3 özelliklerinden transform ve transition özelliklerini kullanıyoruz.

Bu tasarımda Bootstrap 4.5.2‘i CDN olarak kullanacağım.

1
2
3

Gerekli ikonlar için ise Font Awesome 5.15.1‘i CDN olarak kullanacağım.

1
2
3

Artık kodlarımızı yazmaya başlayalım.!

Html Kodları

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!doctype html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel="stylesheet" href="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
">


<link rel="stylesheet" href="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
" />

<title>Servisler</title>
</head>

<body>


<div id="services" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>OUR BEST SERVICES</h2>
<div class="seperator">
<hr class="left-line">
<i class="fas fa-anchor"></i>
<hr class="right-line">
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="row">

<div class="col-md-4 service">
<div class="service-icon">
<i class="fas fa-palette"></i>
</div>
<h3>DESIGN</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati ratione unde ea vero eum quae maiores
corrupti, omnis, ipsum a eaque molestias et iste magni itaque. Ipsum pariatur reprehenderit excepturi!</p>
</div>

<div class="col-md-4 service">
<div class="service-icon">
<i class="fas fa-tools"></i>
</div>
<h3>RENOVATION</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique unde corporis eligendi? Minus at odit
asperiores voluptatem amet voluptas, non necessitatibus obcaecati cupiditate dolor ad esse quibusdam
officiis corporis incidunt.</p>
</div>

<div class="col-md-4 service">
<div class="service-icon">
<i class="fas fa-headset"></i>
</div>
<h3>SUPPORT</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui aperiam rerum molestiae facere accusamus
tempora vel eaque. Nihil omnis voluptas fugit, labore similique, excepturi eum, beatae sapiente minima
ratione eos!</p>
</div>
</div>
</div>
</div>

</body>

</html>

Css Kodları

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<style>

#services h2 {
color: #00a7ff;
font-size: 35px;
}
#services .seperator {
position: relative;
margin-bottom: 8px;
}
#services .seperator i {
color: #00a7ff;
}
#services .seperator .left-line {
position: absolute;
width: 60px;
height: 1px;
right: 50%;
transform: translateX(-50%);
top: -5px;
}
#services .seperator .right-line {
position: absolute;
width: 60px;
height: 1px;
left: 50%;
transform: translateX(50%);
top: -5px;
}
#services p {
color: #6e6e6e;
font-size: 15px;
}
#services .service h3 {
font-size: 18px;
color: #303133;
margin-bottom: 12px;
}
#services .service p {
color: #6e6e6e;
font-size: 15px;
line-height: 25px;
}
#services .service .service-icon {
width: 70px;
height: 70px;
border: 1px solid #00a7ff;
transform: rotate(45deg);
margin: 40px auto;
transition: all 0.5s ease-in-out;
}
#services .service .service-icon:hover {
cursor: pointer;
background-color: #00a7ff;
}
#services .service .service-icon:hover i {
color: #ffffff;
}
#services .service .service-icon i {
color: #00a7ff;
font-size: 27px;
transform: rotate(-45deg);
line-height: 70px;
text-align: center;

</style>

MamiVEVO · 6 Ara 2021

Paylaşım için teşekkürler.

Fauda · 6 Ara 2021

MamiVEVO' Alıntı:
Paylaşım için teşekkürler.

Rıca ederim.

ByESiNTi · 6 Ara 2021

Paylaşım için teşekkürler.

Fauda · 6 Ara 2021

Rıca ederim.

BOOTSTRAP 4 İLE SERVİSLER TASARIMI YAPIMI

Fauda

Level 8