Tiny drag and drop CSS icon

Developer
Elyse Holladay
Size
2,723 Kb
Views
8,096
  1. Tiny drag and drop CSS icon Previews
  2. Tiny drag and drop CSS icon HTML Codes
  3. Tiny drag and drop CSS icon CSS Codes

How do I make an tiny drag and drop css icon?

What is a tiny drag and drop css icon? How do you make a tiny drag and drop css icon? This script and codes were developed by Elyse Holladay on 27 December 2022, Tuesday.

Tiny drag and drop CSS icon Previews
IQ Test

Tiny drag and drop CSS icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>tiny drag and drop CSS icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table> <thead> <tr> <th>Rank</th> <th>Item Name</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td> <div class="rank">1</div> <div class="draganddrop"></div> </td> <td class="name"> Item Name </td> <td class="status in-progress"> in-progress </td> </tr> <tr> <td> <div class="rank">2</div> <div class="draganddrop"></div> </td> <td class="name"> Item Name </td> <td class="status in-progress"> in-progress </td> </tr> <tr> <td> <div class="rank">3</div> <div class="draganddrop"></div> </td> <td class="name"> Item Name </td> <td class="status open"> open </td> </tr> <tr> <td> <div class="rank">1</div> <div class="draganddrop"></div> </td> <td class="name"> Item Name </td> <td class="status overdue"> overdue </td> </tr> </tbody>
</table>
</body>
</html>

Tiny drag and drop CSS icon - Script Codes CSS Codes

@import "http://www.elyseholladay.com/p360/fonts/fonts.css";
body { font-family: "ProximaNovaRegular", Arial, sans-serif; font-size: 100%;
}
table { border-collapse: collapse; border-spacing: 0; width: 600px;
}
thead { background: #ccc; line-height: 3.5em; text-align: left; text-transform: uppercase; font-size: 0.75em; color: #262626;
}
thead th { padding-left: 2em; font-family: "ProximaNovaBold";
}
tr { line-height: 3em; border-bottom: 1px solid #ccc;
}
tr td { padding-left: 1.5em;
}
.rank { display: inline-block; vertical-align: 3px; font-size: 0.85em; font-family: "ProximaNovaBold"; margin-right: 2em;
}
.status { font-family: "ProximaNovaBold"; font-size: 0.75em; text-transform: uppercase;
}
.status.in-progress { color: #9eca69;
}
.status.open { color: #f5c149;
}
.status.overdue { color: red;
}
.draganddrop { display: inline-block; border-top: 2px solid #ccc; width: 25px; padding-top: 2px; cursor: -webkit-grab; cursor: -moz-grab;
}
.draganddrop:before,
.draganddrop:after { display: block; content: ""; border-top: 2px solid #ccc; padding-top: 2px;
}
.draganddrop:hover,
.draganddrop:hover:before,
.draganddrop:hover:after { border-color: #57b5d6;
}
.draganddrop:active,
.draganddrop:active:before,
.draganddrop:active:after { cursor: -webkit-grabbing; cursor: -moz-grabbing;
}
Tiny drag and drop CSS icon - Script Codes
Tiny drag and drop CSS icon - Script Codes
Home Page Home
Developer Elyse Holladay
Username elyseholladay
Uploaded December 27, 2022
Rating 3.5
Size 2,723 Kb
Views 8,096
Do you need developer help for Tiny drag and drop CSS icon?

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!

Elyse Holladay (elyseholladay) Script Codes
Name
Specificity Test
Class Chaining
Scalable Responsive Type Stack
A Pen by elyse holladay
Success meters
Sassy Buttons
A Pen by elyse holladay
Style color palettes with cssgrid
X Floating Examples
Basic Fluid Grid Example
Create amazing web content 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!