Recipe site layout

Developer
Matheus Silva
Size
5,896 Kb
Views
12,144
  1. Recipe site layout Previews
  2. Recipe site layout HTML Codes
  3. Recipe site layout CSS Codes
  4. Recipe site layout JS Codes

How do I make an recipe site layout?

Tree columns layout no javascript required rounded profile picture borders. What is a recipe site layout? How do you make a recipe site layout? This script and codes were developed by Matheus Silva on 20 October 2022, Thursday.

Recipe site layout Previews
IQ Test

Recipe site layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>recipe site layout</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ object { display: none;
}
html, body { height: 100%; width: 100%; margin: 0; padding: 0;
}
body { background-color: white; color: #3b4344; font-family: 'Montserrat', sans-serif; background-image: url(http://assets.mugfoundation.com/images/textures/noisy/noisy1px.png);
}
h1, h2, h3 { margin: 0; padding: 0;
}
ul, p { margin: 0; padding: 0 0 1em 0;
}
h1, h2 { color: #f12f5d;
}
h1 { font-size: 137.5%;
}
h2 { font-size: 125%;
}
h3 { font-size: 100%;
}
a:link, a:visited { color: rgba(255, 47, 93, 0.8);
}
a:hover, a:active { color: #f12f5d;
}
.nav { list-style-type: none; padding: 0; border-top: 1.5px solid #3b4344;
}
.nav a:link, .nav a:visited { text-decoration: none; display: block; border-top: 1px solid #e8f3f8; padding: 0.5em 0 0.5em 0; color: #4294b6;
}
.nav a:hover, .nav a:active { background-color: rgba(232, 243, 248, 0.3);
}
.infobox { border-top: 1.5px solid #3b4344;
}
.infobox .avatar, .infobox .avatar img { width: 200px; height: 200px; border-radius: 50%;
}
.infobox p { text-align: center; font-size: 120%;
}
.infobox .title { text-align: center; font-size: 2em;
}
.infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px;
}
.social { margin-top: 2%; border-top: 1.5px solid #3b4344;
}
.social ul { list-style-type: none; padding: 0;
}
.wrapper { width: 100%; margin: 0 auto 0 auto;
}
.header { text-align: right; padding: 2.5% 0 0 0; border-bottom: 8px solid #3b4344; margin-bottom: 2%;
}
.header h1 { font-size: 200%; margin-bottom: 2%; color: #3b4344;
}
.header h1 span { font-weight: bold; color: #f12f5d;
}
.main { position: relative;
}
.article { padding-left: 1.7em; position: absolute; left: 20%; top: 0; width: 48%; margin-left: 1.5%;
}
.article .thumbnail, .article .thumbnail img { width: 300px; height: 300px; border-radius: 50%;
}
.right { width: 25%; position: absolute; right: 0; top: 0; border-left: 1px solid #3b4344; padding-left: 1%;
}
.footer { margin-top: 2%; border-top: 1.5px solid #3b4344;
}
.footer a:link, .footer a:visited { color: rgba(255, 47, 93, 0.8);
}
.footer a:hover, .footer a:active { color: #f12f5d;
}
.footer ul { list-style-type: none; padding: 0;
}
.footer p { font-size: 120%; padding-bottom: 1%;
}
.left { position: absolute; left: 0; top: 0; width: 20%; border-right: 1.5px solid #3b4344; margin-right: 1em; padding-right: 1%;
}
@media only screen and (min-width: 768px) { .infobox .avatar, .infobox .avatar img { width: 50px; height: 50px; border-radius: 50%; } .infobox p { text-align: center; font-size: 100%; } .infobox .title { text-align: center; font-size: 110%; } .infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px; } .article .thumbnail, .article .thumbnail img { width: 100px; height: 100px; } .right { witdth: 20%; }
}
@media only screen and (min-width: 992px) { .infobox .avatar, .infobox .avatar img { width: 200px; height: 200px; border-radius: 50%; } .infobox p { text-align: center; font-size: 100%; } .infobox .title { text-align: center; font-size: 110%; } .infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px; } .article .thumbnail, .article .thumbnail img { width: 300px; height: 300px; } .right { witdth: 30%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="header"> <h1><span>Recipe</span>Magic.com</h1> </div> <div class="main"> <div class="left"> <div class="facts infobox"> <span class="title">Recipe info</span> <p>Author:</p> <p><span class="avatar"><a href=#><img src="http://assets.mugfoundation.com/images/user_zone/default_profile_pic.png" alt="avatar" /></a></span></p> <p> <a href="#">Guest</a> </p> <p> RecipeID:<br><a href="#">0000</a> </p> <span class="title">Author comments</span> <p class="quote"> <i class="fa fa-quote-left"></i> lorem ipsum <i class="fa fa-quote-right"></i> </p> </div> </div> <div class="article"> <p class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/chili.jpg" alt="avatar" /></p> <h1>Chili</h1> <p>My grandpappy used to make this chili over the campfire under the Texas stars.</p> <h2>Ingredients:</h2> <ul class="ingredients"> <li>1lb ground bison</li> <li>1 cup diced onion</li> <li>4 diced jalepeños</li> <li>1 cup black beans</li> <li>1 cup great northern beans</li> <li>1 cup kidney beans</li> <li>1 cup pinto beans</li> <li>4 cloves garlic</li> <li>2 tbsp mexican chili powder</li> <li>2 tsp salt</li> <li>2 tsp ground pepper</li> <li>1 tsp cayenne</li> <li>28oz smushed tomatoes</li> <li>3 cups beef broth</li> </ul> <h2>Instructions</h2> <p> Get your filthiest campfire-scorched Dutch oven over the fire the best you can situate it. Brown the bison. Add the diced onion and spices, sautee until soft. Add tomatoes and broth and bring to a simmer for 40 minutes. Add beans and cook another 30 minutes. Serve with Tabasco and a giant spoon. <br> Enjoy </p> </div> <div class="right"> <ul class="nav"> <li><h2>more from this site</h2></li> <li><a href="#"><i class="fa fa-home"></i> RecipeMagic.com homepage</a></li> <li><a href="#"><i class="fa fa-cutlery"></i> More garlic recipes</a></li> <li><a href="#"><i class="fa fa-university"></i> Cookery school</a></li> </ul> <div class="social"> <h2>Social networks</h2> <ul> <li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li> <li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li> <li><a href="#"><i class="fa fa-rss"></i> RSS</a></li> </ul> </div> <div class="footer"> <h2>Info about us</h2> <ul> <li><a href="#">Contact us</a></li> <li><a href="#">About us</a></li> <li><a href="#">Recipy index</a></li> <p>Some address</p> <p>RecipeMagic.com, LLC. &copy 2014</p> </ul> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Recipe site layout - Script Codes CSS Codes

object { display: none;
}
html, body { height: 100%; width: 100%; margin: 0; padding: 0;
}
body { background-color: white; color: #3b4344; font-family: 'Montserrat', sans-serif; background-image: url(http://assets.mugfoundation.com/images/textures/noisy/noisy1px.png);
}
h1, h2, h3 { margin: 0; padding: 0;
}
ul, p { margin: 0; padding: 0 0 1em 0;
}
h1, h2 { color: #f12f5d;
}
h1 { font-size: 137.5%;
}
h2 { font-size: 125%;
}
h3 { font-size: 100%;
}
a:link, a:visited { color: rgba(255, 47, 93, 0.8);
}
a:hover, a:active { color: #f12f5d;
}
.nav { list-style-type: none; padding: 0; border-top: 1.5px solid #3b4344;
}
.nav a:link, .nav a:visited { text-decoration: none; display: block; border-top: 1px solid #e8f3f8; padding: 0.5em 0 0.5em 0; color: #4294b6;
}
.nav a:hover, .nav a:active { background-color: rgba(232, 243, 248, 0.3);
}
.infobox { border-top: 1.5px solid #3b4344;
}
.infobox .avatar, .infobox .avatar img { width: 200px; height: 200px; border-radius: 50%;
}
.infobox p { text-align: center; font-size: 120%;
}
.infobox .title { text-align: center; font-size: 2em;
}
.infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px;
}
.social { margin-top: 2%; border-top: 1.5px solid #3b4344;
}
.social ul { list-style-type: none; padding: 0;
}
.wrapper { width: 100%; margin: 0 auto 0 auto;
}
.header { text-align: right; padding: 2.5% 0 0 0; border-bottom: 8px solid #3b4344; margin-bottom: 2%;
}
.header h1 { font-size: 200%; margin-bottom: 2%; color: #3b4344;
}
.header h1 span { font-weight: bold; color: #f12f5d;
}
.main { position: relative;
}
.article { padding-left: 1.7em; position: absolute; left: 20%; top: 0; width: 48%; margin-left: 1.5%;
}
.article .thumbnail, .article .thumbnail img { width: 300px; height: 300px; border-radius: 50%;
}
.right { width: 25%; position: absolute; right: 0; top: 0; border-left: 1px solid #3b4344; padding-left: 1%;
}
.footer { margin-top: 2%; border-top: 1.5px solid #3b4344;
}
.footer a:link, .footer a:visited { color: rgba(255, 47, 93, 0.8);
}
.footer a:hover, .footer a:active { color: #f12f5d;
}
.footer ul { list-style-type: none; padding: 0;
}
.footer p { font-size: 120%; padding-bottom: 1%;
}
.left { position: absolute; left: 0; top: 0; width: 20%; border-right: 1.5px solid #3b4344; margin-right: 1em; padding-right: 1%;
}
@media only screen and (min-width: 768px) { .infobox .avatar, .infobox .avatar img { width: 50px; height: 50px; border-radius: 50%; } .infobox p { text-align: center; font-size: 100%; } .infobox .title { text-align: center; font-size: 110%; } .infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px; } .article .thumbnail, .article .thumbnail img { width: 100px; height: 100px; } .right { witdth: 20%; }
}
@media only screen and (min-width: 992px) { .infobox .avatar, .infobox .avatar img { width: 200px; height: 200px; border-radius: 50%; } .infobox p { text-align: center; font-size: 100%; } .infobox .title { text-align: center; font-size: 110%; } .infobox .quote { background-color: #eeeeee; padding: 5px; font-size: 130%; margin-top: 10px; margin-bottom: 10px; } .article .thumbnail, .article .thumbnail img { width: 300px; height: 300px; } .right { witdth: 30%; }
}

Recipe site layout - Script Codes JS Codes

(function() {
}).call(this);
Recipe site layout - Script Codes
Recipe site layout - Script Codes
Home Page Home
Developer Matheus Silva
Username matheusxaviersi
Uploaded October 20, 2022
Rating 3
Size 5,896 Kb
Views 12,144
Do you need developer help for Recipe site layout?

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!

Matheus Silva (matheusxaviersi) Script Codes
Name
Menu concept
Simple syntax higlighter
Color switching button
Server satus indicator
Simple yet functional
Mug foundation-pre loader
Markup playground
Sample page
Login page
Off canvas 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!