Recipe site layout
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 - 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. © 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);
Developer | Matheus Silva |
Username | matheusxaviersi |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 5,896 Kb |
Views | 12,144 |
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!
Name | Size |
Recipe site layout | 5,896 Kb |
Markup playground | 2,492 Kb |
Server satus indicator | 2,289 Kb |
Off canvas menu | 7,017 Kb |
Rapier script playground | 2,937 Kb |
Css3 loaders 4rd revision | 3,307 Kb |
A Pen by Matheus Silva | 1,675 Kb |
Menu concept | 3,451 Kb |
Color switching button | 2,764 Kb |
Simple syntax higlighter | 3,865 Kb |
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!
Name | Username | Size |
Knob rotation | Alemesre | 2,122 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Calculator | Rzencoder | 4,572 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Mario | Takaneichinose | 3,902 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
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!