Apple Cords
How do I make an apple cords?
Derived from Kyle Adam's Cable Icons I just added a few more to the set.. What is a apple cords? How do you make a apple cords? This script and codes were developed by BROWNERD on 29 August 2022, Monday.
Apple Cords - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple Cords</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="power-cord"> <div></div> <div></div> <div></div> <div></div>
</div>
<div class="lightning-cord"> <div></div> <div></div> <div></div> <div></div>
</div>
<div class="_30-pin-cord"> <div></div> <div></div> <div></div> <div></div>
</div>
<div class="usb-cord"> <div></div> <div> <svg id="Layer_1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="475.24799" height="228.092" viewbox="0 0 475.248 228.092" xml:space="preserve"> <path id="path1334" d="M 462.836,114.054 L 412.799,85.158 L 412.799,105.771 L 157.046,105.771 L 206.844,53.159 C 211.082,49.762 216.627,47.379 222.331,47.247 C 245.406,47.247 259.109,47.241 264.153,47.231 C 267.572,56.972 276.756,64.003 287.674,64.003 C 301.486,64.003 312.695,52.795 312.695,38.978 C 312.695,25.155 301.487,13.951 287.674,13.951 C 276.756,13.951 267.572,20.978 264.153,30.711 L 222.821,30.704 C 211.619,30.704 199.881,36.85 192.41,44.055 C 192.614,43.841 192.826,43.613 192.398,44.059 C 192.24,44.237 139.564,99.873 139.564,99.873 C 135.335,103.265 129.793,105.633 124.093,105.769 L 95.161,105.769 C 91.326,86.656 74.448,72.256 54.202,72.256 C 31.119,72.256 12.408,90.967 12.408,114.043 C 12.408,137.126 31.119,155.838 54.202,155.838 C 74.452,155.838 91.33,141.426 95.165,122.297 L 123.59,122.297 C 123.663,122.297 123.736,122.301 123.81,122.297 L 186.681,122.297 C 192.37,122.442 197.905,124.813 202.13,128.209 C 202.13,128.209 254.794,183.841 254.957,184.021 C 255.379,184.468 255.169,184.235 254.961,184.025 C 262.432,191.229 274.175,197.371 285.379,197.371 L 325.211,197.362 L 325.211,214.139 L 375.261,214.139 L 375.261,164.094 L 325.211,164.094 L 325.211,180.849 C 325.211,180.849 314.72,180.83 284.891,180.83 C 279.186,180.699 273.635,178.319 269.399,174.922 L 219.59,122.3 L 412.799,122.3 L 412.799,142.946 L 462.836,114.054 z "></path> </svg> </div> <div></div> <div></div>
</div>
<div class="thunderbolt-cord"> <div></div> <div> <svg id="svg3151" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="87.004219" height="160.74557" viewbox="0 0 158.75 79.375" xml:space="preserve" style="fill-rule:evenodd"> <path d="M 0,186.30906 L 54.380322,38.831804 L 4.6016368,37.240181 L 72.036277,-106.71022 L 139.4604,-106.57758 L 106.3631,-18.948642 L 158.59792,-19.402476 L 0,186.30906 z"></path> </svg> </div> <div></div> <div></div>
</div>
<div class="mini-dvi-cord"> <div></div> <div></div> <div></div> <div></div>
</div>
<div class="audio-cord"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
</div>
</body>
</html>
Apple Cords - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background-color: #4d4d4d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; width: 100vw;
}
[class$='cord'] { padding: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.power-cord div { border: 3px solid #333;
}
.power-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #ccc 5%, #999 5%, #999 95%, #666 95%); background: linear-gradient(90deg, #ccc 5%, #999 5%, #999 95%, #666 95%); border-bottom: none; height: 20px; width: 100px;
}
.power-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #d9d9d9 5%, #b3b3b3 5%, #b3b3b3 95%, #808080 95%); background: linear-gradient(90deg, #d9d9d9 5%, #b3b3b3 5%, #b3b3b3 95%, #808080 95%); height: 80px; width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.power-cord div:nth-child(2)::after { background-color: #80ff00; border-radius: 50%; box-shadow: 1px -1px 1px #4d4d4d, 2px -2px 5px #b3ff66; content: ''; height: 10px; width: 10px;
}
.power-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 80px; width: 40px;
}
.power-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 30px;
}
.lightning-cord div { border: 3px solid #333;
}
.lightning-cord div:nth-child(1) { background: #ccc; border-bottom: none; border-radius: 10px 10px 0 0; height: 50px; width: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.lightning-cord div:nth-child(1)::after { background: -webkit-repeating-linear-gradient(left, #c90 4px, #fff 8px); background: repeating-linear-gradient(90deg, #c90 4px, #fff 8px); border: 3px solid #fff; border-radius: 5px; content: ''; height: 20px; width: 30px;
}
.lightning-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%); background: linear-gradient(90deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%); height: 120px; width: 75px;
}
.lightning-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%); background: linear-gradient(90deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%); border-top: none; height: 60px; width: 35px;
}
.lightning-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 25px;
}
._30-pin-cord div { border: 3px solid #333;
}
._30-pin-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #bfbfbf 5%, #d9d9d9 5%, #d9d9d9 95%, #bfbfbf 95%); background: linear-gradient(90deg, #bfbfbf 5%, #d9d9d9 5%, #d9d9d9 95%, #bfbfbf 95%); border-bottom: none; height: 30px; width: 150px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
._30-pin-cord div:nth-child(1)::before,
._30-pin-cord div:nth-child(1)::after { border: 3px solid #333; border-top: none; border-bottom: none; content: ''; margin: 0 10px; height: 10px; width: 5px;
}
._30-pin-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%); background: linear-gradient(90deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%); height: 50px; width: 180px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
._30-pin-cord div:nth-child(2)::after { border: 3px solid #333; border-radius: 5px; content: ''; height: 10px; width: 20px;
}
._30-pin-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 80px; width: 40px;
}
._30-pin-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 30px;
}
.usb-cord div { border: 3px solid #333;
}
.usb-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-bottom: none; height: 80px; width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.usb-cord div:nth-child(1)::before,
.usb-cord div:nth-child(1)::after { background: -webkit-repeating-linear-gradient(left, #c90 2px, #fff 6px); background: repeating-linear-gradient(90deg, #c90 2px, #fff 6px); border: 3px solid #333; border-radius: 5px; content: ''; margin: 0 10px; height: 10px; width: 15px;
}
.usb-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%); background: linear-gradient(90deg, #d9d9d9 5%, #f2f2f2 5%, #f2f2f2 95%, #d9d9d9 95%); border-radius: 0 0 10px 10px; height: 100px; width: 110px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.usb-cord div:nth-child(2) svg { height: 50px; width: 50px; -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg);
}
.usb-cord div:nth-child(2) svg path { fill: #333;
}
.usb-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 80px; width: 40px;
}
.usb-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 30px;
}
.thunderbolt-cord div { border: 3px solid #333;
}
.thunderbolt-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #b3b3b3 5%, #f2f2f2 5%, #f2f2f2 10%, #d9d9d9 10%, #d9d9d9 90%, #a6a6a6 90%); background: linear-gradient(90deg, #b3b3b3 5%, #f2f2f2 5%, #f2f2f2 10%, #d9d9d9 10%, #d9d9d9 90%, #a6a6a6 90%); border-bottom: none; height: 50px; width: 60px;
}
.thunderbolt-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #ccc 10%, #f2f2f2 10%, #f2f2f2 20%, #f2f2f2 20%, #f2f2f2 90%, #d9d9d9 0%); background: linear-gradient(90deg, #ccc 10%, #f2f2f2 10%, #f2f2f2 20%, #f2f2f2 20%, #f2f2f2 90%, #d9d9d9 0%); height: 120px; width: 75px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.thunderbolt-cord div:nth-child(2) svg { height: 30px; width: 20px;
}
.thunderbolt-cord div:nth-child(2) svg path { fill: #333;
}
.thunderbolt-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%); background: linear-gradient(90deg, #ccc 30%, #e6e6e6 30%, #e6e6e6 70%, #a6a6a6 70%); border-top: none; height: 60px; width: 35px;
}
.thunderbolt-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 25px;
}
.mini-dvi-cord div { border: 3px solid #333;
}
.mini-dvi-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-bottom: none; height: 70px; width: 100px;
}
.mini-dvi-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #737373 5%, #595959 5%, #595959 95%, #404040 95%); background: linear-gradient(90deg, #737373 5%, #595959 5%, #595959 95%, #404040 95%); height: 100px; width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.mini-dvi-cord div:nth-child(2)::after { color: #b3b3b3; content: 'HDMI'; font-family: helvetica;
}
.mini-dvi-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #4d4d4d 20%, #666 20%, #666 70%, #8c8c8c 70%); background: linear-gradient(90deg, #4d4d4d 20%, #666 20%, #666 70%, #8c8c8c 70%); border-top: none; height: 80px; width: 40px;
}
.mini-dvi-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #4d4d4d 30%, #666 30%, #666 70%, #8c8c8c 70%); background: linear-gradient(90deg, #4d4d4d 30%, #666 30%, #666 70%, #8c8c8c 70%); border-top: none; height: 20px; width: 30px;
}
.audio-cord div { border: 3px solid #333;
}
.audio-cord div:nth-child(1) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-bottom: 3px solid #fff; height: 20px; width: 20px;
}
.audio-cord div:nth-child(2) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-top: none; border-bottom: 3px solid #fff; height: 20px; width: 20px;
}
.audio-cord div:nth-child(3) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-top: none; border-bottom: 3px solid #fff; height: 20px; width: 20px;
}
.audio-cord div:nth-child(4) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-top: none; border-bottom: 3px solid #fff; height: 20px; width: 20px;
}
.audio-cord div:nth-child(5) { background: -webkit-linear-gradient(left, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); background: linear-gradient(90deg, #a6a6a6 5%, #d9d9d9 5%, #d9d9d9 95%, #a6a6a6 95%); border-bottom: none; height: 5px; width: 26px;
}
.audio-cord div:nth-child(6) { background: -webkit-linear-gradient(left, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%); background: linear-gradient(90deg, #d9d9d9 20%, #f2f2f2 20%, #f2f2f2 80%, #d9d9d9 80%); height: 100px; width: 40px;
}
.audio-cord div:nth-child(7) { background: -webkit-linear-gradient(left, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 20%, #ccc 20%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 50px; width: 25px;
}
.audio-cord div:nth-child(8) { background: -webkit-linear-gradient(left, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); background: linear-gradient(90deg, #e6e6e6 30%, #ccc 30%, #ccc 70%, #a6a6a6 70%); border-top: none; height: 20px; width: 20px;
}
Developer | BROWNERD |
Username | brownerd |
Uploaded | August 29, 2022 |
Rating | 4.5 |
Size | 5,941 Kb |
Views | 30,360 |
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!
Name | Size |
Pacman 60fps study | 2,836 Kb |
RIP ALI | 5,327 Kb |
CSS SLACK plaid | 2,742 Kb |
Potted pastel flowers | 4,415 Kb |
Lowpoly holy space cow | 9,164 Kb |
Book | 2,708 Kb |
3 rad blend-mode techniques | 8,214 Kb |
Venn diagram animation | 2,827 Kb |
The 4 grid techniques | 6,969 Kb |
Offset button - layered 60fps | 3,179 Kb |
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!
Name | Username | Size |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Flex layout example | Mofny | 1,663 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Alumni ECA | MatheusLima92 | 3,777 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!