Mobile Design Pattern // LWD
How do I make an mobile design pattern // lwd?
Here is what a restaurant site might look like using Layered Web Design (LWD). There are no pages, only layers of information. Notice also that the logo is a controller for several items, including going home and the menu.. What is a mobile design pattern // lwd? How do you make a mobile design pattern // lwd? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.
Mobile Design Pattern // LWD Previews
Mobile Design Pattern // LWD - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Design Pattern // LWD</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Yrsa" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <div class="logo"><a href="#"> <img src="http://www.eatlogos.com/alphabet_logos/png/vector_n_s_letter_logo.png"/></a></div> <nav class="menu"> <ul> <li> <a class="menu__link" href="#" data-link="link1"><i class="fa fa-info-circle" aria-hidden="true"></i></a></li> <li> <a class="menu__link" href="#" data-link="link2"><i class="fa fa-list" aria-hidden="true"></i></a></li> <li> <a class="menu__link" href="#" data-link="link3"><i class="fa fa-envelope" aria-hidden="true"></i></a></li> </ul> </nav>
</header>
<main> <aside class="sidebar"> <ul> <li> <a href="">Home</a></li> <li> <a href="#">Link 2</a></li> <li> <a href="#">Link 3</a></li> <li> <a href="#">Link 4</a></li> <li> <a href="#">Link 5</a></li> <li> <a href="#">Link 6</a></li> </ul> </aside> <!-- visible on page load--> <section class="main-content"> <h1>An eating experience like no other</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsum quidem dolorum aliquam beatae odit non ad temporibus vero quod soluta iusto in nesciunt, repellendus dignissimos eum asperiores ipsam minus animi quam maiores tempora. Corporis ipsum veniam, libero, exercitationem, quod ratione dicta minus tempora aut soluta eveniet nihil voluptas aperiam.</p> <button class="specials">Today's specials</button> <!-- hidden content--> <section class="link__content" id="link1"> <div class="close"> <p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> <article class="page__content"> <h1>About Us</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> </article> </section> <section class="link__content" id="link2"> <div class="section__menu"> <nav> <ul> <li> <a href="#one">Link</a></li> <li> <a href="#two">Link</a></li> <li> <a href="#three">Link</a></li> <li> <a href="#four">Link</a></li> </ul> </nav> <div class="close"> <p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> </div> <article class="page__content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <h3 id="one">Heading One</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <h3 id="two">Heading Two</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <h3 id="three">Heading Three</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <h3 id="four">Heading Four</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> </article> </section> <section class="link__content" id="link3"> <div class="close"> <p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p> </div> <article class="page__content"> <h1>Contact</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p> </article> </section> </section>
</main>
<aside class="todays-specials"> <div class="close"> <p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p> </div><small>1/1/2017</small> <h2>Today's Specials</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ratione, aspernatur distinctio qui similique eaque modi perspiciatis magnam, officiis error consectetur perferendis reiciendis placeat earum sequi aperiam cumque sed ab nesciunt at, non molestias dolorem recusandae! Vero distinctio perferendis accusantium nisi iste pariatur explicabo voluptatem minus at. Obcaecati assumenda voluptates, voluptas itaque similique modi esse. Cupiditate aliquam esse sed tempore voluptates, dignissimos at non perspiciatis, repellat blanditiis ipsam! Laudantium ex temporibus nostrum a vel beatae nesciunt alias, est, aliquam esse quas possimus minima reiciendis, suscipit quis illo magnam nobis eos fuga odit ad assumenda rerum ab voluptatum? Atque, vel, et!</p>
</aside> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mobile Design Pattern // LWD - Script Codes CSS Codes
html { height: inherit;
}
body { margin: 0; position: relative; overflow: hidden; font-family: "Yrsa", serif; font-size: 18px; line-height: 1.4; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/city-restaurant-table-pavement.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh;
}
h1,
h2,
h3,
h4 { font-family: "Source Sans Pro", sans-serif; text-transform: uppercase;
}
button { background: transparent; border: 1px solid white; padding: 1rem 2rem; border-radius: 50px; color: white; text-transform: uppercase; cursor: pointer; letter-spacing: 0.5px;
}
button:hover { background: white; color: #444;
}
.todays-specials { display: none; background-color: white; font-size: 0.9rem; width: 80%; margin: auto; position: fixed; top: 2rem; left: 50%; transform: translateX(-50%); padding: 1rem; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); z-index: 200;
}
.todays-specials h2 { margin-top: 0;
}
.todays-specials .close { position: relative; margin: -1rem 0;
}
.todays-specials .close p { padding: 0; margin: 0;
}
.todays-specials .close a { color: #444;
}
.todays-specials .close a:hover { color: rgba(68, 68, 68, 0.8);
}
.close { text-align: right; position: absolute; top: 1.1rem; right: 0;
}
.close a { color: white; font-size: 1.2rem;
}
.close a:hover { color: rgba(255, 255, 255, 0.8);
}
header { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 5px; background: #fff; position: relative; z-index: 10;
}
header img { border-radius: 50%; width: 60px;
}
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center;
}
.menu ul li { margin: 0 1.5rem; font-size: 1.5rem;
}
.menu ul li a { color: rgba(170, 170, 170, 0.7);
}
.menu ul li a:hover { color: #aaa;
}
main .sidebar { display: none; position: absolute; left: 0; flex: 1 0 5rem; background: #eee; box-shadow: 1px 10px 10px -8px rgba(0, 0, 0, 0.2); width: 100%; z-index: 50; font-family: "Source Sans Pro", sans-serif;
}
main .sidebar ul { list-style: none; padding: 1rem; font-size: 1rem;
}
main .sidebar ul li { padding: 0.5rem 0;
}
main .sidebar ul a { color: #444;
}
.main-content { padding: 1rem; color: white;
}
.link__content { position: absolute; top: 3rem; left: 100%; width: 100%; padding: 1rem 0; height: 91vh; overflow: auto;
}
.link__content h1,
.link__content h3 { padding: 0 1.85rem;
}
.link__content p { padding: 0 2rem;
}
.slide-left { transform: translateX(-100%); animation: slideIn 500ms;
}
.slide-right { transform: translateX(100%); animation: slideOut 500ms;
}
@keyframes slideIn { 0%, 100% { transform: translateX(0); opacity: 0; } 100% { transform: translateX(-100%); opacity: 1; }
}
@keyframes slideOut { 0%, 100% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(0); opacity: 0; }
}
#link1 { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/Four_Seasons_Restaurant-_The_Brilliant_Pool_Room.jpg); background-size: cover; background-position: center; color: white;
}
#link2 { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/Caneel_Bay_Equator_Restaurant_by_Sugar_Mill_Ruins_at_night.jpg); background-size: cover; background-position: center; color: white;
}
#link3 { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/food-restaurant-hand-dinner.jpg); background-size: cover; background-position: center; color: white;
}
.section__menu { font-family: "Source Sans Pro", sans-serif;
}
.section__menu nav { border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.section__menu nav ul { list-style: none; padding: 5px 0 0; margin-left: 1.8rem; display: flex;
}
.section__menu nav ul li { margin-right: 1rem;
}
.section__menu nav ul li a { color: white; text-decoration: none; text-transform: uppercase;
}
.section__menu nav ul li a:hover { color: rgba(255, 255, 255, 0.8);
}
.page__content { padding-top: 1rem;
}
.page__content h3 { padding-top: 2rem;
}
Mobile Design Pattern // LWD - Script Codes JS Codes
$('.link__content').hide();
$('.logo').on('click', function() { $('.sidebar').slideToggle( 200 );
});
$('.menu__link').on('click', function(e) { var linkID = $(this).attr('data-link'); $('.sidebar').hide(); $('.link__content').hide().removeClass('slide-left'); $('#' + linkID).show().addClass('slide-left'); $('.link__content .close').on('click', function() { $('.link__content').hide().removeClass('slide-left'); });
});
$('.specials').on('click', function() { $('.todays-specials').fadeIn( 300 );
});
$('.todays-specials .close').on('click', function() { $('.todays-specials').fadeOut( 300 ); });
| Developer | Brian Haferkamp |
| Username | brianhaferkamp |
| Uploaded | October 10, 2022 |
| Rating | 3 |
| Size | 7,882 Kb |
| Views | 20,240 |
Do you need developer help for Mobile Design Pattern // LWD?
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!
Brian Haferkamp (brianhaferkamp) Script Codes
| Name | Size |
| Emoji-Driven Survey | 5,710 Kb |
| Travel Blog Design with Sticky Nav and Sidebar | 8,383 Kb |
| Full-Width Hero with Image Using Flexbox | 2,459 Kb |
| System Fonts Can Be Beautiful | 7,239 Kb |
| 2-Up Magazine Layout | 8,250 Kb |
| Creating a CSS Flexbox Grid | 2,022 Kb |
| Brutal, Bro | 6,575 Kb |
| Follow Your Heart | 4,964 Kb |
| Brutalism Web Design School | 7,231 Kb |
| Gradient Transitions Between Sections | 3,329 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| Filtering with shuffle.js | Deyand | 2,712 Kb |
| 700 Synapses Per Second | Silentkrange | 2,138 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| Save for later... | Victorfreire | 1,359 Kb |
| CSS Parent Selector | Tomhodgins | 2,143 Kb |
| Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
| Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
| CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!