#2 Service Design – Bootstrap 4

file index.html

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

<head>
    <title>Title</title>
    <!-- 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
</head>

<body>
    <section id="services">
        <div class="container-fluid">
            <div class="row pt-5">
                <div class="col-md-12 text-center">
                    <h1 class="section-heading">Our Service</h1>
                </div>
            </div>
            <div class="row text-center pt-5 pb-5 justify-content-center">
                <div class="col-md-3 pb-1">
                    <h3 class="service-heading"><i class="fas fa-code"></i> Tutorials</h3>
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit numquam veniam
                        molestias.</p>
                </div>
                <div class="col-md-3 pb-1">
                    <h3 class="service-heading"><i class="fas fa-desktop"></i> Templates</h3>
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit numquam veniam
                        molestias.</p>
                </div>
                <div class="col-md-3 pb-1">
                    <h3 class="service-heading"><i class="fas fa-shopping-cart"></i> Products</h3>
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit numquam veniam
                        molestias.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

file style.css

body {
    background-color: #058789;
    color: #fdfdfd;
}

.container-fluid {
    margin-top: 100px;
    background-color: #d85e32;
}

.section-heading {
    font-family: 'Bungee Shade', cursive;
    font-size: 60px;
}
service design with bootstrap 4
service design menggunakan booststrap 4

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *