Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
    <div class="wrapper">
        <header class="header">
            <a href="#" class="btn-appointment">Make an appointment</a>
            <div class="profile">
                <div class="image">
                    <img src="https://i.pravatar.cc/150?img=26" />
                    <div class="notification"></div>
                </div>

                <select>
                    <option value="Maria waters">Maria Waters</option>
                </select>
            </div>
        </header>
        <aside class="aside">
            <ul>
                <li class="logo hide">
                    <a href="#"><img src="https://ozcanzaferayan.github.io/healthcare-dashboard/img/logo.png" alt="logo" width="25"></a>
                </li>
                <li class="active"><a href="#"><i class="fas fa-columns"></i></a></li>
                <li><a href="#"><i class="fa fa-folder" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fas fa-chart-area    "></i></a></li>
                <li><a href="#"><i class="fas fa-pills    "></i></a></li>
                <li class="hide"><a href="#"><i class="fas fa-calendar-check    "></i></a></li>
                <li class="hide"><a href="#"><i class="fas fa-file-invoice-dollar    "></i></a></li>
                <li class="hide"><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i>
                    <!-- <span class="count">8</span> -->
                </a></li>
            </ul>
        </aside>
        <main class="main">
            <div class="top">
                <div class="upcoming-appointments card">
                    <div class="card-header">
                        <h1>Upcoming appointments</h1>
                        <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                    </div>
                    <div class="card-body">
                        <div class="appointment">
                            <img class="image" src="https://i.pravatar.cc/150?img=45" />
                            <span class="name">dr Anthony Wagner</span>
                            <span class="title">dermatologist</span>
                            <span class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 22/07/2018</span>
                            <span class="time"><i class="fas fa-clock"></i> 2:30 PM</span>
                            <a href="#" class="check"><i class="far fa-check-circle" aria-hidden="true"></i></a>
                            <a href="#" class="times"><i class="far fa-times-circle" aria-hidden="true"></i></a>
                        </div>
                        <div class="appointment">
                            <img class="image gray" src="https://i.pravatar.cc/150?img=1" />
                            <span class="name">dr Caroline Fields</span>
                            <span class="title">psycologist</span>
                            <span class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 22/07/2018</span>
                            <span class="time"><i class="fas fa-clock"></i> 2:30 PM</span>
                            <a href="#" class="check"><i class="fas fa-check-circle" aria-hidden="true"></i></a>
                            <a href="#" class="times"><i class="far fa-times-circle" aria-hidden="true"></i></a>
                        </div>
                        <div class="appointment">
                            <img class="image red" src="https://i.pravatar.cc/150?img=30" />
                            <span class="name">dr Natalie Smith</span>
                            <span class="title">dentist</span>
                            <span class="date"><i class="fa fa-calendar" aria-hidden="true"></i> 22/07/2018</span>
                            <span class="time"><i class="fas fa-clock"></i> 2:30 PM</span>
                            <a href="#" class="check"><i class="far fa-check-circle" aria-hidden="true"></i></a>
                            <a href="#" class="times"><i class="far fa-times-circle" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
                <div class="recent-results card">
                    <div class="card-header">
                        <div class="header-container">
                            <h1>Recent results </h1>
                            <span>Glucose</span>
                        </div>
                        <select>
                            <option value="May 2018">May 2018</option>
                        </select>
                        <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                    </div>

                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="recentResultsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="news card">
                    <div class="card-header">
                        <h1>News</h1>
                        <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                    </div>
                    <div class="card-body">
                        <ul class="news-list">
                            <li>
                                <a href="#" class="news">
                                    <span class="title">10% off for dermatlogist conslutation</span>
                                    <span class="subtitle">Save money for first visit</span>
                                    <i class="fas fa-caret-right"></i>
                                    <hr>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="news">
                                    <span class="title">Free visit to the cardiologist on May 2-6</span>
                                    <span class="subtitle">Take care Of your health, do medical examination</span>
                                    <i class="fas fa-caret-right"></i>
                                    <hr>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="news">
                                    <span class="title">50% discount on allergy tests</span>
                                    <span class="subtitle"> Spring is coming, take control Of allergy</span>
                                    <i class="fas fa-caret-right"></i>
                                    <hr>
                                </a>
                            </li>
                            <li class="more"><a href="#">More...</a></li>
                        </ul>

                    </div>
                </div>
                <div class="current-prescription-container">
                    <div class="current-prescription card">
                        <div class="card-header">
                            <h1>Current prescription </h1>
                            <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                        </div>
                        <ul>
                            <li>
                                <a href="#" class="prescription-item">
                                    <div class="dot gray"></div>
                                    <span class="title">Vitamin D</span>
                                    <span class="description">5mg - 2x per day</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="prescription-item">
                                    <div class="dot violet"></div>
                                    <span class="title">Cetirizine</span>
                                    <span class="description">10mg - once per day at the morning</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="card alert">
                        <div class="card-header">
                            <h1>Alert</h1>
                            <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                        </div>
                        <span>Air pollution: <b>230%</b> of norm</span>
                    </div>
                </div>
                <div class="notifications card">
                    <div class="card-header">
                        <h1>Notifications </h1>
                        <a href="#"><i class="fa fa-ellipsis-h right" aria-hidden="true"></i></a>
                    </div>
                    <div class="card-body">
                        <ul>
                            <li>
                                <a href="#" class="notification">
                                    <div class="dot green"></div>
                                    <span class="title">You confirmed visit to dermatologist</span>
                                    <span class="date">2 days ago</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="notification">
                                    <div class="dot green"></div>
                                    <span class="title">Your results are available to download</span>
                                    <span class="date">3 days ago</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="notification">
                                    <div class="dot green"></div>
                                    <span class="title">Dr. John Smith cancelled your visit</span>
                                    <span class="date">3 days ago</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="notification">
                                    <div class="dot green"></div>
                                    <span class="title">Dr. Ann Doe changed date of your visit</span>
                                    <span class="date">3 days ago</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="notification">
                                    <div class="dot green"></div>
                                    <span class="title">You changed date of appointment</span>
                                    <span class="date">5 days ago</span>
                                </a>
                            </li>
                            <li class="more"><a href="#">More...</a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="./js/main.js"></script>
              
            
!

CSS

              
                $font-stack: 'Open Sans',
Helvetica,
sans-serif;
//Media
$media-phone: 400px;
// Sizes
$spacing-xxxl: 3rem;
$spacing-xxl: 2.5rem;
$spacing-xl: 2rem;
$spacing-l: 1.5rem;
$spacing: 1rem;
$spacing-xs: .75rem;
$spacing-xxs: .5rem;
$spacing-xxxs: .3rem;
$spacing-xxxxs: .1rem;
// Fonts
$font-xxxl:2.5rem;
$font-xxl:2rem;
$font-xl:1.5rem;
$font-l:1.25rem;
$font: 1rem;
$font-s: .9rem;
$font-xs: .8rem;
$font-xxs: .75rem;
$font-xxxs: .7rem;
// Colors
$bg: #fcfdfd;
$bg-100: #edf1fb;
$bg-200: #26254f;
$primary: #7e7fe8;
$text: #0c0a3d;
$text-1: #fff;
$text-2: #9594ae;
$success: #16c08f;
$danger: #ff7d7d;
$info: #758dff;
$gray: #bbbbca;
// Styles
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 12px;
}

body {
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    font-family: $font-stack;
    color: $text;
}

input {
    font-family: $font-stack;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

textarea:focus,
input:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: $gray;
}

.wrapper {
    display: grid;
    height: 100vh;
    grid-template-rows: 7.5rem 1fr;
    grid-template-columns: 6.5rem 1fr;
    grid-template-areas: "aside header" "aside main";
    flex-wrap: wrap;
    @media screen and (max-width: $media-phone) {
        grid-template-columns: initial;
        grid-template-rows: initial;
    }
    // >* {
    //     border: 1px solid #000;
    // }
}

.header {
    grid-area: header;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    padding: $spacing $spacing-xxxl;
    @media screen and (max-width: $media-phone) {
        gap: $spacing-xs;
        padding: $spacing-xs;
    }
    .btn-appointment {
        padding: $spacing $spacing-l;
        border-radius: $spacing-xxs;
        height: fit-content;
        color: $text-1;
        background: rgb(147, 149, 237);
        background: linear-gradient(90deg, rgba(147, 149, 237, 1) 0%, #6c6de3 100%);
        font-weight: 600;
    }
    .profile {
        justify-self: end;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: $spacing;
        .image {
            justify-self: end;
            img {
                $size: 4rem;
                width: $size;
                height: $size;
                border-radius: $size;
                @media screen and (max-width: $media-phone) {
                    $size: 3rem;
                }
            }
            .notification {
                $size: 1.25rem;
                position: absolute;
                width: $size;
                height: $size;
                margin-top: -1.7rem;
                margin-left: 3rem;
                background-color: $danger;
                border-radius: $size;
                box-shadow: 0px 0px 10px 0px rgba(255, 125, 125, 1);
                @media screen and (max-width: $media-phone) {
                    $size: .9rem;
                    margin-top: -1.5rem;
                    margin-left: 2.3rem;
                }
            }
        }
        select {
            height: fit-content;
            border: none;
            background: none;
            font-size: $font;
            font-weight: 600;
            font-family: $font-stack;
        }
    }
}

.aside {
    grid-area: aside;
    display: grid;
    gap: $spacing-l;
    padding: $spacing;
    justify-content: center;
    font-size: $font-xl;
    color: $gray;
    background-color: $bg;
    @media screen and (max-width: $media-phone) {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #f1f1f1;
        justify-content: initial;
    }
    ul {
        display: grid;
        grid-template-rows: repeat(8, min-content);
        gap: 3rem;
        margin-top: $spacing-xs;
        @media screen and (max-width: $media-phone) {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: none;
            margin-top: 0;
            .hide,
            .logo.hide {
                display: none;
            }
        }
        li {
            display: grid;
            place-items: center;
            padding: $spacing-xxs $spacing-xs;
            &.active {
                background-color: $text-1;
                -webkit-box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, .5);
                -moz-box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, .5);
                box-shadow: 0px 0px 33px -10px rgba(126, 127, 232, .5);
                border-radius: $spacing-xs;
                a {
                    color: $primary;
                }
            }
            &.logo {
                img {
                    width: 3rem;
                }
                a {
                    color: $text-1;
                    text-align: center;
                    font-size: $font-l;
                }
            }
        }
    }
}

.main {
    padding: $spacing-xxxl;
    grid-area: main;
    background-color: $bg-100;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: $spacing-xl;
    @media screen and (max-width: 1148px) {
        grid-template-rows: initial;
    }
    @media screen and (max-width: $media-phone) {
        padding: $spacing 0 6rem 0;
        gap: $spacing;
    }
    .top {
        display: grid;
        grid-template-columns: 5fr 8fr;
        gap: $spacing-xl;
        @media screen and (max-width: 1148px) {
            grid-template-columns: initial;
        }
        @media screen and (max-width: $media-phone) {
            gap: $spacing;
        }
    }
    .bottom {
        display: grid;
        gap: $spacing-xl;
        grid-template-columns: 4.2fr 3.8fr 5.2fr;
        @media screen and (max-width: 1148px) {
            grid-template-columns: initial;
        }
        @media screen and (max-width: $media-phone) {
            gap: $spacing;
        }
    }
    .card {
        background-color: $text-1;
        border-radius: $spacing-xxxs;
        padding: $spacing-xl;
        .card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: $spacing-l;
            .right {
                color: $gray;
            }
            h1 {
                display: inline-block;
                margin: 0;
                font-size: $font-l;
            }
            .header-container {
                display: grid;
                grid-template-columns: max-content max-content;
                gap: $spacing;
                align-items: end;
                span {
                    color: $gray;
                    position: absolute;
                    margin-left: 9rem;
                    margin-top: .3rem;
                }
            }
            select {
                height: fit-content;
                border: none;
                background: none;
                font-size: $font;
                font-weight: 600;
                font-family: $font-stack;
            }
        }
        .card-body {
            display: grid;
            gap: $spacing-xl;
        }
        .appointment {
            display: grid;
            grid-template-columns: min-content max-content 1fr min-content min-content;
            grid-template-rows: repeat(3, min-content);
            grid-template-areas: "profile name name check times" "profile title title check times" "profile date time check times";
            column-gap: $spacing-l;
            row-gap: 0;
            .image {
                grid-area: profile;
                width: 4rem;
                height: 4rem;
                border-radius: 4rem;
                box-shadow: 5px 5px 22px 0px rgba(116, 204, 214, .5);
                &.gray {
                    box-shadow: 5px 5px 22px 0px rgba(199, 197, 210, 1);
                }
                &.red {
                    box-shadow: 5px 5px 22px 0px rgba(193, 68, 84, .5);
                }
            }
            .name {
                grid-area: name;
                font-weight: 600;
            }
            .title {
                grid-area: title;
                font-size: $font-xs;
                color: #9695af;
            }
            .date {
                grid-area: date;
                font-size: $font-xs;
                i {
                    color: $info;
                }
            }
            .time {
                grid-area: time;
                font-size: $font-xs;
                i {
                    color: $info;
                }
            }
            .check {
                grid-area: check;
                font-size: $font-xxl;
                align-self: center;
                color: $info;
            }
            .times {
                grid-area: times;
                font-size: $font-xxl;
                align-self: center;
                color: $danger;
            }
        }
        .chart-container {
            height: 17rem;
            @media screen and (max-width: 650px) {
                height: 10rem;
            }
        }
        .news-list {
            .news {
                display: grid;
                grid-template-columns: 1fr min-content;
                grid-template-areas: "title arrow" "subtitle arrow";
                gap: $spacing-xxs;
                .title {
                    grid-area: title;
                    font-weight: 700;
                    color: $text;
                }
                .subtitle {
                    grid-area: subtitle;
                    color: $text-2
                }
                .fa-caret-right {
                    grid-area: arrow;
                    align-self: center;
                }
                hr {
                    width: 100%;
                    border: none;
                    background-color: $gray;
                    height: 1px;
                }
            }
            .more {
                text-align: center;
                a {
                    color: $primary;
                    font-weight: bold;
                }
            }
        }
    }
    .card.alert {
        background: linear-gradient(90deg, rgba(147, 149, 237, 1) 0%, #6c6de3 100%);
        color: $text-1;
    }
    .current-prescription-container {
        display: grid;
        grid-template-rows: 1fr max-content;
        gap: $spacing-xl;
        ul {
            display: grid;
            row-gap: $spacing-xs;
        }
    }
}

.prescription-item {
    display: grid;
    grid-template-areas: "dot title" "dot description";
    grid-template-columns: min-content 1fr;
    column-gap: $spacing-l;
    .dot {
        $size: 1.5rem;
        grid-area: dot;
        width: $size;
        height: $size;
        border-radius: $size;
        align-self: center;
    }
    .dot.gray {
        background-color: #bccbf5;
        box-shadow: 2px 2px 10px 0px #bccbf5;
    }
    .dot.violet {
        background-color: $primary;
        box-shadow: 2px 2px 10px 0px $primary;
    }
    .title {
        grid-area: title;
        color: $text;
        font-weight: 800;
    }
    .description {
        grid-area: description;
    }
}

.notifications ul {
    display: grid;
    gap: $spacing-l;
}

.notifications {
    .more {
        text-align: center;
        a {
            color: $primary;
            font-weight: 600;
        }
    }
    .notification {
        display: grid;
        grid-template-areas: "dot title date";
        grid-template-columns: min-content 1fr max-content;
        align-items: center;
        gap: $spacing;
        .dot {
            grid-area: dot;
            $size: $spacing-xs;
            width: $size;
            height: $size;
            border-radius: $size;
            &.green {
                background-color: $success;
            }
            &.red {
                background-color: $danger;
            }
            &.blue {
                background-color: $primary;
            }
        }
        .title {
            grid-area: title;
            color: $text;
            font-weight: 600;
        }
        .date {
            grid-area: date;
        }
    }
}
              
            
!

JS

              
                // JS

var ctx = document.getElementById('recentResultsChart').getContext('2d');
var gradientFill = ctx.createLinearGradient(0, 0, 0, 200);
gradientFill.addColorStop(0.1, "rgba(109,110,227, .3)");
gradientFill.addColorStop(1, "rgba(255,255,255, .3)");


var data = {
    labels: ["", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ""],
    datasets: [{
        backgroundColor: "rgba(0,0,0,0)",
        borderColor: "#6d6ee3",
        borderWidth: 2,
        fill: true,
        backgroundColor: gradientFill,
        data: [3, 5, 4, 10, 8, 9, 3, 15, 14, 17],
        pointRadius: 5,
        pointHoverRadius: 7,
        pointColor: "#FFFFFF",
        fillColor: "#FFFFFF",
        strokeColor: "#FF0000",

    }]
};

var options = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    tooltips: {
        mode: 'index',
        intersect: true,
        yPadding: 10,
        xPadding: 10,
        caretSize: 8,
        backgroundColor: '#fff',
        titleFontColor: "#6d6ee3",
        bodyFontStyle: 'bold',
        bodyFontColor: "#737295",
        displayColors: false,
        callbacks: {
            label: function(tooltipItems, data) {
                return "10.5";
            }
        },
        bevelWidth: 3,
        bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
        bevelShadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    showAllTooltips: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                maxTicksLimit: 5,
                min: 0,
            },
            gridLines: {
                display: true
            }
        }],
        xAxes: [{
            display: true,
            ticks: {
                fontSize: 12,
                fontColor: '#c3c6de'
            },
            gridLines: {
                display: false
            }
        }]
    },
    elements: {
        point: {
            radius: 0
        }
    }
};

Chart.pluginService.register({
    beforeRender: function(chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function(dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function(sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options.tooltips,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function(chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function(tooltip, i) {
                if (i !== 3) return;
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
        }
    }
});
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});
              
            
!
999px

Console