Apple Cords

Developer
BROWNERD
Size
5,941 Kb
Views
30,360
  1. Apple Cords Previews
  2. Apple Cords HTML Codes
  3. Apple Cords CSS Codes

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 Previews
IQ Test

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;
}
Apple Cords - Script Codes
Apple Cords - Script Codes
Home Page Home
Developer BROWNERD
Username brownerd
Uploaded August 29, 2022
Rating 4.5
Size 5,941 Kb
Views 30,360
Do you need developer help for Apple Cords?

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!

BROWNERD (brownerd) Script Codes
Name
Meditation bean
Cool Beans Button 60fps
PICADILLY CIRCUS
Orlando Strong
Venn diagram animation
Book
RIP ALI
Lego Ziggy Stardust RIP David Bowie
Parellogram button
Chunky Nav buttons, centered, no floats
Create amazing captions 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!