Pirate Web | Snippets that build the web.

Snippets that build the web.

Snippet Information

Title: App Features and Benefits Section

Description: A section that can be used for showing app features and benefits. Simple HTML/CSS layout that can be easily expanded or shrunk down.

Tags: html, css, features, benefits

Author: danc0

View Demo

Snippet Body

View HTML expand_more

Copy Code

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Features</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <main>
        <section class="feature-list">
            <h2>Features</h2>
            <h3>Improve your workflow</h3>
            <p>
                Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in
                accusamus quisquam.
            </p>
            <div class="grid">
                <section class="grid-item">
                    <div class="icon">
                        <span class="material-icons">
                            bolt
                        </span>
                    </div>
                    <div class="body">
                        <h4>Faster Performace</h4>
                        <p>
                            Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate
                            veritatis in accusamus quisquam.
                        </p>
                    </div>
                </section>
                <section class="grid-item">
                    <div class="icon">
                        <span class="material-icons">
                            face
                        </span>
                    </div>
                    <div class="body">
                        <h4>User Friendly</h4>
                        <p>
                            Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate
                            veritatis in accusamus quisquam.
                        </p>
                    </div>
                </section>
                <section class="grid-item">
                    <div class="icon">
                        <span class="material-icons">
                            savings
                        </span>
                    </div>
                    <div class="body">
                        <h4>Affordable</h4>
                        <p>
                            Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate
                            veritatis in accusamus quisquam.
                        </p>
                    </div>
                </section>
                <section class="grid-item">
                    <div class="icon">
                        <span class="material-icons">
                            cloud
                        </span>
                    </div>
                    <div class="body">
                        <h4>Cloud Based</h4>
                        <p>
                            Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate
                            veritatis in accusamus quisquam.
                        </p>
                    </div>
                </section>
            </div>
        </section>
    </main>
</body>

</html>

View CSS expand_more

Copy Code

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700;900&display=swap');

body{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size:12pt;
    color:#222121;
    box-sizing: border-box;
}

.feature-list{
    margin: 20px auto;
    width: 90%;
    text-align:center;
}

.feature-list h2{
    text-transform: uppercase;
    font-size:1rem;
    font-weight:700;
    color:#14ad94;
}

.feature-list h3{
    font-size:2.5rem;
    font-weight:900;
    line-height: 2rem;
    margin-top:0;

}

.feature-list p {
    font-size:1.3rem;
    width:60%;
    margin:10px auto;
}

.feature-list .grid{
    width:90%;
    margin:30px auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    padding:20px;
    grid-column-gap:75px;
}

.feature-list .grid h4 {
    font-size:1.5rem;
    color:#14ad94;
    margin: 0;
}

.feature-list .grid .grid-item p {
    margin:20px 0;
    width:100%;
}

.feature-list .grid .grid-item {
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.feature-list .grid .grid-item .icon {
    width:10%; 
    flex-grow: 0;
    padding:0 20px;
}

.feature-list .grid .grid-item .icon .material-icons {
    font-size:3rem;
    color:#14ad94;
}

@media screen and (max-width:850px) {
    .feature-list .grid {
        grid-template-columns: 1fr;
        width:98%;
    }
    .feature-list p {
        font-size:1.3rem;
        width:90%;
        margin:10px auto;
    }
}

@media screen and (max-width:530px) {
    .feature-list .grid .grid-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .feature-list .grid .grid-item .icon {
        width:100%;
    }
}