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 konularda eksikleriniz varsa aşağıdaki linklerden ilgili yazılarımı inceleyebilirsiniz.
Bu tasarımda Bootstrap 4.5.2‘i CDN olarak kullanacağım.
|
1 2 3 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
Gerekli ikonlar için ise Font Awesome 5.15.1‘i CDN olarak kullanacağım.
|
1 2 3 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> |
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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Font Awesome CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" /> <title>Servisler</title> </head> <body> <!-- Services --> <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> |
Umarım “Bootstrap 4 ile Servisler Tasarımı Yapımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?
Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma
Yeni bir yazımda görüşmek üzere.
