Envato Remix Contest Challenge

Developer
Robert Borghesi
Size
5,017 Kb
Views
32,384
  1. Envato Remix Contest Challenge Previews
  2. Envato Remix Contest Challenge HTML Codes
  3. Envato Remix Contest Challenge CSS Codes

How do I make an envato remix contest challenge?

My entry to the Envato Contest. No js is allowed, it's CSS power only.. What is a envato remix contest challenge? How do you make a envato remix contest challenge? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Envato Remix Contest Challenge Previews
IQ Test

Envato Remix Contest Challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Envato Remix Contest Challenge</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>	<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->
<aside class="profile-card"> <header> <!-- here’s the avatar --> <a href="https://instagram.com/dghez_/"> <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11358032_851510341605132_2138075404_n.jpg"> </a> <!-- the username --> <h1>dghez</h1> <!-- and role or location --> <h2>front-end dev</h2> </header> <!-- bit of a bio; who are you? --> <div class="profile-bio"> <p>I'm still a junior developer, <br>but I'm trying to be a kick-ass one.</p> </div> <!-- some social links to show off --> <ul class="profile-social-links"> <!-- twitter - el clásico --> <li> <a href="https://twitter.com/dghez_"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg"> </a> </li> <!-- envato – use this one to link to your marketplace profile --> <li> <a href="http://themeforest.net/user/dborghez"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg"> </a> </li> <!-- codepen - your codepen profile--> <li> <a href="http://codepen.io/dghez"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg"> </a> </li> <!-- add or remove social profiles as you see fit --> </ul>
</aside>
<!-- that’s all folks! -->
</body>
</html>

Envato Remix Contest Challenge - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
@keyframes scale { from { -webkit-transform: scale(0.4); transform: scale(0.4); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
@keyframes bgfix { from { background: rgba(255, 255, 255, 0); } to { background: white; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); }
}
@keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes scale { from { -webkit-transform: scale(0.4); transform: scale(0.4); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
@-webkit-keyframes bgfix { from { background: rgba(255, 255, 255, 0); } to { background: white; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); }
}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes colorsorange { 0% { background: #f4e3c9; } 20% { background: #F4D9D0; } 40% { background: #F4E0E9; } 60% { background: #F4EFEC; } 80% { background: #FCF2C1; } 100% { background: #FFE6E9; }
}
@-webkit-keyframes colorsblue { 0% { background: #b6dbe1; } 20% { background: #B4DFE6; } 40% { background: #A0D1E0; } 60% { background: #C4DFD6; } 80% { background: #8ADCF2; } 100% { background: #B8D1E7; }
}
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%; font-family: 'Open Sans', sans-serif;
}
body { background: url("http://s4.postimg.org/r8gvgk7u5/22940_anime_scenery.jpg"); background-size: cover; background-position: 50% 50%;
}
.profile-card { background: rgba(255, 255, 255, 0); width: 350px; height: 350px; left: 0; right: 0; margin: -160px auto 0 auto; top: 50%; position: relative; text-align: center; padding: 20px; border-radius: 50%; -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s; animation: scale 0.7s 1.5s, bgfix 0.7s 1.5s 1 forwards; -webkit-animation: scale 0.7s 1.5s, bgfix 0.7s 1.5s 1 forwards;
}
.profile-card:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}
.profile-card:before { content: ""; position: absolute; width: 360px; left: -5px; top: -5px; height: 360px; z-index: -1; border-radius: 50%; background: #f4e3c9; mix-blend-mode: multiply; opacity: 0; -webkit-transition: background 1s; transition: background 1s; animation: rotate 5s 7s infinite linear, scale 5s 2s, fadein 3s 2s 1 forwards, colorsorange 10s infinite linear alternate; -webkit-animation: rotate 5s 7s infinite linear, scale 5s 2s, fadein 3s 2s 1 forwards, colorsorange 10s infinite linear alternate; -webkit-transform-origin: 177px 180px; transform-origin: 177px 180px;
}
.profile-card:after { content: ""; position: absolute; width: 360px; right: -5px; top: -5px; height: 360px; z-index: -1; border-radius: 50%; background: #b6dbe1; opacity: 0; -webkit-transition: background 1s; transition: background 1s; mix-blend-mode: multiply; -webkit-transform-origin: 183px 180px; transform-origin: 183px 180px; animation: rotate 5s 7s infinite linear, scale 5s 2s, fadein 3s 2s 1 forwards, colorsblue 10s infinite linear alternate; -webkit-animation: rotate 5s 7s infinite linear, scale 5s 2s, fadein 3s 2s 1 forwards, colorsblue 10s infinite linear alternate;
}
header { z-index: 1; position: relative; opacity: 0; animation: scale 0.7s 2.5s, fadein 0.7s 2.5s 1 forwards; -webkit-animation: scale 0.7s 2.5s, fadein 0.7s 2.5s 1 forwards;
}
header img { max-width: 110px; border-radius: 50%; z-index: 1; position: relative; margin-top: 20px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s;
}
header img:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}
h1 { font-size: 18px; text-transform: uppercase; color: #212121; font-weight: 600; margin: 0; letter-spacing: 1px;
}
h2 { font-size: 11px; margin: 0; font-weight: 400; text-transform: uppercase;
}
.profile-bio { position: relative; z-index: 1; font-size: 13px; opacity: 0; animation: scale 0.7s 3.2s, fadein 0.7s 3.2s 1 forwards; -webkit-animation: scale 0.7s 3.2s, fadein 0.7s 3.2s 1 forwards;
}
ul { list-style-type: none; padding: 0; width: 100%; position: relative;
}
ul li { display: inline-block; width: 35px; height: 35px; position: relative; opacity: 0; border-radius: 50%;
}
ul li:nth-child(1) { animation: scale 0.5s 3.8s, fadein 0.55s 3.8s 1 forwards; -webkit-animation: scale 0.5s 3.8s, fadein 0.55s 3.8s 1 forwards;
}
ul li:nth-child(1):after { background: #55ACEE;
}
ul li:nth-child(2) { animation: scale 0.5s 4.2s, fadein 0.55s 4.2s 1 forwards; -webkit-animation: scale 0.5s 4.2s, fadein 0.55s 4.2s 1 forwards;
}
ul li:nth-child(2):after { background: #82B541;
}
ul li:nth-child(3) { animation: scale 0.5s 4.6s, fadein 0.55s 4.6s 1 forwards; -webkit-animation: scale 0.5s 4.6s, fadein 0.55s 4.6s 1 forwards;
}
ul li:nth-child(3):after { background: #2F2F2F;
}
ul li:hover:after { opacity: 1;
}
ul li:after { opacity: 0; content: ""; position: absolute; width: 37px; height: 37px; top: 0px; left: 0px; z-index: -2; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; animation: rotate 2s 7s infinite linear; -webkit-animation: rotate 2s 7s infinite linear; border-radius: 50%; -webkit-transform-origin: 18px 18px; transform-origin: 18px 18px;
}
ul li img { max-width: 35px; border-radius: 50%; padding: 5px; position: relative; background: white;
}
Envato Remix Contest Challenge - Script Codes
Envato Remix Contest Challenge - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 3
Size 5,017 Kb
Views 32,384
Do you need developer help for Envato Remix Contest Challenge?

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!

Robert Borghesi (dghez) Script Codes
Name
Fullscreen slice hero slider
Continuous scrolling background of sticky header
Easy parallax header
Css Rotating 3d cubes different speed
Pure custom css animation on new google logo
Hover otating cards folder of OnePiece characters
Pulse Avatar on click with TweenMax
Animated title moving on scroll
SlamDunk Parallax on MouseMove
Gradient border on hover - Scorer of fifa world cup
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!