Food Tag

Developer
Ashlee Phillips
Size
3,520 Kb
Views
34,408
  1. Food Tag Previews
  2. Food Tag HTML Codes
  3. Food Tag CSS Codes

How do I make an food tag?

Food Tag by Paco https://dribbble.com/shots/897384-Food-Tag. What is a food tag? How do you make a food tag? This script and codes were developed by Ashlee Phillips on 21 August 2022, Sunday.

Food Tag Previews
IQ Test

Food Tag - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Food Tag</title> <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! */ * { box-sizing: border-box;
}
body { font-family: Helvetica; background: #DED8CD;
}
.card { width: 275px; margin: 100px auto; position: relative; border-radius: 10px; box-shadow: 0 2px 8px -2px #483D3B;
}
.main { background: #483D3B; border-radius: 10px 10px 0 0; position: relative; padding: 20px; overflow: hidden;
}
.add { background: #97C069; border: none; outline: none; border-radius: 0 4px 4px 0; position: absolute; top: 40px; left: 275px; height: 40px; width: 40px; box-shadow: 0 1px 4px -1px #483D3B, inset 15px 0 8px -10px #4B940F; text-align: center;
}
.add i { color: white; font-size: 20px; line-height: 39px;
}
.section { position: relative;
}
.top { background: #EDEDED;
}
.middle { background: #F5F5F5;
}
.bottom { background: white; border-radius: 0 0 10px 10px;
}
.main-info { margin-top: 15px;
}
.image { margin-right: 20px; float: left;
}
.image img { width: 80px; border-radius: 50%; border: 5px solid white;
}
h1 { color: white; text-shadow: 1px 1px black; font-size: 30px; margin: 0; padding: 0; font-weight: normal;
}
.followers { color: #9E9C9B; text-shadow: 1px 1px black; font-size: 14px;
}
.stats { color: #8B8482; padding: 20px; font-size: 18px;
}
.stats i { margin-right: 15px; width: 15px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="card"> <div class="main"> <div class="image"> <img src="https://pbs.twimg.com/profile_images/2917806417/f0b71bcb132b11302976d7eeba7d711a_400x400.jpeg" /> </div> <div class="main-info"> <h1>Paco</h2> <div class="followers">6.800 Followers</div> </div> </div> <div class="section top"> <div class="stats"><i class="fa fa-map-marker" aria-hidden="true"></i> 108 Location</div> </div> <div class="section middle"> <div class="stats"><i class="fa fa-heart" aria-hidden="true"></i> 108 Favorite</div> </div> <div class="section bottom"> <div class="stats"><i class="fa fa-cutlery" aria-hidden="true"></i> 108 Food</div> </div> <button class="add"> <i class="fa fa-plus" aria-hidden="true"></i> </button>
</div> <script src='https://use.fontawesome.com/27ca801b4d.js'></script>
</body>
</html>

Food Tag - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: Helvetica; background: #DED8CD;
}
.card { width: 275px; margin: 100px auto; position: relative; border-radius: 10px; box-shadow: 0 2px 8px -2px #483D3B;
}
.main { background: #483D3B; border-radius: 10px 10px 0 0; position: relative; padding: 20px; overflow: hidden;
}
.add { background: #97C069; border: none; outline: none; border-radius: 0 4px 4px 0; position: absolute; top: 40px; left: 275px; height: 40px; width: 40px; box-shadow: 0 1px 4px -1px #483D3B, inset 15px 0 8px -10px #4B940F; text-align: center;
}
.add i { color: white; font-size: 20px; line-height: 39px;
}
.section { position: relative;
}
.top { background: #EDEDED;
}
.middle { background: #F5F5F5;
}
.bottom { background: white; border-radius: 0 0 10px 10px;
}
.main-info { margin-top: 15px;
}
.image { margin-right: 20px; float: left;
}
.image img { width: 80px; border-radius: 50%; border: 5px solid white;
}
h1 { color: white; text-shadow: 1px 1px black; font-size: 30px; margin: 0; padding: 0; font-weight: normal;
}
.followers { color: #9E9C9B; text-shadow: 1px 1px black; font-size: 14px;
}
.stats { color: #8B8482; padding: 20px; font-size: 18px;
}
.stats i { margin-right: 15px; width: 15px;
}
Food Tag - Script Codes
Food Tag - Script Codes
Home Page Home
Developer Ashlee Phillips
Username smashlee
Uploaded August 21, 2022
Rating 4
Size 3,520 Kb
Views 34,408
Do you need developer help for Food Tag?

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!

Ashlee Phillips (smashlee) Script Codes
Name
Scooped Border
Google login form
Gradient
Project Euler 02
Form Start Up
Script Test
Styled Form
Minimelephant
Project Euler 01
CSS Granny
Create amazing video scripts 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!