Profile Card Envato Remix Challenge

Developer
Jimmy Van Der Sleen
Size
3,914 Kb
Views
4,048
  1. Profile Card Envato Remix Challenge Previews
  2. Profile Card Envato Remix Challenge HTML Codes
  3. Profile Card Envato Remix Challenge CSS Codes

How do I make an profile card envato remix challenge?

Check out the Remix competition page for details of prizes and updates of the winners!. What is a profile card envato remix challenge? How do you make a profile card envato remix challenge? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.

Profile Card Envato Remix Challenge Previews
IQ Test

Profile Card Envato Remix Challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Profile Card Envato Remix 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://tutsplus.com"> <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/192868/profile/profile-512_1.jpg"> </a> <!-- the username --> <h1>Jimmy van der Sleen</h1> <!-- and role or location --> <h2>Front-end Developer</h2> </header> <!-- bit of a bio; who are you? --> <div class="profile-bio"> <p>Hello, I'm a front-end Developer from the Netherlands. I'm always trying to expand my skills in HTML, CSS and JavaScript. I love trying new things on the web.</p> </div> <!-- some social links to show off --> <ul class="profile-social-links"> <!-- twitter - el clásico --> <li> <a href="https://twitter.com/sjimsters"> <i class="fa fa-twitter"></i> </a> </li> <!-- envato – use this one to link to your marketplace profile --> <li> <a href="https://nl.linkedin.com/pub/jimmy-van-der-sleen/5a/765/840"> <i class="fa fa-linkedin"></i> </a> </li> <!-- codepen - your codepen profile--> <li> <a href="https://codepen.io/sjimster"> <i class="fa fa-codepen"></i> </a> </li> <!-- add or remove social profiles as you see fit --> </ul>
</aside>
<!-- that’s all folks! -->
</body>
</html>

Profile Card Envato Remix Challenge - Script Codes CSS Codes

/* go on then, styles go here.. knock yourself out! */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300);
body { background-color: #339999; font-family: 'Roboto', sans-serif; font-weight: 100;
}
aside { width: 600px; background-color: #333; height: 300px; margin: 20px auto; position: relative; overflow: hidden; box-shadow: 0px 0px 20px #333;
}
aside header img { position: absolute; top: 0px; left: -100px; width: 300px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
aside header h1 { color: #339999; position: absolute; left: 235px; top: 90px; font-size: 2.2em; font-weight: 300; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
aside header h1:after { content: ""; position: absolute; height: 2px; width: 100%; left: 0; display: block; background-color: #339999; margin-top: 5px; -webkit-transition: all 0.1s; transition: all 0.1s; opacity: 0.1;
}
aside header h2 { color: #c1c1c1; position: absolute; left: 300px; top: 150px; font-weight: 100; font-size: 1.4em; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
aside .profile-bio p { position: absolute; left: 620px; top: 100px; width: 365px; color: #fff; font-weight: 100; font-size: 1em; line-height: 22px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transition-delay: 0s; transition-delay: 0s;
}
aside .profile-social-links { position: absolute; left: 58%; bottom: -100px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
aside .profile-social-links li { display: inline-block; height: 40px; width: 40px;
}
aside .profile-social-links li a { color: #fff; font-size: 1.5em; padding: 5px;
}
aside .profile-social-links li a i { -webkit-transition: all 0.2s; transition: all 0.2s;
}
aside .profile-social-links li a:hover { color: #339999; border-bottom: 2px solid #339999;
}
aside .profile-social-links li a:hover i { -webkit-transform: translateY(-5px); transform: translateY(-5px);
}
aside:hover img { left: -100px; border-radius: 0; top: 0; left: 0; height: 300px; width: 300px; opacity: 0.1; border: none; box-shadow: none;
}
aside:hover h1 { left: 220px; top: 0px; font-size: 2em; -webkit-transition-delay: 0s; transition-delay: 0s;
}
aside:hover h1:after { height: 26px; width: 100%; left: 0; margin-top: 5px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; opacity: 0.8;
}
aside:hover h2 { left: 225px; top: 50px; font-size: 1.2em; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; color: #fff;
}
aside:hover .profile-bio p { left: 220px; -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
aside:hover .profile-social-links { bottom: 0px;
}
Profile Card Envato Remix Challenge - Script Codes
Profile Card Envato Remix Challenge - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 15, 2023
Rating 3
Size 3,914 Kb
Views 4,048
Do you need developer help for Profile Card Envato Remix 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!

Jimmy Van Der Sleen (sjimster) Script Codes
Name
Custom GoogleMaps
Website Header SVG Animation
SVG Handwriting test
Flexbox vertical slide menu
Simple image slider
SCSS BEM Tabs system
PreLoad page
Css 3D Cube try-out
Fancy input fields
Svg loading circle
Create amazing blog posts 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!