Scribd Logo
Upload

Welcome to Scribd!

  • Solo App Bottom Navbar

    Uploaded by

    Programmer Life
    16 views5 pages
    This document defines the styling and structure for a web page with tabs for different sections (Home, Search, Notifications, Profile). It includes CSS styles for elements like the fixed bottom navigation bar, tab content sections, and notification lists. The body contains sample "Hello World" text for each tab section to demonstrate how the design would display content.

    Original Description:

    Original Title

    menú-todo dentro

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines the styling and structure for a web page with tabs for different sections (Home, Search, Notifications, Profile). It includes CSS styles for elements like the fixed bottom navigation bar, tab content sections, and notification lists. The body contains sample "Hello World" text for each tab section to demonstrate how the design would display content.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views5 pages

    Solo App Bottom Navbar

    Uploaded by

    Programmer Life
    This document defines the styling and structure for a web page with tabs for different sections (Home, Search, Notifications, Profile). It includes CSS styles for elements like the fixed bottom navigation bar, tab content sections, and notification lists. The body contains sample "Hello World" text for each tab section to demonstrate how the design would display content.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    DOCTYPE html>
    <html>
    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>solo</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">
    <link rel="stylesheet" type="text/css"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style>

    .bottom-bar {
    background: #fff;
    border-top: 1px solid #eee;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-content: center;
    }

    .bottom-bar.hide {
    display: none;
    }
    .icon {
    text-align: center !important;
    }

    .user-img {
    max-width: 35px;
    height: 35px;
    object-fit: fill;
    border-radius: 100%;
    margin-right: 10px;
    }

    .material-icons {
    vertical-align: middle;
    }

    .action-btns .material-icons {
    }

    .action-btns .val {
    font-weight: bold;
    font-size: 15px;
    margin-right: 5px
    vertical-align: middle;
    }

    .ht, .mt {
    color: blue;
    }

    .username {
    color: #777;
    }

    .ver {
    max-width: 20px;
    }

    .card {
    border-color: #fff !important;
    }

    .card, .card-header, .card-img, .card-footer {


    border-radius: 0 !important;
    background-color: #fff;
    border-color: transparent;
    }

    .tab-content {
    margin-top: 4.5rem;
    margin-bottom: 4rem;
    }

    .zsn-logo {
    padding-top: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    }

    .zsn-logo h1 {
    color: #000;
    font-weight: 600;
    letter-spacing: 5px;
    }

    .nav-tabs .nav-link {
    border: 0;
    color: #666666;
    }

    .nav-tabs .nav-link.active {
    color: deeppink;

    .btn {
    box-shadow: none !important;
    }

    .whotofollow {
    padding-top: 30px;
    list-style: none;
    width: 100%;
    }

    .whotofollow li {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    }

    .whotofollow .user-img {
    max-width: 30px;
    height: 30px;
    }

    .whotofollow .follow {
    text-align: right;
    margin-left: 50px;
    font-size: 10px;
    padding: 3px 10px;
    }

    .whotofollow .followers {
    font-size: 12px;
    }

    .addp {
    vertical-align: middle !important;
    }

    .notifications {
    padding-top: 10px;
    list-style: none;
    }

    .notifications .noti {
    margin-bottom: 20px;
    }

    .user-img-lg {
    max-width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: none;
    object-position: -290px -110px;
    }

    .userfollow {

    .info {
    display: inline-block;
    }

    .info:not(:last-child) {
    margin-right: 12px;
    }

    .bio {
    color: #333;
    }

    .post-not-open {
    margin-top: 30px;
    }

    .edit-p {
    margin-top: 15px;
    margin-bottom: 25px;
    }
    </style>
    </head>
    <body>
    </div>
    <ul class="nav nav-tabs bottom-bar" id="myTab" role="tablist">
    <li class="nav-item">
    <a class="nav-link icon active" id="home-tab" data-toggle="tab"
    href="#home" role="tab" aria-controls="home" aria-selected="true"><i
    class="material-icons">home</i></a>
    </li>
    <li class="nav-item">
    <a class="nav-link icon" id="search-tab" data-toggle="tab"
    href="#search" role="tab" aria-controls="search" aria-selected="false"><i
    class="material-icons">explore</i></a>
    </li>

    <li class="nav-item">
    <a class="nav-link icon" id="noti-tab" data-toggle="tab" href="#noti"
    role="tab" aria-controls="noti" aria-selected="false"><i class="material-
    icons">notifications</i></a>
    </li>
    <li class="nav-item">
    <a class="nav-link icon" id="profile-tab" data-toggle="tab"
    href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i
    class="material-icons">person</i></a>
    </li>
    </ul>
    <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-
    labelledby="home-tab">

    HOLA MUNDO 1
    </div>

    <div class="tab-pane fade" id="search" role="tabpanel" aria-


    labelledby="search-tab">
    <div class="container">

    HOLA MUNDO 2

    </div>
    </div>
    <div class="tab-pane fade" id="noti" role="tabpanel" aria-
    labelledby="noti-tab">
    <div class="container">
    <ul class="notifications">
    <li class="noti">
    <div class="container">
    HOLA MUNDO 3
    </li>
    </div>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-
    labelledby="profile-tab">
    <div class="container">
    HOLA MUNDO 4
    </div>
    </div>

    </div>
    </div>
    <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></
    script>
    </body>
    </html>

    You might also like