İlginizi Çekebilir
  1. Ana Sayfa
  2. CSS
  3. Html ve Css Kullanarak Hizmetlerimiz Nasıl Yapılır?

Html ve Css Kullanarak Hizmetlerimiz Nasıl Yapılır?

hizmetler
Reklam alanı 2

Merhaba,

Bu yazımda hizmetlerimiz bölümü için kullanabilceğimiz html&Css kullanarak hazırlanmış olan bir örnek hazırladım.

Yapımcının youtube kanalındanda izleyebilirsiniz. : https://www.youtube.com/watch?v=BHTHmAQTpVo&t=292s

Önerilen Yazı
HTML ve CSS ile Web Sayfası Oluşturma

Animasyon kullanmak istemiyorsanız

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> 

satırını silebilirsiniz.

HTML kodları :


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
    <div class="box-area">

        <div class="single-box animate__wobble animate__animated">
            <div class="img-area" style="background-image: url('resimyolu')"></div>
            <span class="header-text"><strong>Web Tasarım</strong></span>
                <div class="img-text">
            
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quidem accusamus in odio nobis excepturi, neque qui pariatur voluptatibus nemo fuga praesentium reprehenderit laboriosam iusto recusandae non omnis eligendi! Officia!</p>
               
                </div>
        </div>

        <div class="single-box animate__wobble animate__animated">
            <div class="img-area" style="background-image: url('resimyolu')"></div>
            <span class="header-text"><strong>Grafik Tasarım</strong></span>

                <div class="img-text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quidem accusamus in odio nobis excepturi, neque qui pariatur voluptatibus nemo fuga praesentium reprehenderit laboriosam iusto recusandae non omnis eligendi! Officia!</p>
               
                </div>
        </div>

        <div class="single-box animate__wobble animate__animated">
            <div class="img-area" style="background-image: url('resimyolu')"></div>
            <span class="header-text"><strong>Yazılım</strong></span>
                <div class="img-text">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea quidem accusamus in odio nobis excepturi, neque qui pariatur voluptatibus nemo fuga praesentium reprehenderit laboriosam iusto recusandae non omnis eligendi! Officia!</p>
               
                </div>
        </div>

    </div>
</body>
</html>

CSS Kodları :


body {
    background:#262626;
}
.box-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.single-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: auto;
    background-color:#fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    text-align: center;
    margin: 20px;
    padding: 20px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
.img-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width:80px;
    height: 80px;
    border: 6px solid #ddd;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-bottom: 10px;
    padding: 10px;
    background-size: cover;
    background-position: center center;

}


.header-text {
    font-size: 24px;
    font-weight: normal;
    line-height: 48px;
}

.img-text {
    padding-top: 10px;

}

.img-text p{
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
}

.single-box:nth-child(1):hover {
    background: #e84393;
    color:#fff;
}
.single-box:nth-child(2):hover {
    background: #2769ff;
    color:#fff;
}
.single-box:nth-child(3):hover {
    background: #60a713;
    color:#fff;
}

.img-area:hover {
   display: none;
}


See the Pen Hizmetlerimiz by Serhat PEHLİVAN (@serhatpehlivan) on CodePen.1

Reklam alanı 4
Yorum Yap

Yorum Yap