Responsive grid with CSS Grids

Responsive grid with CSS Grids

by Sampath_Madhuranga

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <!-- 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
            href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/responsive.css" />
    </head>
    <body>
        <div id="sidenav" class="sidenav">
            <img src="img/avatar.png" alt="avatar" id="avatar" />
            <p id="name">
                Lorem, ipsum.
            </p>
            <div id="icons">
                <i
                    class="fa fa-github"
                    style="color: #111; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-linkedin"
                    style="color: #111; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-slack"
                    style="color: #111; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-youtube-play"
                    style="color: #111; margin: 10px; font-size: 22px;"
                ></i>
            </div>
            <div id="chevron" onclick="toggle()">
                <i
                    class="fa fa-chevron-down"
                    style="color: #111; font-size:...

SCSS

/*----- regular styles which belongs to styles.css -----*/
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400i&display=swap");

body {
    font-family: "Ubuntu", sans-serif;
    background: #3f3f3f;
}

/* styling custom scrollbar for chrome */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #87cf3e;
    border-radius: 10px;
}

/* styles for side navigation */
div#sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #252526;
    overflow-x: hidden;
    padding-top: 25px;
}

div#sidenav img#avatar {
    border-radius: 50%;
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

p#name {
    color: #111;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

div#icons {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

#chevron {
    display: none;
}

div#links {
    margin-top: 25px;
    margin-bottom: 40px;
    text-align: center;
    background-image: linear-gradient(to right, #3f3f3f, #87cf3e);
    height: auto;
    width: 100%;
    font-size: 18px;
}

div#links a {
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    color: #111;
    text-decoration: none;
}

.active,
div#links a:hover {
    background-image: linear-gradient(to right, #87cf3e, #3f3f3f);
}

/* styles for content */
div#content {
    margin-left: 200px;
    margin-right: 120px;
    padding: 20px;
}

/* styles for heading */
p#heading {
    text-align: center;
    color: #111;
    font-size: 36px;
}

/* styles for techs */
div#content div#techs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
    justify-items: center;
}

div#content div#techs img {
    width: 80px;
    height: 80px;
}

/* styles for concepts */
div#content div#concepts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

div#concepts p {
   ...

JavaScript

function toggle() {
    var sidenav = document.getElementById("sidenav");
    if (sidenav.className === "sidenav") {
        sidenav.className += " overlay";
    } else {
        sidenav.className = "sidenav";
    }
}