Mobile layout for homepage

Developer
Kevin Sherman
Size
4,141 Kb
Views
34,408
  1. Mobile layout for homepage Previews
  2. Mobile layout for homepage HTML Codes
  3. Mobile layout for homepage CSS Codes
  4. Mobile layout for homepage JS Codes

How do I make an mobile layout for homepage?

Testing Off Canvas menus for Mobile, new slider plugin. What is a mobile layout for homepage? How do you make a mobile layout for homepage? This script and codes were developed by Kevin Sherman on 06 September 2022, Tuesday.

Mobile layout for homepage Previews
IQ Test

Mobile layout for homepage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile layout for homepage</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <div class="sticky-nav"> <nav class="tab-bar"> <section class="left-small"> <a href="#" class="left-off-canvas-toggle menu-icon"><span></span></a> </section> <section class="middle tab-bar-section"> <img src="https://www.ben.edu/style/images/BULogo.svg" width="200px"> </section> <section class="right-small"> <a href="#" class="right-off-canvas-toggle" style="text-align: center; display: block; color: white;"><i class="fa fa-search"></i></a> </section> </nav> </div> <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Main Menu</label></li> <li><a href="#">Degree Programs</a></li> <li class="has-submenu"><a href="#">Admissions</a> <ul class="left-submenu"> <li class="back"><a href="#">Back</a></li> <li><a href="#">Admissions Events</a></li> <li><a href="#">Freshman and Transfer Undergraduate</a></li> <li><a href="#">Graduate and Doctorate</a></li> <li><a href="#">Adult Undergraduate</a></li> <li><a href="#">Mesa Branch Campus Admissions</a></li> <li><a href="#">National Moser Center for Adult Learning</a></li> <li><a href="#">Financial Aid Information</a></li> <li><a href="#">Admissions Homepage</a></li> </ul> </li> <li><a href="#">Alumni and Friends</a></li> <li><a href="#">Athletics</a></li> <li><a href="#">Campus Community</a></li> <li><label>Locations</label></li> <li><a href="#">Main Campus in Lisle, IL</a></li> <li><a href="#">Mesa, AZ Branch Campus</a></li> <li><a href="#">National Moser Center for Adult Learning</a></li> <li><a href="#">Online</a></li> <li><label>Quicklinks</label></li> <li><a href="#">Find Your Program</a></li> <li><a href="#">Apply Now</a></li> <li><a href="#">Visit Campus</a></li> <li><a href="#">National Moser Center for Adult Learning</a></li> <li><a href="#">Account Login</a></li> </ul> </aside> <aside class="right-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Search:</label></li> <li><a href="#">... All ben.edu</a></li> <li><a href="#">... For a program</a></li> <li><a href="#">... Mesa, AZ Branch Campus</a></li> <li><a href="#">... National Moser Center</a></li> </ul> </aside> <section class="main-section"> <div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "center", "contain": true, "wrapAround": true, "autoPlay": false, "pageDots": true }'> <div class="gallery-cell"> <div class="feature-slide"> <img src="https://ben.edu/features/images/FoundersDaymobile.jpg"> <div class="capt"> image caption </div> </div> <div class="feature-content"> <h3 class="feature-title">Honoring history, values</h3> <p class="feature-sub-title">Benedictine University paid homage to the founding monks of the institution by honoring those who, 128 years later, continue to advance their vision. <span class="readmore">Read more </span></p> </div> </div> <div class="gallery-cell"> <div class="feature-slide"> <img src="https://ben.edu/features/images/Mobile_4.jpg"> <div class="capt"> This is a caption </div> </div> </div> <div class="gallery-cell"> <div class="feature-slide"> <img src="https://ben.edu/features/images/Mobile_1.jpg"> <div class="capt"> This is a caption </div> </div> </div> </div> </section> <a class="exit-off-canvas"></a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile layout for homepage - Script Codes CSS Codes

.off-canvas-wrap { padding-bottom: 125px; min-height: 100vh;
}
.off-canvas-wrap .inner-wrap { min-height: 100vh;
}
.sticky-nav { bottom: 10px; position: fixed; width: 100%; border-top: 5px solid rgba(30, 30, 30, 0.1); border-bottom: 5px solid rgba(30, 30, 30, 0.1); z-index: 999;
}
.sticky-nav nav.tab-bar { background-color: #cc3333;
}
.sticky-nav nav.tab-bar .left-small { border-right: 1px solid #a32929;
}
.sticky-nav nav.tab-bar .right-small { border-left: 1px solid #a32929;
}
/* big buttons, no circle */
.flickity-prev-next-button { top: 35%; width: 100px; height: 100px; background: transparent;
}
.flickity-prev-next-button:hover, .flickity-prev-next-button:hover .arrow { background: rgba(255, 255, 255, 0.4); fill: rgba(30, 30, 30, 0.9);
}
/* arrow color */
.flickity-prev-next-button .arrow { fill: white;
}
.flickity-prev-next-button.no-svg { color: white;
}
/* hide disabled button */
.flickity-prev-next-button:disabled { display: none;
}
.gallery-cell { width: 100%; /* full width */ margin-right: 10px; background-color: #f0f0f0;
}
.gallery-cell img { width: 100%;
}
.gallery-cell .feature-slide { position: relative;
}
.gallery-cell .feature-slide .capt { position: absolute; bottom: 0; display: block; background-color: rgba(50, 50, 50, 0.3); width: 100%; padding: 8px; color: white;
}
.gallery-cell .feature-content { padding: 8px 16px;
}
.gallery-cell .feature-content h3 { font-weight: 300; font-size: 1.75rem;
}
.gallery-cell .feature-content p.feature-sub-title { margin-bottom: 0.5rem;
}
.gallery-cell .feature-content p.feature-sub-title .readmore { color: #222; border: 1px solid #ccc; background-color: #efefef; white-space: nowrap; padding: 0 3px;
}

Mobile layout for homepage - Script Codes JS Codes

$(document).foundation();
Mobile layout for homepage - Script Codes
Mobile layout for homepage - Script Codes
Home Page Home
Developer Kevin Sherman
Username ksherman
Uploaded September 06, 2022
Rating 3
Size 4,141 Kb
Views 34,408
Do you need developer help for Mobile layout for homepage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Sherman (ksherman) Script Codes
Name
Vue - Alerts
BenU Interior Page Layout
BenU Button Styles
Calendar Feed
Foundation Buttons Bug
Admissions Process OL
Net Price Calculator - Output
Main Campus Homepage Concept
Mobile floating menu
Site Header - Mesa
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!