Menu - Forks Meal Planner

Developer
Thulio Philipe
Size
5,432 Kb
Views
4,048
  1. Menu - Forks Meal Planner Previews
  2. Menu - Forks Meal Planner HTML Codes
  3. Menu - Forks Meal Planner CSS Codes

How do I make an menu - forks meal planner?

What is a menu - forks meal planner? How do you make a menu - forks meal planner? This script and codes were developed by Thulio Philipe on 09 January 2023, Monday.

Menu - Forks Meal Planner Previews
IQ Test

Menu - Forks Meal Planner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu - Forks Meal Planner</title> <meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="navbar-area"> <div class="navbar-wrapper"> <h1 class="navbar-logo"> <a href="#">Forks Meal Planner</a> </h1> <aside class="navbar-plan"> <p>Choose plan:</p> <select class="navbar-select"> <option value="Week of Nov 14"> Week of Nov 14 </option> <option value="Week of Nov 21"> Week of Nov 21 </option> </select> <p> <a href="#" title="Next week is available!">Next week</a> now available! </p> <p>Next week's menu arrives in 3 days.</p> </aside> <aside class="navbar-nav"> <nav> <ul> <li> <a href="#" title="Plan Dashboard" class="ico-dashboard"> Plan Dashboard </a> </li> <li> <a href="#" title="Grocery List" class="ico-grocery"> Grocery List </a> </li> <li> <a href="#" title="Weekend Prep" class="ico-weekend-prep"> Weekend Prep </a> </li> </ul> </nav> <hr /> <nav> <ul> <li> <a href="#" title="Recipe Box" class="ico-recipe-box"> Recipe Box </a> </li> <li> <a href="#" title="Settings" class="ico-settings"> Settings </a> </li> <li> <a href="#" title="Help & FAQ" class="ico-help"> Help & FAQ </a> </li> </ul> </nav> <nav> <ul> <li> <a href="#" title="Logout" class="ico-logout"> Logout </a> </li> </ul> </nav> </aside> </div> <footer class="navbar-footer"> <h6>Start eating healthier today:</h6> <button title="Get Full Access">Get Full Access</button> </footer>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js'></script>
</body>
</html>

Menu - Forks Meal Planner - Script Codes CSS Codes

html, body { height: 100%; position: relative;
}
.navbar-area { width: 310px; height: auto; min-height: 100%; background-color: #323439; position: absolute; -webkit-transition: width, .25s, linear, 0s; -moz-transition: width, .25s, linear, 0s; -ms-transition: width, .25s, linear, 0s; -o-transition: width, .25s, linear, 0s; transition: width, .25s, linear, 0s;
}
.navbar-wrapper { padding: 60px 30px 0 30px;
}
.navbar-logo { width: 180px; height: 105px; margin: 0 0 30px 40px; text-indent: -9999px; background-repeat: no-repeat; background-image: url("https://cdn.zeplin.io/55fb0050dc6b2f6940b33a4c/assets/8E352FEF-B982-4B53-9060-653E5D0CF458.png");
}
.navbar-logo a { display: block; width: 100%; height: 100%;
}
.navbar-nav { position: relative;
}
.navbar-nav nav ul { margin: 0;
}
.navbar-nav nav li { margin-bottom: 10px;
}
.navbar-nav nav a { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; color: #757575; padding: 5px; -webkit-transition: color, .3s, linear; -moz-transition: color, .3s, linear; -ms-transition: color, .3s, linear; -o-transition: color, .3s, linear; transition: color, .3s, linear;
}
.navbar-nav nav a:hover { color: #d35b38;
}
.navbar-nav nav a:before { content: ''; width: 35px; height: 30px; margin-right: 15px; display: inline-block; vertical-align: middle; -webkit-transition: background, .25s, ease-in; -moz-transition: background, .25s, ease-in; -ms-transition: background, .25s, ease-in; -o-transition: background, .25s, ease-in; transition: background, .25s, ease-in;
}
.navbar-nav nav:last-child { margin-top: 170px;
}
.navbar-plan { min-height: 120px; margin-bottom: 25px;
}
.navbar-plan p { font-size: 12px; color: #909090; margin-bottom: 10px; font-style: italic;
}
.navbar-plan a { color: #91B570; text-decoration: underline;
}
hr { width: 65%; margin: 30px 0 30px 10px; border: solid 1px #424449;
}
.ico-dashboard:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/EC128104-A043-416D-A71C-57280D4E6E5B.png");
}
.ico-dashboard:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/11E72CC3-0833-4962-A65C-4E15ABC6E7E2.png");
}
.ico-grocery:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/E6A275EB-E295-4C0F-BECE-9518C37F0CC5.png");
}
.ico-grocery:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/152C238F-D5AA-47D9-A95E-355E31AB63CD.png");
}
.ico-weekend-prep:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/354F279C-3CEF-4BC2-9345-D5DDE679F420.png");
}
.ico-weekend-prep:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/52F1DD78-D6E4-4B73-8341-E5CE060ABC15.png");
}
.ico-recipe-box:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/DA58D760-32FE-43FE-AAC3-3F5942E09AFC.png");
}
.ico-recipe-box:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/52EC6CCC-CBAE-4A12-A4BC-40839FCD9A0F.png");
}
.ico-settings:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/D5979051-4AF2-40E5-BA14-C06CF3D0A8BB.png");
}
.ico-settings:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/839EC665-7B4B-455A-BFA3-13287BC82294.png");
}
.ico-help:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/4D98A22F-BB32-4DF1-AA48-C9D0621B5CC3.png");
}
.ico-help:hover:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/66960CCD-E230-4658-B709-1C3E79942DE7.png");
}
.ico-logout:before { background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/E142843F-EAAB-4CA9-AD78-E4789FA74B62.png");
}
.navbar-select { border-radius: 3px; border: solid 1px #2e2e2e; background-color: #4e5057; background-repeat: no-repeat; background-position: 95% 15px; background-size: 13px 8px; background-image: url("https://cdn.zeplin.io/5829fd160863596653838f2a/assets/ED8592C9-A5FC-4CF2-A876-1FAC100C476D.png"); font-size: 15px; font-weight: 500; color: #A2A2A2; cursor: pointer; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.navbar-select:hover { background-color: #2e2e2e; border: solid 1px #2e2e2e;
}
.navbar-footer { text-align: center; background-color: rgba(125, 125, 125, 0.1); margin-top: 40px;
}
.navbar-footer h6 { font-size: 15px; font-weight: 500; color: #a2a2a2; padding: 15px 0; display: block;
}
.navbar-footer button { border-radius: 3px; background-color: #db3f37; font-size: 16px; letter-spacing: 0.4px; color: #ffffff; text-transform: uppercase; -webkit-transition: background-color, .25s, linear, 0s; -moz-transition: background-color, .25s, linear, 0s; -ms-transition: background-color, .25s, linear, 0s; -o-transition: background-color, .25s, linear, 0s; transition: background-color, .25s, linear, 0s;
}
.navbar-footer button:hover { background-color: #A72E28;
}
@media screen and (max-width: 768px) { .navbar-area { width: 100px; } .navbar-wrapper { padding: 40px 10px 0 10px; } .navbar-nav nav li { text-align: center; margin-bottom: 20px; } .navbar-nav nav a { font-size: 15px; } .navbar-nav nav a:before { display: block; margin-left: 15px; } .navbar-logo { background-size: contain; margin-left: 0; width: auto; height: auto; } .navbar-footer button { padding: 30px 10px; }
}
Menu - Forks Meal Planner - Script Codes
Menu - Forks Meal Planner - Script Codes
Home Page Home
Developer Thulio Philipe
Username thulioph
Uploaded January 09, 2023
Rating 3
Size 5,432 Kb
Views 4,048
Do you need developer help for Menu - Forks Meal Planner?

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!

Thulio Philipe (thulioph) Script Codes
Name
Parallax
Select with plugin
Parallax with only CSS
Api notify
Custom Google Maps API
Tilt Effect
Animated paths - Google Maps
CSS Gradient border
Google static map to Base64
Parallax with only CSS3
Create amazing love letters 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!