Quick Introduction

This is a modern website design with the sidebar. Feel free to download this code and add your own taste and make something new.

This site is not responsive so you could add your own media queries and experiment with it.

Here’s what we are making:

Complete Website Design: Using CSS Grid 1 » Csspoint101

Learn how to create a javascript password generator

HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>Avengero</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    <script src="script.js"></script>
    <!-- <ion-icon name="heart"></ion-icon> -->
</head>

<body>
    <!-- sidbar markup -->
    <div class="sidebar">
        <!-- logo markup -->
        <div class="logo">
            <img src="./images/Avengero Logo.png" alt="logo">
        </div>
       
        <!-- Menu Items -->
        <div class="sidenav">
            <a href="#">Home <ion-icon name="home"></ion-icon></a>
            <a href="#">Movies<ion-icon name="desktop"></ion-icon></a>
            <a href="#">Characters<ion-icon name="construct"></ion-icon></a>
            <a href="#">Contact<ion-icon name="call"></ion-icon></a>
        </div>
        <!-- Socials -->
        <div class="socials">

            <a href="#">
                <ion-icon name="logo-facebook"></ion-icon>
            </a>
            <a href="#">
                <ion-icon name="logo-twitter"></ion-icon>
            </a>
            <a href="#">
                <ion-icon name="logo-pinterest"></ion-icon>
            </a>
            <!-- color-band -->
        	<div class="color-band"></div>
        </div>
    </div>
    <!-- sidebar markup ends here... -->
    
    <!-- Main-area -->
    <div class="main-area">
        
        <!-- cards markup -->
        <div class="cards">
            <!-- card-one -->
            <div class="card card-one">
                <img src="./images/endgame.jpg" alt="endgame">
                <h2>Avengers:<br> Endgame</h2>
                <h3>2019</h3>
            </div>
            <!-- card-two -->
            <div class="card card-two">
                <img src="./images/antman.jpg" alt="antman">
                <h2>Antman</h2>
                <h3>2018</h3>
            </div>
            <!-- card-three -->
            <div class="card card-three">
                <img src="./images/captainmarvel.jpg" alt="captainmarvel">
                <h2>Captain Marvel</h2>
                <h3>2019</h3>
            </div>
            <!-- card-four -->
            <div class="card card-four">
                <img src="./images/infinitywar.jpg" alt="infinitywar">
                <h2>Avengers:<br>Infinitywar</h2>
                <h3>2018</h3>
            </div>
            <!-- card-five -->
            <div class="card card-five">
                <img src="./images/blackwidow.jpg" alt="blackwidow">
                <h2>Blackwidow</h2>
                <h3>2020</h3>
            </div>
            <!-- card-six -->
            <div class="card card-six">
                <img src="./images/spiderman.jpg" alt="spiderman">
                <h2>Spiderman</h2>
                <h3>2019</h3>
            </div>
        </div>
    </div>
    <!-- main-area markup ends here.. -->
    <!-- footer markup -->
    <footer>
        <span class="foot">Made with <ion-icon name="heart"></ion-icon>
            <a href="https://csspoint101.com/">Csspoint101.com</a></span>
    </footer>
</body>

</html>

CSS

/*General Css*/
* {
    margin: 0;
    padding: 0;
}

/*varibles for colors*/
:root {
    --bg-color: #323232;
    --red: #f8615a;
    --white: white;
    letter-spacing: 1px;
}

/*General styling*/
h1 {
    font-family: 'Montserrat';
    color: var(--red);
}

h2 {
    font-family: 'Montserrat';
    color: var(--white);
}

h3 {
    font-family: 'Montserrat';
    color: var(--red);
}

.white {
    color: var(--white);
}

ion-icon {
    color: var(--white);
}

a {
    color: var(--white);
    text-decoration: none; /* no underline */
    font-family: 'Montserrat';
}

.logo img {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 5%;
    left: 30%;
}

/*Main styling*/
body {
    background: var(--bg-color);
}
/*sidebar styling*/
.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
    grid-area: sidebar;
}

.sidenav {
	 position: absolute;
	 top: 30%;
    left: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sidenav a {
    padding: 20px;
}

.sidenav a ion-icon {
    color: var(--red);
    padding-left: 10px;
}

/*socials styling*/
.socials{
	position: absolute;
	bottom: 10%;
	left:20%;
    padding: 10px;
}
.socials a ion-icon{
	padding: 15px;
	color: var(--white);
}
.color-band{
	position: absolute;
	bottom: 10%;
	height: 60px;
	width: 250px;
	z-index: -1;
	background-color:var(--bg-color) ;
}
/*main area styling*/
.main-area{
	position: relative;
}
.main-title{
	position: absolute;
	left: 45%;
	top: 2%;
}

/*card styling*/
.cards{
	display: grid;
	grid-auto-flow: row;
	grid-template-columns:  repeat(3, minmax(50px,1fr));
	grid-template-rows:  auto auto 10px;
	grid-template-areas: 
	"sidebar card-one card-two card-three"
	"sidebar card-four card-five card-six"
    "sidebar footer footer footer"
}
.card{
	padding: 10px;

}
.card img{
	border-radius: 7px;
	flex-direction: column;
	width: 180px;
	height: 210px;
     padding-bottom: 5px;
	object-fit: cover;
}
/*grid-template-area naming*/
.card-one{
	grid-area: card-one;
}
.card-two{
	grid-area: card-two;
}
.card-three{
	grid-area: card-three;
}
.card-four{
	grid-area: card-four;
}
.card-five{
	grid-area: card-five;
}
.card-six{
	grid-area: card-six;
}

/*footer*/
footer{
	position: relative;
	grid-area: footer;
	background-color:var(--red);
	 font-family: 'Montserrat';
	 height: 100px;
}
.foot{
 position: absolute;
 left: 40%;
 font-weight: bolder;
 padding: 30px;
 font-size: 1.2rem;
}

Thanks for reading my article. Also check out other article on- thanos snap effect and best css hover effects.

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.