Step 4: Ready to style

Developer
Benedikte Vanderweeën
Size
2,420 Kb
Views
4,048
  1. Step 4: Ready to style Previews
  2. Step 4: Ready to style HTML Codes
  3. Step 4: Ready to style CSS Codes

How do I make an step 4: ready to style?

Use CSS to style the icons by giving each SVG icon a unique ID. What is a step 4: ready to style? How do you make a step 4: ready to style? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.

Step 4: Ready to style Previews
IQ Test

Step 4: Ready to style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Step 4: Ready to style</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Ico neutral -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" id="ico-neutral">
<path d="M52.3,6.2c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H10.8c-2.5,0-4.6-2.1-4.6-4.6V10.8c0-2.5,2.1-4.6,4.6-4.6	H52.3 M52.3,1.6H10.8c-5.1,0-9.2,4.1-9.2,9.2v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V10.8	C61.5,5.8,57.4,1.6,52.3,1.6L52.3,1.6z"/>
<line x1="25.4" y1="41.7" x2="35.9" y2="41.7" />
<path d="M40,43H25.4c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h10.5c0.7,0,1.3,0.6,1.3,1.3S36.6,43,35.9,43z" id="mouth" />
<circle cx="21.5" cy="26.1" r="3.9"/>
<circle cx="39.8" cy="26.1" r="3.9"/>
</svg>
<!-- Ico success -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" id="ico-success">
<path d="M52.8,6.2c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H11.2c-2.5,0-4.6-2.1-4.6-4.6V10.8c0-2.5,2.1-4.6,4.6-4.6	H52.8 M52.8,1.6H11.2C6.1,1.6,2,5.8,2,10.8v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V10.8C62,5.8,57.9,1.6,52.8,1.6	L52.8,1.6z"/>
<path d="M31.1,47.2c-5.7,0-10.3-4.3-10.3-9.6c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5c0,3.6,3.2,6.5,7.2,6.5	s7.2-2.9,7.2-6.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C41.4,42.9,36.8,47.2,31.1,47.2z"/>
<path d="M27.3,22.6c0,1.1-0.9,1.9-1.9,1.9h-6.7c-1.1,0-1.9-0.9-1.9-1.9l0,0c0-1.1,0.9-1.9,1.9-1.9h6.7	C26.4,20.7,27.3,21.6,27.3,22.6L27.3,22.6z"/>
<path d="M45.6,22.6c0,1.1-0.9,1.9-1.9,1.9h-6.7c-1.1,0-1.9-0.9-1.9-1.9l0,0c0-1.1,0.9-1.9,1.9-1.9h6.7	C44.7,20.7,45.6,21.6,45.6,22.6L45.6,22.6z"/>
</svg>
<!-- Ico failure -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" id="ico-failure">
<path d="M52.8,6.6c2.5,0,4.6,2.1,4.6,4.6v41.5c0,2.5-2.1,4.6-4.6,4.6H11.2c-2.5,0-4.6-2.1-4.6-4.6V11.2c0-2.5,2.1-4.6,4.6-4.6	H52.8 M52.8,2H11.2C6.1,2,2,6.1,2,11.2v41.5c0,5.1,4.1,9.2,9.2,9.2h41.5c5.1,0,9.2-4.1,9.2-9.2V11.2C62,6.1,57.9,2,52.8,2L52.8,2z	"/>
<path d="M32,37.2c5.2,0,9.4,3.9,9.4,8.8c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4c0-3.3-3-6-6.6-6c-3.6,0-6.6,2.7-6.6,6	c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4C22.6,41.1,26.8,37.2,32,37.2z"/>
<circle cx="22.9" cy="28.7" r="3.9"/>
<circle cx="41.1" cy="28.7" r="3.9"/>
<path d="M27.5,21.9c-0.4,0.6-1.1,0.7-1.7,0.3c-2-1.1-4.4-0.6-6.1,1.3c-0.5,0.6-1.2,0.8-1.7,0.4l0,0c-0.5-0.4-0.4-1.6,0.3-2.5	c2.3-2.6,5.5-3.3,8.3-1.7C27.5,20.2,27.9,21.3,27.5,21.9L27.5,21.9z"/>
<path d="M36.5,21.9c0.4,0.6,1.1,0.7,1.7,0.3c2-1.1,4.4-0.6,6.1,1.3c0.5,0.6,1.2,0.8,1.7,0.4l0,0c0.5-0.4,0.4-1.6-0.3-2.5	c-2.3-2.6-5.5-3.3-8.3-1.7C36.5,20.2,36.1,21.3,36.5,21.9L36.5,21.9z"/>
</svg>
</body>
</html>

Step 4: Ready to style - Script Codes CSS Codes

body{ background:#2D2E3F;
}
#ico-neutral,
#ico-success,
#ico-failure{ width:10%; height:10%;
}
#ico-neutral{ fill:#41C2ED; /*blue*/
}
#ico-success{ fill:#99FF66;/*green*/
}
#ico-failure{ fill:#F7696D;/*red*/
}
#ico-neutral:hover,
#ico-success:hover,
#ico-failure:hover{ -webkit-transform: scale(1.1); opacity:0.5;
}
Step 4: Ready to style - Script Codes
Step 4: Ready to style - Script Codes
Home Page Home
Developer Benedikte Vanderweeën
Username Benedikte
Uploaded January 21, 2023
Rating 3
Size 2,420 Kb
Views 4,048
Do you need developer help for Step 4: Ready to style?

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!

Benedikte Vanderweeën (Benedikte) Script Codes
Name
Rotating earth with people
Pure CSS One Div Weather Animated Icons
SVG Logo
Drifting Clouds
Background SVG Gradients
Swimming fish
Linear Gradients with SVG
Transparent SVG pattern
Scaled Paper icon
Illustrio interface
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!