Noodles Landing Page 1.0

Developer
Lachlan Campbell
Size
5,017 Kb
Views
22,264
  1. Noodles Landing Page 1.0 Previews
  2. Noodles Landing Page 1.0 HTML Codes
  3. Noodles Landing Page 1.0 CSS Codes

How do I make an noodles landing page 1.0?

The first version of the Noodles Homepage.. What is a noodles landing page 1.0? How do you make a noodles landing page 1.0? This script and codes were developed by Lachlan Campbell on 24 September 2022, Saturday.

Noodles Landing Page 1.0 Previews
IQ Test

Noodles Landing Page 1.0 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Noodles Landing Page 1.0</title> <link rel='stylesheet prefetch' href='https://brick.a.ssl.fastly.net/Roboto:300,400'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<header> <section> <h1>Cook better with Noodles.</h1> <h3>A simple app to help you with your cooking.</h3> <a href="http://app.getnoodl.es/sign_up" class="btn-lg">Sign Up</a> </section>
</header>
<a class="paper-btn paper-arrow" href="#main"> <img src="https://www.google.com/design/images/arrow-down.png">
</a>
<article id="main"> <p class="intro">Noodles is a simple place for all your recipes. Add your favorite chocolate cake to Noodles with a few keystrokes, then pull it up in the kitchen to make an awesome birthday cake. The app is uncomplicated and free to use. It works from your computer, your tablet, your phone, or any other device you have...get started and cook better.</p>
<!-- <a href="http://app.getnoodl.es/sign_up" class="btn">Sign Up</a> <br>--> <section> <header> <div class="paper-btn feature-icon"> <img src="https://google.github.io/material-design-icons/file/svg/ic_cloud_done_24px.svg"> </div> <h2>Synced and Accessible</h2> </header> <p>Your recipes are automatically and invisbly synced through Noodles — so you can access your recipes in Noodles from any device, at any time.</p> </section> <section> <header> <div class="paper-btn feature-icon"> <img src="https://google.github.io/material-design-icons/maps/svg/ic_restaurant_menu_24px.svg"> </div> <h2>Cook Mode</h2> </header> <p>Cook Mode is the best way to cook with your recipes in the kitchen. Only what you really need is displayed on your screen, and big controls let you easily navigate.</p> </section> <section> <header> <div class="paper-btn feature-icon"> <img src="https://google.github.io/material-design-icons/social/svg/ic_share_24px.svg"> </div> <h2>Share Recipes</h2> </header> <p>Any recipe you have in Noodles can be shared. You get a public link that anyone can view — show your friends on Facebook, send it to your co-workers over Slack, or share the link on your food blog. Shared recipes can be saved into someone else's Noodles.</p> </section> <hr> <section> <h2>Noodles is free to use, so try it out.</h2> <p>You can upgrade later for extra awesome features, but you can use Noodles completely for free.</p> <a href="http://app.getnoodl.es/sign_up" class="btn full">Sign Up</a> </section>
</article>
</body>
</html>

Noodles Landing Page 1.0 - Script Codes CSS Codes

body { font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif; margin: 0;
}
h2 { color: #757575; font-weight: 300;
}
hr { border: 0; border-bottom: 1px solid #e8e8e8; margin: 2em auto;
}
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12);
}
body > header { text-align: center; box-sizing: border-box; background: url("https://cdn-assets-hall-com.s3.amazonaws.com/production/private/halls/5367866d3d97d232e40000d2/user_uploaded_files/2014-11-09_09.04.05-1.jpg?AWSAccessKeyId=17VVCSSS3H6YGDY9H3G2&Expires=1448415583&Signature=VlpjQd8pRO3rNT7bQP8kBETxvww%3D&response-content-type=image%2Fjpeg") no-repeat; background-size: auto; background-position: 45% 55%; box-shadow: inset 0 -6em 6em rgba(0, 0, 0, 0.5);
}
body > header h1, body > header h3 { color: white; font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300;
}
body > header h1 { font-size: 50px; margin: 0.5em 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
body > header h3 { font-size: 28px; margin-bottom: 2em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
body > header section { padding: 10em 0;
}
.btn, .btn-lg { font: 16px Roboto, "Helvetica Neue", Helvetica, sans-serif; padding: 6px 12px; background: #FF6D00; color: white; -webkit-appearance: none; text-decoration: none; border: 0; border-radius: 5px; text-align: center; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}
.btn:hover, .btn-lg:hover { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.23);
}
.btn:active, .btn-lg:active, .btn:focus, .btn-lg:focus { box-shadow: 0 10px 8px rgba(0, 0, 0, 0.22); outline: 0;
}
.btn:hover, .btn-lg:hover, .btn:visited, .btn-lg:visited, .btn:visited:hover, .btn-lg:visited:hover { color: white;
}
.btn-lg { font-size: 21px; padding: 10px 20px; vertical-align: text-top; text-transform: uppercase;
}
.paper-arrow { background-color: #C6FF00; position: relative; top: -25px;
}
.paper-arrow img { width: 50px; height: 50px;
}
.paper-btn { margin: 0 auto; display: block; border-radius: 50%; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16); height: 50px; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); width: 50px;
}
.paper-btn img { opacity: 0.5;
}
article { width: 75%; margin: auto;
}
article section { display: block; margin: auto;
}
article section p { color: #455a64; line-height: 1.8;
}
.intro { color: #757575; font: 400 21px/1.8 Roboto, "Helvetica Neue", Helvetica, sans-serif; margin-top: 0;
}
.feature-icon { display: inline-block; background-color: #00e5ff;
}
.feature-icon img { opacity: .5; position: relative; top: 12px; left: 12px;
}
.feature-icon ~ h2 { display: inline-block; margin-left: 16px; position: relative; top: 6px;
}
.full { display: block; margin-bottom: 2em;
}
@media (max-width: 480px) { body > header { background-size: 200%; } body > header h1 { font-size: 28px; } body > header h3 { font-size: 21px; } body > header section { padding: 4em 1em; } .intro { font-size: 16px; } article section { width: 100%; } .feature-icon { display: block; margin: 1em auto 0 auto; } .feature-icon ~ h2 { display: block; text-align: center; top: 0; margin: 15px 0 0 0; } .full { padding: 0.66em 0; }
}
Noodles Landing Page 1.0 - Script Codes
Noodles Landing Page 1.0 - Script Codes
Home Page Home
Developer Lachlan Campbell
Username lachlanjc
Uploaded September 24, 2022
Rating 3
Size 5,017 Kb
Views 22,264
Do you need developer help for Noodles Landing Page 1.0?

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!

Lachlan Campbell (lachlanjc) Script Codes
Name
Noodles Embed
Spinner
Drawing a Terminal with CSS
Recipe - Banana Walnut Cake
A Pen by Lachlan Campbell
Noodles Newsletter Template
Basecamp 3 Document
Alan Turing
Pure CSS Tabs
Action Menu
Create amazing SEO content 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!