Ela Conf 2017 & Sass

Developer

Size

3,692 Kb

Views

22,264

Ela Conf 2017 & Sass Previews
Ela Conf 2017 & Sass HTML Codes
Ela Conf 2017 & Sass CSS Codes

How do I make an ela conf 2017 & sass?

Replicating Ela Conf 2017 visuals with Sass for science . What is a ela conf 2017 & sass? How do you make a ela conf 2017 & sass? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

Ela Conf 2017 & Sass Previews

Ela Conf 2017 & Sass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ela Conf 2017 & Sass</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</body>
</html>

Ela Conf 2017 & Sass - Script Codes CSS Codes

body { background: #2B407B;
}
.line,
.dot { position: absolute;
}
.line:nth-of-type(1) { background: #725394; width: 136px; height: 4px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 128px; left: 117px; z-index: 20;
}
.line:nth-of-type(2) { background: #98D9B2; width: 214px; height: 36px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 368px; left: 563px; z-index: 33;
}
.line:nth-of-type(3) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 370px; height: 48px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 261px; left: 889px; z-index: 45;
}
.line:nth-of-type(4) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 381px; height: 32px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 447px; left: 705px; z-index: 52;
}
.line:nth-of-type(5) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 236px; height: 8px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 393px; left: 321px; z-index: 70;
}
.line:nth-of-type(6) { background: #9880F4; width: 192px; height: 6px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 202px; left: 307px; z-index: 13;
}
.line:nth-of-type(7) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 373px; height: 6px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 335px; left: 126px; z-index: 49;
}
.line:nth-of-type(8) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #5584F2; width: 140px; height: 6px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 245px; left: 195px; z-index: 65;
}
.line:nth-of-type(9) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #5584F2; width: 429px; height: 18px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 231px; left: 454px; z-index: 62;
}
.line:nth-of-type(10) { background: #7EE6E8; width: 170px; height: 7px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 138px; left: 870px; z-index: 24;
}
.line:nth-of-type(11) { background: #725394; width: 393px; height: 53px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 356px; left: 785px; z-index: 32;
}
.line:nth-of-type(12) { background: #98D9B2; width: 201px; height: 4px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 80px; left: 332px; z-index: 7;
}
.line:nth-of-type(13) { background: #5584F2; width: 383px; height: 41px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 359px; left: 855px; z-index: 11;
}
.line:nth-of-type(14) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 295px; height: 7px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 420px; left: 439px; z-index: 39;
}
.line:nth-of-type(15) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 125px; height: 7px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 494px; left: 382px; z-index: 38;
}
.line:nth-of-type(16) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #5584F2; width: 201px; height: 23px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 54px; left: 548px; z-index: 67;
}
.line:nth-of-type(17) { background: #5584F2; width: 309px; height: 6px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 368px; left: 50px; z-index: 17;
}
.line:nth-of-type(18) { background: #5584F2; width: 76px; height: 32px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 433px; left: 776px; z-index: 12;
}
.line:nth-of-type(19) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #5584F2; width: 105px; height: 21px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 141px; left: 252px; z-index: 46;
}
.line:nth-of-type(20) { background: #7EE6E8; width: 96px; height: 34px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 466px; left: 549px; z-index: 19;
}
.line:nth-of-type(21) { background: #5584F2; width: 217px; height: 48px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 88px; left: 531px; z-index: 8;
}
.line:nth-of-type(22) { background: #7EE6E8; width: 196px; height: 48px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 405px; left: 820px; z-index: 27;
}
.line:nth-of-type(23) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #98D9B2; width: 308px; height: 19px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 341px; left: 840px; z-index: 63;
}
.line:nth-of-type(24) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 196px; height: 47px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 379px; left: 810px; z-index: 62;
}
.line:nth-of-type(25) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 122px; height: 38px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 466px; left: 95px; z-index: 64;
}
.line:nth-of-type(26) { background: #725394; width: 153px; height: 29px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 403px; left: 20px; z-index: 31;
}
.line:nth-of-type(27) { background: #5584F2; width: 395px; height: 31px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 274px; left: 178px; z-index: 34;
}
.line:nth-of-type(28) { background: #725394; width: 384px; height: 37px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 49px; left: 385px; z-index: 3;
}
.line:nth-of-type(29) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 293px; height: 30px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 296px; left: 766px; z-index: 43;
}
.line:nth-of-type(30) { background: #98D9B2; width: 399px; height: 15px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 129px; left: 357px; z-index: 12;
}
.line:nth-of-type(31) { background: #5584F2; width: 393px; height: 28px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 443px; left: 787px; z-index: 5;
}
.line:nth-of-type(32) { background: #98D9B2; width: 367px; height: 26px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 493px; left: 830px; z-index: 29;
}
.line:nth-of-type(33) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 375px; height: 49px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 491px; left: 408px; z-index: 67;
}
.line:nth-of-type(34) { background: #9880F4; width: 262px; height: 18px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 189px; left: 669px; z-index: 8;
}
.line:nth-of-type(35) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 383px; height: 47px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 186px; left: 387px; z-index: 41;
}
.line:nth-of-type(36) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 394px; height: 15px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 3px; left: 872px; z-index: 45;
}
.line:nth-of-type(37) { background: #7EE6E8; width: 39px; height: 49px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 390px; left: 506px; z-index: 11;
}
.line:nth-of-type(38) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 49px; height: 21px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 70px; left: 654px; z-index: 55;
}
.line:nth-of-type(39) { background: #5584F2; width: 32px; height: 44px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 17px; left: 120px; z-index: 9;
}
.line:nth-of-type(40) { background: #5584F2; width: 247px; height: 49px; border-radius: 40px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); top: 217px; left: 122px; z-index: 31;
}
.dot:nth-of-type(41) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 31px; height: 31px; border-radius: 50%; top: 112px; left: 679px; z-index: -26;
}
.dot:nth-of-type(42) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #7EE6E8; width: 15px; height: 15px; border-radius: 50%; top: 100px; left: 359px; z-index: -6;
}
.dot:nth-of-type(43) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 36px; height: 36px; border-radius: 50%; top: 426px; left: 586px; z-index: -27;
}
.dot:nth-of-type(44) { background: #9880F4; width: 27px; height: 27px; border-radius: 50%; top: 248px; left: 845px; z-index: -39;
}
.dot:nth-of-type(45) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 54px; height: 54px; border-radius: 50%; top: 388px; left: 859px; z-index: -34;
}
.dot:nth-of-type(46) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #98D9B2; width: 23px; height: 23px; border-radius: 50%; top: 405px; left: 394px; z-index: -10;
}
.dot:nth-of-type(47) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 51px; height: 51px; border-radius: 50%; top: 386px; left: 470px; z-index: -20;
}
.dot:nth-of-type(48) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 37px; height: 37px; border-radius: 50%; top: 59px; left: 238px; z-index: -28;
}
.dot:nth-of-type(49) { background: #7EE6E8; width: 19px; height: 19px; border-radius: 50%; top: 207px; left: 110px; z-index: -36;
}
.dot:nth-of-type(50) { background: #9880F4; width: 17px; height: 17px; border-radius: 50%; top: 383px; left: 870px; z-index: 0;
}
.dot:nth-of-type(51) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #98D9B2; width: 41px; height: 41px; border-radius: 50%; top: 35px; left: 373px; z-index: -29;
}
.dot:nth-of-type(52) { background: #98D9B2; width: 59px; height: 59px; border-radius: 50%; top: 453px; left: 806px; z-index: 0;
}
.dot:nth-of-type(53) { background: #7EE6E8; width: 48px; height: 48px; border-radius: 50%; top: 374px; left: 384px; z-index: -1;
}
.dot:nth-of-type(54) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 47px; height: 47px; border-radius: 50%; top: 113px; left: 360px; z-index: -9;
}
.dot:nth-of-type(55) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 38px; height: 38px; border-radius: 50%; top: 405px; left: 60px; z-index: -11;
}
.dot:nth-of-type(56) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 34px; height: 34px; border-radius: 50%; top: 151px; left: 384px; z-index: -34;
}
.dot:nth-of-type(57) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #98D9B2; width: 28px; height: 28px; border-radius: 50%; top: 471px; left: 426px; z-index: -19;
}
.dot:nth-of-type(58) { background: #98D9B2; width: 47px; height: 47px; border-radius: 50%; top: 284px; left: 216px; z-index: -8;
}
.dot:nth-of-type(59) { background: #5584F2; width: 17px; height: 17px; border-radius: 50%; top: 307px; left: 456px; z-index: -33;
}
.dot:nth-of-type(60) { background: #9880F4; width: 23px; height: 23px; border-radius: 50%; top: 200px; left: 148px; z-index: -36;
}
.dot:nth-of-type(61) { background: #725394; width: 22px; height: 22px; border-radius: 50%; top: 402px; left: 232px; z-index: -6;
}
.dot:nth-of-type(62) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 29px; height: 29px; border-radius: 50%; top: 245px; left: 696px; z-index: -30;
}
.dot:nth-of-type(63) { background: #725394; width: 53px; height: 53px; border-radius: 50%; top: 84px; left: 623px; z-index: -14;
}
.dot:nth-of-type(64) { background: #98D9B2; width: 22px; height: 22px; border-radius: 50%; top: 146px; left: 417px; z-index: -11;
}
.dot:nth-of-type(65) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 58px; height: 58px; border-radius: 50%; top: 343px; left: 762px; z-index: -22;
}
.dot:nth-of-type(66) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 40px; height: 40px; border-radius: 50%; top: 263px; left: 301px; z-index: -33;
}
.dot:nth-of-type(67) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 29px; height: 29px; border-radius: 50%; top: 263px; left: 332px; z-index: -37;
}
.dot:nth-of-type(68) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #725394; width: 19px; height: 19px; border-radius: 50%; top: 315px; left: 842px; z-index: -18;
}
.dot:nth-of-type(69) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #98D9B2; width: 30px; height: 30px; border-radius: 50%; top: 402px; left: 720px; z-index: -37;
}
.dot:nth-of-type(70) { box-shadow: -4px -4px 1px rgba(0, 0, 0, 0.3); background: #9880F4; width: 50px; height: 50px; border-radius: 50%; top: 239px; left: 403px; z-index: -29;
}

Home Page	Home
Developer	Joni Trythall
Username	jonitrythall
Uploaded	October 02, 2022
Rating	4
Size	3,692 Kb
Views	22,264

Do you need developer help for Ela Conf 2017 & Sass?

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!

Joni Trythall (jonitrythall) Script Codes

Name	Size
Simple CSS Flag	2,518 Kb
Unite Loader	2,630 Kb
Hinged Twitter Button	3,761 Kb
Weird Circle Loader	2,792 Kb
Flexbox Tinkering	1,796 Kb
Meat Selection	2,169 Kb
CSS Alarm Clock	3,302 Kb
Nested Noodle Loader	2,683 Kb
Solar Eclipse Loader	3,012 Kb
CSS Pencil Scoop Logo	2,304 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
A Pen by Shidhin	Shidhincr	5,015 Kb
Mapbox Directions with geolocation tracking	Pollardld	5,827 Kb
Sticky Navbar	Phantomesse	5,106 Kb
CMP5-Opdracht15	SannevanGastel	2,733 Kb
Price	Catcode	2,623 Kb
CSS Bot Confusion	Jpod	3,456 Kb
WRENCH - STAFF	Lolita-adams	1,608 Kb
Hovers with popups	Zacharyolson	2,380 Kb
Pagepilling.js	Blossk	6,554 Kb
Pure CSS Read More Arrow	Zephyr	1,747 Kb

Do you want hide your ip address?

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!