.container
  .iphone-x
    %i.iphone-x-speaker
    %b.iphone-x-camera
    .phone-top-batch
      .phone-top-batch-left
        .time 10.10
      .phone-top-batch-right
        %i.ion-connection-bars
        %i.ion-wifi
        %i.ion-battery-half
    .primary-menu-container
      %ul
        %li
          %i.ion-ios-home-outline.main-menu-hero-icon
          %a.main-menu-hero-text{:href => "#Home_Page_Menu"} Home Menu
        %li
          %i.ion-ios-game-controller-b-outline.main-menu-hero-icon
          %a.main-menu-hero-text{:href => "#Game_Menu"} Games
        %li
          %i.ion-ios-heart-outline.main-menu-hero-icon
          %a.main-menu-hero-text{:href => "#Favorite_Games_Menu"} Favorite Games
        %li
          %i.ion-ios-cart-outline.main-menu-hero-icon
          %a.main-menu-hero-text{:href => "#Perches_Game_Menu"} Perches Game
        %li
          %i.ion-log-out.main-menu-hero-icon
          %a.main-menu-hero-text{:href => "#Logout_Menu"} Logout
    .main-page-container
      .side-menu-icon
        %i#Main_side_menu_Nav.ion-navicon
        .title Home Page
      .home-page-inner-container
        .core
          .image-wrap
            %img{:src => "http://tsumbaluk.in.ua/design/img/game/normal.png"}/
          .borders
        .page-screen-name Home Page
    .main-page-second-menu
      / Menu 1
      #Home_Page_Menu.second-menu-sets
        .main-page-second-menu-header
          %i.ion-ios-home-outline
          .title Home Page
        %ul
          %li Play Game
          %li Recent Game
          %li Top Game
      / Menu 2
      #Game_Menu.second-menu-sets
        .main-page-second-menu-header
          %i.ion-ios-game-controller-b-outline
          .title Games
        %ul
          %li Injustice 2
          %li Real Racing 3
          %li PUBG Mobile
          %li N.O.V.A. Legacy
          %li Into the Dead 2
      / Menu 3
      #Favorite_Games_Menu.second-menu-sets
        .main-page-second-menu-header
          %i.ion-ios-heart-outline
          .title Favorite Games
        %ul
          %li Injustice 2
          %li Real Racing 3
          %li PUBG Mobile
      / Menu 4
      #Perches_Game_Menu.second-menu-sets
        .main-page-second-menu-header
          %i.ion-ios-cart-outline
          .title Perches Game
        %ul
          %li Eternium
          %li Pokémon Go
          %li R-Type
          %li Pac-Man
      / Menu 5
      #Logout_Menu.second-menu-sets
        .main-page-second-menu-header
          %i.ion-log-out
          .title Logout
        %ul
          %li Logout
View Compiled
//colors
$color_zircon_approx: #f4f6fc;
$color_moody_blue_approx: #7371ee;
$color_cornflower_blue_approx: #698cef;
$color_butterfly_bush_approx: #4e54a1;
$color_log_cabin_approx: #1f1f1f;
$color_rangoon_green_approx: #191919;
$color_woodsmoke_approx: #111;
$concrete: #f2f2f2;
$white_20: rgba(255, 255, 255, 0.2);
$color_san_juan_approx: #2d4d76;
$black_50: rgba(0, 0, 0, 0.5);
$black_28: rgba(0, 0, 0, 0.28);
$white: #fff;
$color_hoki_approx: #6a84a0;
$black_40: rgba(0, 0, 0, 0.4);
$color_san_marino_approx: #3d5cb4;
$color_port_gore_approx: #202349;
$white_40: rgba(255, 255, 255, 0.4);
$color_east_bay_approx: #3c4580;
$color_paris_daisy_approx: #fff06a;
$black_56: rgba(0, 0, 0, 0.56);
$color_celeste_approx: #ccc;
$color_nevada_approx: #666c7a;
$color_puerto_rico_approx: #48cfae;
$color_golden_tainoi_approx: #ffce55;

//fonts
$font_0: Montserrat;
$font_1: sans-serif;

//urls
$url_0: url(http://tsumbaluk.in.ua/design/img/game/top_bg.png);
$url_1: url(http://tsumbaluk.in.ua/design/img/game/asteroid.png);

//@extend-elements
%extend_1 {
    content: '';
    position: absolute;
    left: 50%;

    transform: translateX(-50%);
}


%extend_2 {
    position: absolute;
    display: block;
    color: transparent;
}


body {
    background: $color_zircon_approx;
    font-family: $font_0, $font_1;
}

.iphone-x {
    position: relative;
    margin: 40px auto;
    width: 300px;
    height: 610px;
    background-color: $color_moody_blue_approx;
    background: radial-gradient(ellipse at center, $color_cornflower_blue_approx 19%, $color_butterfly_bush_approx 100%);

    border-radius: 40px;
    box-shadow: 0 0 0 11px $color_log_cabin_approx, 0 0 0 13px $color_rangoon_green_approx, 0 0 0 20px $color_woodsmoke_approx;
    margin-top: 100px;
    overflow: hidden;
    &:before {
        @extend %extend_1;
        top: 0;
        width: 56%;
        height: 30px;
        background-color: $color_log_cabin_approx;
        border-radius: 0 0 40px 40px;
    }
    &:after {
        @extend %extend_1;
        bottom: 7px;
        width: 140px;
        height: 4px;
        background-color: $concrete;
        border-radius: 10px;
    }
    .phone-top-batch {
        display: flex;
        background: $black_28;
        padding: 6px;
        .phone-top-batch-left {
            display: flex;
            .time {
                color: $white;
                font-size: 12px;
                padding-left: 20px;
                line-height: 18px;
                font-weight: bold;
            }
        }
        .phone-top-batch-right {
            display: flex;
            margin-left: auto;
            i {
                display: inline-block;
                color: $white;
                font-size: 16px;
                padding-right: 6px;
                position: relative;
                top: 3px;
                &:first-child {
                    padding-right: 10px;
                }
            }
        }
    }
    .main-page-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 31px;
        bottom: 0;
        background: $color_hoki_approx;
        border-radius: 40px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border: 1px solid $black_40;
        transition: all ease .5s;
        border-top: none;
        z-index: 10;
        background: radial-gradient(ellipse at center, $color_san_marino_approx 19%, $color_port_gore_approx 100%);
        &:before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            background-image: $url_0;
            background-repeat: no-repeat;
            background-position: right;
            background-size: inherit;
            bottom: 0;
        }
        .page-screen-name {
            right: 0;
            bottom: 0;
            display: table-cell;
            vertical-align: middle;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 38px;
            z-index: 100;
            text-align: center;
            color: $white_40;
            font-size: 24px;
            font-weight: bold;
        }
        .side-menu-icon {
            position: relative;
            width: 100%;
            float: left;
            padding: 10px;
            box-sizing: border-box;
            line-height: 0;
            background: $color_east_bay_approx;
            i {
                color: $white;
                font-size: 30px;
                cursor: pointer;
            }
        }
        .title {
            font-size: 15px;
            text-align: center;
            display: inherit;
            position: relative;
            top: -14px;
            text-transform: uppercase;
            color: $white;
        }
    }
    .main-page-second-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 31px;
        bottom: 0;
        background: $color_hoki_approx;
        border-radius: 40px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border: 1px solid $black_40;
        transition: all ease .5s;
        border-top: none;
        z-index: 9;
        background: radial-gradient(ellipse at center, $color_cornflower_blue_approx 19%, $color_butterfly_bush_approx 100%);
        .second-menu-sets {
            width: 100%;
            float: left;
            display: table;
            position: relative;
            .main-page-second-menu-header {
                height: 50px;
                width: 100%;
                float: left;
                background: $color_east_bay_approx;
                font-size: 19px;
                padding: 12px;
                box-sizing: border-box;
                padding-left: 20px;
                text-transform: uppercase;
                position: absolute;
                i {
                    color: $white;
                    font-size: 35px;
                    position: relative;
                    top: -10px;
                }
                .title {
                    font-size: 20px;
                    text-align: left;
                    display: inherit;
                    position: relative;
                    top: -42px;
                    text-transform: uppercase;
                    color: $white;
                    padding-left: 45px;
                }
            }
            ul {
                padding: 0;
                list-style: none;
                width: 100%;
                margin: 0;
                display: table-cell;
                vertical-align: middle;
                height: 576px;
                text-align: left;
                margin-top: 50px;
                li {
                    width: 100%;
                    float: left;
                    padding: 16px 20px;
                    box-sizing: border-box;
                    font-size: 18px;
                    color: $white;
                    cursor: pointer;
                    text-transform: capitalize;
                    text-transform: uppercase;
                }
            }
        }
    }
    .primary-menu-container {
        width: 100%;
        float: left;
        ul {
            width: 100%;
            float: left;
            padding: 0;
            list-style: none;
            margin: 0;
            margin-top: 105px;
            li {
                width: 100%;
                float: left;
                box-sizing: border-box;
                padding: 15px;
                color: $white;
                i {
                    font-size: 35px;
                    cursor: pointer;
                    float: left;
                }
                .main-menu-hero-text {
                    margin-left: 40px;
                    font-size: 14px;
                    line-height: 40px;
                    float: left;
                    text-transform: uppercase;
                    cursor: pointer;
                    transition: all ease 1s;
                    color: $white;
                    text-decoration: none;
                }
                &.active {
                    color: $color_paris_daisy_approx;
                }
            }
        }
    }
    i.iphone-x-speaker {
        @extend %extend_2;
        top: 0;
        left: 50%;
        transform: translate(-50%, 6px);
        height: 8px;
        width: 15%;
        background-color: $color_woodsmoke_approx;
        border-radius: 8px;
        box-shadow: inset 0 -3px 3px 0 $white_20;
    }
    b.iphone-x-camera {
        @extend %extend_2;
        left: 10%;
        top: 0;
        transform: translate(180px, 4px);
        width: 12px;
        height: 12px;
        background-color: $color_woodsmoke_approx;
        border-radius: 12px;
        box-shadow: inset 0 -3px 2px 0 $white_20;
        &:after {
            content: '';
            position: absolute;
            background-color: $color_san_juan_approx;
            width: 6px;
            height: 6px;
            top: 2px;
            left: 2px;
            top: 3px;
            left: 3px;
            display: block;
            border-radius: 4px;
            box-shadow: inset 0 -2px 2px $black_50;
        }
    }
}

.menu-open {
    .main-page-container {
        transition: all ease .5s;
        transform: scale(0.35);
        right: -48%;
        border-radius: 0;
        cursor: pointer;
        box-shadow: 0 0 90px $black_56;
        margin-left: 23%;
    }
    .main-page-second-menu {
        transform: scale(0.68);
        border-radius: 0;
        box-shadow: 0 0 90px $black_56;
        transition: all ease .5s;
        right: -20%;
    }
    &.main-menu-open {
        .main-page-second-menu {
            transform: scale(0.48);
            transition: all ease .5s;
            right: -100%;
            margin-left: 25%;
            pointer-events: none;
        }
        .main-page-container {
            margin-left: 50%;
            pointer-events: none;
        }
        .primary-menu-container ul li .main-menu-hero-text {
            margin-left: 12px;
            transition: all ease 1s;
        }
    }
}

@keyframes rotationsFirst {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotationsSecond {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.main-page-container .core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    z-index: 100;
    .image-wrap {
        position: absolute;
        top: 56px;
        left: 56px;
        border-radius: 50%;
        width: 70px;
        overflow: hidden;
        animation: rotationsFirst 60s 0s infinite linear;
        img {
            width: 100%;
        }
    }
    .borders {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px dashed $color_celeste_approx;
        border-top: 1px solid $color_nevada_approx;
        z-index: 10;
        background-image: $url_1;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        animation: rotationsSecond 60s 0s infinite linear;
        &:before {
            position: absolute;
            content: "";
            top: 10%;
            left: 10%;
            border-radius: 50%;
            width: 80%;
            height: 80%;
            border: 2px dashed $color_puerto_rico_approx;
            border-bottom: 1px solid $color_golden_tainoi_approx;
            z-index: -1;
        }
    }
}
View Compiled
$(document).ready(function() {
        $('body').on('click', '#Main_side_menu_Nav', function() {
            $('body').addClass('menu-open')
            setTimeout(function() {
                $('.main-page-container').addClass('main-page-container-small');
            }, 1000);
        });
        $('body').on('click', '.main-menu-hero-icon', function() {
            $('body').addClass('main-menu-open');
        });
        $('body').on('click', '.main-menu-hero-text', function() {
            $('body').removeClass('main-menu-open');
        });
        $('body').on('click', '.second-menu-sets ul li', function() {
            $('body').removeClass('menu-open');
            $('body').removeClass('main-menu-open');
            $('.main-page-container').removeClass('main-page-container-small')
        });
        $('body').on('click', '.main-page-container-small', function() {
            $(this).removeClass('main-page-container-small')
            $('body').removeClass('menu-open')
        });

        $('.second-menu-sets').hide();
        $('.second-menu-sets:first-of-type').show();
        $('.primary-menu-container ul li a').click(function(e) {
            e.preventDefault();
            var $this = $(this),
                tabgroup = '#' + $this.parents('.primary-menu-container').data('main-page-second-menu'),
                target = $this.attr('href');
            $('.main-page-second-menu').children('.second-menu-sets').hide();
            $(target).show();

        });
        $(".second-menu-sets ul li").click(function() {
            var menu_txt = $(this).text();
            $('.main-page-container .title').html(menu_txt);
            $('.main-page-container .page-screen-name').html(menu_txt);
        });
    });

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:300,400,700
  2. http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js