Food Widget by Andreea Nicolaescu

Developer
Andres
Size
5,085 Kb
Views
28,336
  1. Food Widget by Andreea Nicolaescu Previews
  2. Food Widget by Andreea Nicolaescu HTML Codes
  3. Food Widget by Andreea Nicolaescu CSS Codes
  4. Food Widget by Andreea Nicolaescu JS Codes

How do I make an food widget by andreea nicolaescu?

Coded up an awesome dribbble by Andreea Nicolaescu http://dribbble.com/shots/1410207-Food-Widget. What is a food widget by andreea nicolaescu? How do you make a food widget by andreea nicolaescu? This script and codes were developed by Andres on 21 August 2022, Sunday.

Food Widget by Andreea Nicolaescu Previews
IQ Test

Food Widget by Andreea Nicolaescu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Food Widget by Andreea Nicolaescu</title> <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! */ .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://s1.cdn.ryanboylett.co.uk/images/wallpapers/002.jpg); background-size: 100% 100% }
.food { position: absolute !important; top: 50%; left: 50%; margin: -197px 0 0 -310px }
.food
{ position: relative; width: 620px; height: 394px; background: #FFF; border-radius: 2px; box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
}
.food > .cover
{ position: relative; height: 260px; background: transparent center no-repeat; background-size: 100% auto; border-radius: 2px 2px 0 0;
}
.food > .cover > label
{ position: absolute; top: 22px; left: -33px; height: 33px; padding: 0 30px 0 63px; line-height: 33px; vertical-align: middle; font-family: sans-serif; font-size: 13px; text-transform: uppercase; color: #FFF; text-shadow: 0 1px 2px #000; background: rgba(136, 86, 168, .6);
}
.food > .cover > label > i
{ position: absolute; top: 0; left: 0;
}
.food > .cover > label > i > svg
{ margin: 8px;
}
.food > .cover > .download
{ display: block; position: absolute; bottom: 20px; right: 20px; width: 47px; height: 47px; background: rgba(51, 193, 210, .6); border-radius: 100%;
}
.food > .cover > .download:hover { background: #33C1D2 }
.food > .cover > .download > svg
{ margin: 12px 10px 0;
}
.food > .info
{ position: relative; height: 134px; overflow: hidden; border-radius: 0 0 2px 2px;
}
.food > .info > .recipe
{ display: block; position: absolute; top: 0; left: 0; width: 134px; height: 134px; background: #8856A8; font-family: sans-serif; font-size: 14px; color: #FFF; text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 0 0 0 2px;
}
.food > .info > .recipe:hover { background: #9967B9 }
.food > .info > .recipe > i
{ display: block; margin: 38px 0 15px;
}
.food > .info > .content
{ position: absolute; top: 20px; right: 20px; bottom: 20px; left: 154px; font-family: sans-serif; font-size: 14px; color: #888;
}
.food > .info > .content strong { font-weight: normal; color: #333 }
.food > .info > .content .pad-right { padding-right: 20px }
.food > .info > .content .border-right { border-right: 1px solid #D9D9D9 }
.food > .info > .content .consumers img, .food > .info > .content .consumers span { display: inline-block; width: 32px; height: 32px; margin: 0 2px 0 0; line-height: 32px; vertical-align: middle; border-radius: 100% }
.food > .info > .content .consumers span { margin: 0 }
.food > .info > .content h1
{ margin: 0 0 10px; font-size: 26px; font-weight: normal; color: #333;
}
.food > .info > .content .stars, .food > .info > .content .stars > em
{ display: block; width: 99px; height: 18px; margin: 0 auto 7px; text-align: left; background: url(http://s1.cdn.ryanboylett.co.uk/generic/image_png_00004.png);
}
.food > .info > .content .stars > em
{ width: 99px; height: 18px; margin: 0; background: url(http://s1.cdn.ryanboylett.co.uk/generic/image_png_00004.png); background-position: 0 -18px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Hello there! Go check out this wonderful dribbble by Andreea Nicolaescu! http://dribbble.com/shots/1410207-Food-Widget
-->
<div class="wrapper"> <div class="food"> <div class="cover" style="background-image: url(http://1.bp.blogspot.com/-Y8H-0DWygcI/Uulo6hMuUNI/AAAAAAAALYA/xRbwoLi0qGc/s1600/unsplash_52d5bbef8a613_1.JPG)"> <label> <i> <svg x="0px" y="0px" width="17px" height="17px"
> <g> <path d="M 7 1 C 7 1.5523 7.6716 2 8.5 2 C 9.3284 2 10 1.5523 10 1 C 10 0.4477 9.3284 0 8.5 0 C 7.6716 0 7 0.4477 7 1 ZM 7 2 C 7 2 0.6875 2.9375 0 7 C 0 7 -0.1875 9.6875 3 11 C 3 11 4.6875 10.9375 6 9 C 6 9 8.3125 12.8125 11 9 C 11 9 12.1875 10.875 14 11 C 14 11 16.75 10.0625 17 7 C 17 7 16.375 3 10.0625 1.9375 C 10.0625 1.9375 8.5 4.25 7 2 ZM 1 11 L 3 17 L 14 17 L 16 11 C 16 11 13.125 13 11 11 C 11 11 8.875 13.375 6 11 C 6 11 3 13.125 1 11 Z" fill="#ffffff"/> </g> </svg> </i> <font>Macarons</font> </label> <a href="#" class="download"> <svg x="0px" y="0px" width="27px" height="22px"
> <g> <path d="M 12.5625 0 C 12.0102 0 11.5625 0.4477 11.5625 1 L 11.565 8.69 L 9.0625 8.6875 L 12 16 L 14 16 L 17.0625 8.6875 L 14.5 8.69 L 14.5 1 C 14.5 0.4477 14.0523 0 13.5 0 L 12.5625 0 ZM 1 19 L 1 14 L 0 14 L 0 19 C 0 20.6569 1.3431 22 3 22 L 24 22 C 25.6569 22 27 20.6569 27 19 L 27 14 L 26 14 L 26 19 C 26 20.1046 25.1046 21 24 21 L 3 21 C 1.8954 21 1 20.1046 1 19 Z" fill="#ffffff"/> </g> </svg> </a> </div> <div class="info"> <a href="#" class="recipe"> <i> <svg x="0px" y="0px" width="26px" height="28px"
> <g> <path d="M 8.5 20 L 8.5 21 L 17.5 21 L 17.5 20 L 8.5 20 ZM 8.5 16 L 8.5 17 L 17.5 17 L 17.5 16 L 8.5 16 ZM 8.5 12 L 8.5 13 L 17.5 13 L 17.5 12 L 8.5 12 ZM 20 0 C 19.4477 0 19 0.4477 19 1 L 19 6 C 19 6.5523 19.4477 7 20 7 C 20.5523 7 21 6.5523 21 6 L 21 1 C 21 0.4477 20.5523 0 20 0 ZM 13 0 C 12.4477 0 12 0.4477 12 1 L 12 6 C 12 6.5523 12.4477 7 13 7 C 13.5523 7 14 6.5523 14 6 L 14 1 C 14 0.4477 13.5523 0 13 0 ZM 6 0 C 5.4477 0 5 0.4477 5 1 L 5 6 C 5 6.5523 5.4477 7 6 7 C 6.5523 7 7 6.5523 7 6 L 7 1 C 7 0.4477 6.5523 0 6 0 ZM 15 4 L 18 4 L 18 3 L 15 3 L 15 4 ZM 8 4 L 11 4 L 11 3 L 8 3 L 8 4 ZM 3 4 L 4 4 L 4 3 L 3 3 C 1.3431 3 0 4.3431 0 6 L 0 25 C 0 26.6569 1.3431 28 3 28 L 23 28 C 24.6569 28 26 26.6569 26 25 L 26 6 C 26 4.3431 24.6569 3 23 3 L 22 3 L 22 4 L 23 4 C 24.1046 4 25 4.8954 25 6 L 25 25 C 25 26.1046 24.1046 27 23 27 L 3 27 C 1.8954 27 1 26.1046 1 25 L 1 6 C 1 4.8954 1.8954 4 3 4 Z" fill="#ffffff"/> </g> </svg> </i> <font>Details</font> </a> <div class="content"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="middle" class="pad-right"><strong>Ingredients:</strong></td> <td align="left" valign="middle">sugar, egg whites, butter, salt cappuccino, cinnamon.</td> <td width="20" rowspan="2" class="border-right">&nbsp;</td> <td width="140" rowspan="2" align="center" valign="middle"> <h1>9.75</h1> <span class="stars"> <em style="width: 91%"></em> </span><br /> <small>(320 ratings)</small> </td> </tr> <tr> <td align="left" valign="middle" class="pad-right"><strong>Consumers:</strong></td> <td align="left" valign="middle" class="consumers"> <img src="http://d13yacurqjgara.cloudfront.net/users/17164/avatars/small/img.jpg?1391351372" /> <img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/105584/profile/profile-80_2.jpg" /> <img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/57185/profile/profile-80_3.jpg" /> <img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/profile/profile-80_21.jpg" /> <span>(+20)</span> </td> </tr> </table> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Food Widget by Andreea Nicolaescu - Script Codes CSS Codes

.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(http://s1.cdn.ryanboylett.co.uk/images/wallpapers/002.jpg); background-size: 100% 100% }
.food { position: absolute !important; top: 50%; left: 50%; margin: -197px 0 0 -310px }
.food
{ position: relative; width: 620px; height: 394px; background: #FFF; border-radius: 2px; box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
}
.food > .cover
{ position: relative; height: 260px; background: transparent center no-repeat; background-size: 100% auto; border-radius: 2px 2px 0 0;
}
.food > .cover > label
{ position: absolute; top: 22px; left: -33px; height: 33px; padding: 0 30px 0 63px; line-height: 33px; vertical-align: middle; font-family: sans-serif; font-size: 13px; text-transform: uppercase; color: #FFF; text-shadow: 0 1px 2px #000; background: rgba(136, 86, 168, .6);
}
.food > .cover > label > i
{ position: absolute; top: 0; left: 0;
}
.food > .cover > label > i > svg
{ margin: 8px;
}
.food > .cover > .download
{ display: block; position: absolute; bottom: 20px; right: 20px; width: 47px; height: 47px; background: rgba(51, 193, 210, .6); border-radius: 100%;
}
.food > .cover > .download:hover { background: #33C1D2 }
.food > .cover > .download > svg
{ margin: 12px 10px 0;
}
.food > .info
{ position: relative; height: 134px; overflow: hidden; border-radius: 0 0 2px 2px;
}
.food > .info > .recipe
{ display: block; position: absolute; top: 0; left: 0; width: 134px; height: 134px; background: #8856A8; font-family: sans-serif; font-size: 14px; color: #FFF; text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 0 0 0 2px;
}
.food > .info > .recipe:hover { background: #9967B9 }
.food > .info > .recipe > i
{ display: block; margin: 38px 0 15px;
}
.food > .info > .content
{ position: absolute; top: 20px; right: 20px; bottom: 20px; left: 154px; font-family: sans-serif; font-size: 14px; color: #888;
}
.food > .info > .content strong { font-weight: normal; color: #333 }
.food > .info > .content .pad-right { padding-right: 20px }
.food > .info > .content .border-right { border-right: 1px solid #D9D9D9 }
.food > .info > .content .consumers img, .food > .info > .content .consumers span { display: inline-block; width: 32px; height: 32px; margin: 0 2px 0 0; line-height: 32px; vertical-align: middle; border-radius: 100% }
.food > .info > .content .consumers span { margin: 0 }
.food > .info > .content h1
{ margin: 0 0 10px; font-size: 26px; font-weight: normal; color: #333;
}
.food > .info > .content .stars, .food > .info > .content .stars > em
{ display: block; width: 99px; height: 18px; margin: 0 auto 7px; text-align: left; background: url(http://s1.cdn.ryanboylett.co.uk/generic/image_png_00004.png);
}
.food > .info > .content .stars > em
{ width: 99px; height: 18px; margin: 0; background: url(http://s1.cdn.ryanboylett.co.uk/generic/image_png_00004.png); background-position: 0 -18px;
}

Food Widget by Andreea Nicolaescu - Script Codes JS Codes

$(function()
{ $('.food > .info > .content .stars') .bind('mousemove', function(e) { var pct = e.pageX - $(this).offset().left; pct = pct / $(this).width() * 100; $(this).find('> em').css('width', pct + '%'); }) .bind('mouseleave', function() { $(this).find('> em').animate({ width: '91%' }, 250); });
});
Food Widget by Andreea Nicolaescu - Script Codes
Food Widget by Andreea Nicolaescu - Script Codes
Home Page Home
Developer Andres
Username Angelfire
Uploaded August 21, 2022
Rating 3
Size 5,085 Kb
Views 28,336
Do you need developer help for Food Widget by Andreea Nicolaescu?

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!

Andres (Angelfire) Script Codes
Name
Threaded Chat
Vue 2.0 Intro
Calendar Widget
Weather App
Latest Posts Widget
Swanky Pure CSS Drop Down Menu V2.0
Font Awesome Flat Icons
Array vs object
Chart.js Infobox
Flexbox Admin Template
Create amazing blog posts 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!