CodePen Embed - Duran Duran

<!DOCTYPE HTML>
<html lang="en-gb">
    
    <head>
        <!-- This section contains the meta, Stylesheets and Favicons -->
        
        <!-- Meta -->
        
        <meta charset="utf-8">
        <meta name="description" content="I'm Aiden, and I recreated the album art for Duran Duran's album 'Rio' in CSS Grid"> 
        <meta name="keywords" content=" CSS Grid, Duran Duran, Rio, Aiden Francis, Web Developer, UX, Manchester">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Aiden King">
        
        <!-- Stylesheets -->
        
           <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Cuprum" rel="stylesheet">
        <script src="https://use.fontawesome.com/687936c360.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
        <!-- Favicons -->
        
        
        <title>Duran Duran - Rio</title> 

    </head>
    
    <body>
        
    <main>
        
        
        <div class="top-left"><h1>DuRaN DuRaN</h1><h2>RIO</h2><a href="https://ibb.co/kZi8ec"><img src="https://preview.ibb.co/dyTKkH/duran_duran.jpg" alt="duran_duran" border="0"></a></div>
        <div class="left-2"></div>
        <div class="left-3"></div>
        <div class="left-4"></div>
        <div class="top-right"></div>
  

        
        <div class="row-two-column-1"></div>
        <div class="row-two-column-2"></div>
        <div class="row-two-column-3"></div>
        <div class="row-two-column-4"></div>
        <div class="row-two-column-5"></div>
        
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="line-3"></div>
        <div class="line-4"></div>
        <div class="line-5"></div>
        <div class="line-6"></div>
        
        
        <div class="row-three-column-1"></div>
        <div class="row-three-column-2"></div>
        <div class="row-three-column-3"></div>
        <div class="row-three-column-4"></div>
        <div class="row-three-column-5"></div>
        
        <div class="row-four-column-1"></div>
        <div class="row-four-column-2"></div>
        <div class="row-four-column-3"></div>
        <div class="row-four-column-4"></div>
        <div class="row-four-column-5"></div>
        
        <div class="row-five-column-1"></div>
        <div class="row-five-column-2"></div>
        <div class="row-five-column-3"></div>
        <div class="row-five-column-4"></div>
        <div class="row-five-column-5"></div>
        
        <div class="row-six-column-1"></div>
        <div class="row-six-column-2"></div>
        <div class="row-six-column-3"></div>
        <div class="row-six-column-4"></div>
        <div class="row-six-column-5"></div>
        </main>
    </body>
</html>

@font-face {
    font-family: 'Silverfake';
    src: url('Silverfake.woff2') format('woff2'),
        url('Silverfake.woff') format('woff'),
        url('Silverfake.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bodoni MT';
    src: url('BodoniMT-BoldItalic.woff2') format('woff2'),
        url('BodoniMT-BoldItalic.woff') format('woff'),
        url('BodoniMT-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


h1{
    font-family: 'Silverfake'; 
    z-index: 99;
    color: #b4cfe4;
    font-size: 50px;
    font-weight: 100;
    border-top: 15px;
    padding-left: 50px;
    letter-spacing: 10px;
    margin-top: -10px;
/*    padding-bottom: 10px;*/
}

h2{
    font-family: 'Bodoni MT';
    z-index: 99;
    color: #b4cfe4;
    font-size: 100px;
    font-weight: 100;
    border-top: 15px;
    padding-left: 400px;
    letter-spacing: 250px;
    margin-top: 10px;
    padding-right: 100px;
    z-index: 99;
    position: absolute;
     text-shadow:
       3px 3px 0 #6b4093,
     -1px -1px 0 #6b4093,  
      1px -1px 0 #6b4093,
      -1px 1px 0 #6b4093,
       1px 1px 0 #6b4093;
/*    padding-bottom: 10px;*/
}

h1::first-letter {
    font-size: 80px;
    color: #bd95c6;
}

main {
        display:grid;  
        margin: 0;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/*        grid-gap: 0.1rem;*/
        width: 75%;
    }
    
.top-left {
        grid-row: 1/span 5;
        grid-column: 1/span 5;
        background-color: #6d0d37;
        height: 183.5px; 
        z-index: 99;
    }

.top-left img {
    z-index: 96;
    padding-left: 263px;
    margin-top: -30px;
    height: 950px;
}
  
    
    .left-2 {
        grid-row: 1;
        grid-column: 2;
        height: 100px;
        background-color: #6d0d37;
        height: 183.5px; 
    }
    
    .left-3 {
        grid-row: 1;
        grid-column: 3;
        height: 100px;
        background-color: #6d0d37;
        height: 183.5px; 
    }
    
    .left-4 {
        grid-row: 1;
        grid-column: 4;
        height: 100px;
        background-color: #6d0d37;
        height: 183.5px; 
    }
    
    .top-right {
        grid-row: 1;
        grid-column: 5;
        height: 100px;
        background-color: #6d0d37;
        height: 183.5px; 
    }
    

    .row-two-column-1 {
        grid-column: 1;
        grid-row: 2;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-two-column-2 {
        grid-column: 2/span 4;
        grid-row: 2/span 5;
        height: 183.5px;
        background-color: #6d0d37;
        z-index: 90;
    }
  
    .row-two-column-3 {
        grid-column: 3;
        grid-row: 2;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-two-column-4 {
        grid-column: 4;
        grid-row: 2;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-two-column-5 {
        grid-column: 5;
        grid-row: 2;
        height: 183.5px;
        background-color: #6d0d37;
    }
    

    .line {
        grid-column: 1/span 1;
        grid-row: 2;
        z-index: 99;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 0em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           
    }

.line-2 {
        grid-column: 1;
        grid-row: 2/span 2;
        z-index: 98;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 5.5em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           
    }

.line-3 {
        grid-column: 1/span 1;
        grid-row: 3;
        z-index: 98;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 0em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           

    }

.line-4 {
        grid-column: 1;
        grid-row: 3/span 2;
        z-index: 98;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 5.5em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           

    }

.line-5 {
        grid-column: 1/span 1;
        grid-row: 4;
        z-index: 99;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 0em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           

    }

.line-6 {
        grid-column: 1;
        grid-row: 4/span 2;
        z-index: 98;
        border-radius: 50%;
        background-color: #dfe2d1;
        display: block;
        height: 1px;
        border: 1px solid #ccc;
        margin: 5.5em 0;
        padding: 0;
        transform: rotate(160deg) translateY(10px) translateX(1px);           

    }
    

    .row-three-column-1 {
        grid-column: 1;
        grid-row: 3;
        height: 183.5px;
        background-color: #6d0d37;
    }

    .row-three-column-2 {
        grid-column: 2;
        grid-row: 3;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-three-column-3 {
        grid-column: 3;
        grid-row: 3;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-three-column-4 {
        grid-column: 4;
        grid-row: 3;
        height: 183.5px;
        background-color: #6d0d37;
    }
    
    .row-three-column-5 {
        grid-column: 5;
        grid-row: 3;
        height: 183.5px;
        background-color: #6d0d37;
    }
    


    .row-four-column-1 {
        grid-row: 4;
        grid-column: 1;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }

    .row-four-column-2 {
        grid-row: 4;
        grid-column: 2;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-four-column-3 {
        grid-row: 4;
        grid-column: 3;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-four-column-4 {
        grid-row: 4;
        grid-column: 4;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-four-column-5 {
        grid-row: 4;
        grid-column: 5;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
        z-index: 80;
    }  



    .row-five-column-1 {
        grid-row: 5;
        grid-column: 1;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }

    .row-five-column-2 {
        grid-row: 5;
        grid-column: 2;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-five-column-3 {
        grid-row: 5;
        grid-column: 3;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-five-column-4 {
        grid-row: 5;
        grid-column: 4;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-five-column-5 {
        grid-row: 5;
        grid-column: 5;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
        z-index: 82;
    }  


.row-six-column-1 {
        grid-row: 6;
        grid-column: 1;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }

    .row-six-column-2 {
        grid-row: 6;
        grid-column: 2;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-six-column-3 {
        grid-row: 6;
        grid-column: 3;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-six-column-4 {
        grid-row: 6;
        grid-column: 4;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
    }
    
    .row-six-column-5 {
        grid-row: 6;
        grid-column: 5;
        background-color: #6d0d37;
        height: 183.5px;
        margin-bottom: 0;
        z-index: 84;
    }  


/*
    .row-four-column-6 {
        grid-row: 4;
        grid-column: 6 / span 4;
        background-color: #211e27;
        height: 350px;
        transform: skew( 45deg, 0deg);
        margin-bottom: 0;
        overflow: hidden;
        margin-right: 200px;
        z-index: 99;
    }
*/

This Pen is owned by Aiden King on CodePen.

See more by @AidenFrancis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.