Logo

Developer
Marty Powell
Size
2,057 Kb
Views
16,192
  1. Logo Previews
  2. Logo HTML Codes
  3. Logo CSS Codes

How do I make an logo?

Logo I am working on for my site. Is supposed to emulate a bowl of soup and some simple steam coming off it using css3. What is a logo? How do you make a logo? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

Logo Previews
IQ Test

Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sixcol logo"> <div class="steam"><p class="first">~</p><p class="second">~</p><p class="third">~</p></div> <h2>Marty Powell</h2> <h3>Web Developer</h3> <h4>"Cooking Stone Soup"</h4>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Logo - Script Codes CSS Codes

h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
div.logo {
text-align: center;
margin-top: 60px;
}
div.logo h2 {
font-size: 32px;
padding: 10px;
}
div.logo h3 {
letter-spacing: 5px;
}
div.logo h4 {
font-style: italic;
padding: 10px;
}
/*Steam off the mug*/
div.steam { height: 120px;
}
div.steam p { display:inline-block; padding:10px 5px 10px 5px; color:#282828; font-size:4em; -webkit-transform: rotate(-90deg); font-weight:bolder;
}
div.steam p.first { animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */ animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}
div.steam p.second { animation: myfirst 2s;
-moz-animation: myfirst 2s; /* Firefox */
-webkit-animation: myfirst 2s; /* Safari and Chrome */
-o-animation: myfirst 2s; /* Opera */ animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-delay:1s; -webkit-animation-delay:1s; -o-animation-delay:1s; -moz-animation-delay:1s;
}
div.steam p.third { animation: myfirst 2s;
-moz-animation: myfirst 2s; /* Firefox */
-webkit-animation: myfirst 2s; /* Safari and Chrome */
-o-animation: myfirst 2s; /* Opera */ animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; animation-delay:.5s; -webkit-animation-delay:.5s; -o-animation-delay:.5s; -moz-animation-delay:.5s;
}
@keyframes myfirst
{
0% {color: #282828 ;}
25% {color: #444;}
50% {color: white;}
100% {color: #282828 ;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {color: #282828 ;}
25% {color: #444;}
50% {color: white;}
100% {color: #282828 ;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {color: #282828 ;}
25% {color: #444;}
50% {color: white;}
100% {color: #282828 ;}
}
@-o-keyframes myfirst /* Opera */
{
0% {color: #282828 ;}
25% {color: #444;}
50% {color: white;}
100% {color: #282828 ;}
}
Logo - Script Codes
Logo - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 2,057 Kb
Views 16,192
Do you need developer help for Logo?

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!

Marty Powell (martypowell) Script Codes
Name
Side Navigation
Circle Logo
Intranet User Profile
Donation Bar
News Snippet
Randon Image Slider
Search and Filter
Home
Slick Carousel Prototype
Font Awesome Social Icon List
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!