Profile
[f2u] LinkedIn Template
Mobile Friendly
Custom Colors
Free-User (HTML only)
WYSIWYG Friendly
LinkedIn website spoof. Converts to simplified mobile app layout on mobile phones. Great for an officeAU or just office themed characters. Doesn't include experience section because that shit is stressful to do irl let alone for characters who don't even really exist hahahaha...
USAGE INSTRUCTIONS
- Turn OFF Profile Text under WYSIWYG and ENABLE Code Editor in your display settings.
- I recommend using Circlejourney or some other code previewer while customizing the code.
- Any icons used within this code are from Font Awesome, and you can replace them with different ones if you know how to.
- DM here or on discord if you run into any issues you don't know how to fix.
Thank you!
<div style="position: absolute; top: 0px; left: 0px; background-color: #e9e9e9; width: 100%; min-height:100vh; z-index:1">
<!-- sticky pc "nav" bar -->
<div class="row no-gutters py-2 align-items-center hidden-lg-down" style="border-radius: 0px; z-index: 10; position: sticky; top: 0px; background:white; height:55px; padding-left:5%; box-shadow: 4px 0px 10px rgba(0,0,0,0.6)">
<i class="fa-brands fa-linkedin fa-3x" style="color:#0077b5"></i>
<div class="card col-2 ml-2 h-100 px-2 justify-content-center" style="background-color:#eef3f8; border:none; color:#707274">
<div class="row no-gutters align-items-center"><i class="fa-solid fa-magnifying-glass mx-2"></i> Search </div>
</div>
<div class="col justify-content-end" style="font-size:95%; color: #666666">
<div class="col-auto">
<span class="d-block text-center"><i class="fa-solid fa-house" style="font-size:140%; line-height:0"></i></span>
<span class="d-block" style="line-height:1">Home</span>
</div>
<div class="col-auto">
<span class="d-block text-center"><i class="fa-solid fa-people-simple" style="font-size:140%; line-height:0"></i></span>
<span class="d-block" style="line-height:1">My Network</span>
</div>
<div class="col-auto">
<span class="d-block text-center"><i class="fa-solid fa-suitcase" style="font-size:140%; line-height:0"></i></span>
<span class="d-block" style="line-height:1">Jobs</span>
</div>
<div class="col-auto">
<span class="d-block text-center"><i class="fa-solid fa-comment-dots" style="font-size:140%; line-height:0"></i></span>
<span class="d-block" style="line-height:1">Messaging</span>
</div>
<div class="col-auto">
<span class="d-block text-center"><i class="fa-solid fa-circle-user" style="font-size:140%; line-height:0"></i></span>
<span class="d-block" style="line-height:1">Me <i class="fa-solid fa-caret-down"></i></span>
</div>
</div>
</div>
<!-- sticky nav bar end -->
<!-- main content -->
<div class="row no-gutters pt-4 ml-lg-5 m-0 mb-5">
<!-- left column -->
<div class="col-lg-8 col-12 pr-lg-0 px-4">
<!-- main profile card-->
<div class="card" style="border:solid 1px #cccccc; border-radius:10px; background:white">
<!--=============================
HEADER IMAGE
adjust cropping with object-position
==============================-->
<img class="card-img-top"
src="https://assets.contenthub.wolterskluwer.com/api/public/content/img-ct-2023-large-enterprise-business-legislative-trends.jpg?v=14ffe2ca"
style="
object-fit:cover;
object-position: 0% 50%;
border-radius:10px 10px 0px 0px; height:200px;">
<!--=============================
CHARACTER HEADSHOT IMG
==============================-->
<div class="justify-content-center justify-content-lg-start">
<div class="card rounded-circle p-1 mx-auto ml-lg-4" style="border: solid 4px white;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover;
background-position: center;
height: 150px; width: 150px; position:absolute; top:100px;"></div>
</div>
<div class="card-body p-4" style="margin-top:45px; color:black">
<div class="row no-gutters pb-2">
<!--==================================
!!INFO COLUMN!!
====================================-->
<div class="col-lg-8 col-12 text-center text-lg-left" style="line-height:1.2">
<span class="d-block" style="font-size:150%; font-weight:500">
<!--===================
CHARACTER NAME
====================-->
Character Name
</span>
<span class="d-block mb-2" style="font-size:120%">
<!--===================
JOB TITLE
====================-->
Job Title at Company Name</span>
<span style="color:#686868">
<!--===================
LOCATION
====================-->
General Locale
</span> <span class="hidden-lg-down"> • </span><span class="hidden-lg-down" style="color:#136cc4; font-weight:600">Contact Info</span>
<span class="d-block my-2" style="color:#686868">
500+ connections
</span>
</div>
<!-- info column end-->
<!--=================================
AFFLIATIONS COLUMN(hidden on mobile)
==================================-->
<div class="col-lg-4 hidden-lg-down">
<!--=====COMPANY 1=====-->
<div class="row no-gutters align-items-center">
<!--====COMPANY LOGO IMG===-->
<div class="card rounded-circle mb-2" style="border:none;
background: url(https://img.freepik.com/premium-vector/finance-business-logo-with-chart-eagle-design-concept_726484-58.jpg?w=2000);
background-size:cover; background-position:center;
width:45px; height:45px;"></div>
<span class="ml-2" style="font-weight:600">
<!--===COMPANY NAME===-->
Company Name
</span>
</div>
<!--=====COMPANY END=====-->
<!--=====UNIVERSITY=====-->
<div class="row no-gutters align-items-center">
<!--===UNVERSITY LOGO IMG===-->
<div class="card rounded-circle" style="border:none;
background: url(https://media.istockphoto.com/id/1150645589/vector/color-logo-of-the-school.jpg?s=612x612&w=0&k=20&c=ZkTcftJRC6On3qENe6NLgMvWRsWirSIb9c3dCcNQdcw=);
background-size:cover; background-position:center;
width:40px; height:40px;"></div>
<span class="ml-2" style="font-weight:600">
<!--===UNVERSITY NAME====-->
University Name</span>
</div>
<!--======UNIVERSITY END======-->
<!--===================================================
COPY AND PASTE ADDITIONAL ORGANISATIONS ABOVE THIS LINE
=====================================================-->
</div>
<!-- affliations column end-->
</div>
<!--buttons-->
<div class="row no-gutters justify-content-center justify-content-lg-start" style="column">
<div class="btn btn-outline-primary mr-2" style="border-radius:25px; font-weight:600">Message</div>
<div class="btn btn-outline-primary mr-2" style="border-radius:25px; font-weight:600"><i class="fa-regular fa-plus"></i> Follow</div>
<div class="btn btn-outline-secondary" disabled style="border-radius:25px; font-weight:600">More</div>
</div>
<!--buttons end-->
</div>
</div>
<!-- main profile card end-->
<!--==========================
ABOUT CARD
===========================-->
<div class="card mt-3 p-4" style="color:black; border:solid 1px #cccccc; border-radius:10px; background:white">
<span class="d-block mb-2" style="font-size:130%; font-weight:500">About</span>
<div class="text" style="line-height:1.2">
<!--=====SHORT CHARACTER WRITEUP HERE======-->
<p>Short writeup about your character here!</p>
<p>Seperate into paragraphs with p tags. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor nec feugiat nisl pretium fusce id velit ut. Sem et tortor consequat id porta nibh. Enim sit amet venenatis urna cursus eget nunc scelerisque. </p>
</div>
</div>
<!--==========================
ABOUT CARD END
===========================-->
<!--==========================
SKILLS CARD
===========================-->
<div class="card mt-3 p-4" style="color:black; border:solid 1px #cccccc; border-radius:10px 10px 0px 0px; border-bottom:none; background:white">
<span class="d-block" style="font-size:130%; font-weight:500">Skills</span>
<!-- skill 1-->
<span class="d-block mt-3" style="font-size:110%; font-weight:500">
<!--============
SKILL 1
=============-->
Interpersonal Skills
</span>
<!--skill 2 company endorsement, deletable section-->
<div class="row no-gutters align-items-center mt-2">
<!--=====COMPANY LOGO=====-->
<div class="col-auto card rounded-circle" style="border:none;
background: url(https://img.freepik.com/premium-vector/finance-business-logo-with-chart-eagle-design-concept_726484-58.jpg?w=2000);
background-size:cover; background-position:center;
width:30px; height:30px;"></div>
<span class="col ml-2" style="color:#686868; line-height:1.1">
<!--=====ENDORSEMENT COUNT=====-->
Endorsed by 19 colleagues at Company Name
</span>
</div>
<!--skill 2 company endorsement, deletable section-->
<span class="pt-2 pb-3" style="color:#686868; border-bottom:solid 1px #cccccc"><i class="fa-solid fa-user-group mr-2 text-center" style="width:30px; font-size:110%"></i>
<!--=====ENDORSEMENT COUNT=====-->
29 endorsements
</span>
<!-- skill 1 end-->
<!-- skill 2-->
<span class="d-block mt-3" style="font-size:110%; font-weight:500">
<!--============
SKILL 2
=============-->
Customer Service
</span>
<!--skill 2 company endorsement, deletable section-->
<div class="row no-gutters align-items-center mt-2">
<!--=====COMPANY LOGO=====-->
<div class="card rounded-circle" style="border:none;
background: url(https://img.freepik.com/premium-vector/finance-business-logo-with-chart-eagle-design-concept_726484-58.jpg?w=2000);
background-size:cover; background-position:center;
width:30px; height:30px;"></div>
<span class="col ml-2" style="color:#686868; line-height:1.1">
<!--=====ENDORSEMENT COUNT=====-->
Endorsed by 12 colleagues at Company Name
</span>
</div>
<!-- skill 2 company endorsment end-->
<span class="pt-2 pb-3" style="color:#686868; border-bottom:solid 1px #cccccc"><i class="fa-solid fa-user-group mr-2" style="width:30px; font-size:110%"></i>
<!--=====ENDORSEMENT COUNT=====-->
25 endorsements
</span>
<!-- skill 2 end-->
<!-- skill 3-->
<span class="d-block mt-3" style="font-size:110%; font-weight:500">
Sales Management</span>
<!--skill 3 company endorsement, deletable section-->
<div class="row no-gutters align-items-center mt-2">
<!--=====COMPANY LOGO=====-->
<div class="card rounded-circle" style="border:none;
background: url(https://img.freepik.com/premium-vector/finance-business-logo-with-chart-eagle-design-concept_726484-58.jpg?w=2000);
background-size:cover; background-position:center;
width:30px; height:30px;"></div>
<span class="col ml-2" style="color:#686868; line-height:1.1">
<!--=====ENDORSEMENT COUNT=====-->
Endorsed by 10 colleagues at Company Name
</span>
</div>
<!-- skill 2 company endorsment end-->
<span class="pt-2" style="color:#686868"><i class="fa-solid fa-user-group mr-2" style="width:30px; font-size:110%"></i>
<!--=====ENDORSEMENT COUNT=====-->
10 endorsements
</span>
<!-- skill 3 end-->
</div>
<!-- show more-->
<div class="card text-center p-2" style="color:#686868; background:white; border:solid 1px #cccccc; border-radius:0px 0px 10px 10px">
<span>Show all 45 skills<i class="fa-regular fa-arrow-right ml-1"></i></span>
</div>
<!--==========================
SKILLS CARD END
===========================-->
</div>
<!-- left column end-->
<!-- right column (does not display on mobile) -->
<div class="col-4 hidden-lg-down px-3">
<!--============================
PEOPLE ALSO VIEWED CARD
==============================-->
<div class="card p-4" style="color:black; border:solid 1px #cccccc; border-bottom:none; border-radius:10px 10px 0px 0px; background:white">
<span class="d-block" style="font-size:130%; font-weight: 500"> People also viewed</span>
<!-- person 1-->
<div class="row no-gutters py-3" style="border-bottom:solid 1px #cccccc">
<div class="col-auto">
<!--=============================
PERSON 1 HEADSHOT IMG & LINK
==============================-->
<a class="card rounded-circle" style="height:60px; width:60px;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover; background-position: center;
"
href="LINK"
></a>
</div>
<div class="col px-3 py-1">
<span style="font-size:110%; font-weight:500">
<!--===============
PERSON 1 NAME
=================-->
Character Name
</span>
<span style="color:#686868; font-size:95%">•
<!--===============
CONNECTION LVL 1-3
================-->
3rd+
</span>
<span class="d-block" style="color:#686868; font-size:95%">
<!--===============
PERSON 1 TITLE
=================-->
Job Title at Company Name
</span>
<div class="btn btn-outline-primary mt-2 mb-2" style="border-radius:25px"><i class="fa-solid fa-lock-keyhole mr-1"></i> Message</div>
</div>
</div>
<!-- person 1 end -->
<!-- person 2-->
<div class="row no-gutters py-3" style="border-bottom:solid 1px #cccccc">
<div class="col-auto">
<!--=============================
PERSON 2 HEADSHOT IMG & LINK
==============================-->
<a class="card rounded-circle" style="height:60px; width:60px;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover; background-position: center;"
href="LINK"
></a>
</div>
<div class="col px-3 py-1">
<span style="font-size:110%; font-weight:500">
<!--===============
PERSON 2 NAME
=================-->
Character Name
</span>
<span style="color:#686868; font-size:95%">•
<!--===============
CONNECTION LVL 1-3
================-->
3rd+
</span>
<span class="d-block" style="color:#686868; font-size:95%">
<!--===============
PERSON 2 TITLE
=================-->
Job Title at Company Name
</span>
<div class="btn btn-outline-primary mt-2 mb-2" style="border-radius:25px"><i class="fa-solid fa-lock-keyhole mr-1"></i> Message</div>
</div>
</div>
<!-- person 2 end -->
<!-- person 3-->
<div class="row no-gutters py-3" style="border-bottom:solid 1px #cccccc">
<div class="col-auto">
<!--=============================
PERSON 3 HEADSHOT IMG & LINK
==============================-->
<a class="card rounded-circle" style="height:60px; width:60px;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover; background-position: center;"
href="LINK"
></a>
</div>
<div class="col px-3 py-1">
<span style="font-size:110%; font-weight:500">
<!--===============
PERSON 3 NAME
=================-->
Character Name
</span>
<span style="color:#686868; font-size:95%">•
<!--===============
CONNECTION LVL 1-3
================-->
3rd+
</span>
<span class="d-block" style="color:#686868; font-size:95%">
<!--===============
PERSON 3 TITLE
=================-->
Job Title at Company Name
</span>
<div class="btn btn-outline-primary mt-2 mb-2" style="border-radius:25px"><i class="fa-solid fa-lock-keyhole mr-1"></i> Message</div>
</div>
</div>
<!-- person 3 end -->
<!-- person 4-->
<div class="row no-gutters py-3" style="border-bottom:solid 1px #cccccc">
<div class="col-auto">
<!--=============================
PERSON 4 HEADSHOT IMG & LINK
==============================-->
<a class="card rounded-circle" style="height:60px; width:60px;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover; background-position: center;"
href="LINK"
></a>
</div>
<div class="col px-3 py-1">
<span style="font-size:110%; font-weight:500">
<!--===============
PERSON 4 NAME
=================-->
Character Name
</span>
<span style="color:#686868; font-size:95%">•
<!--===============
CONNECTION LVL 1-3
================-->
3rd+
</span>
<span class="d-block" style="color:#686868; font-size:95%">
<!--===============
PERSON 4 TITLE
=================-->
Job Title at Company Name
</span>
<div class="btn btn-outline-primary mt-2 mb-2" style="border-radius:25px"><i class="fa-solid fa-lock-keyhole mr-1"></i> Message</div>
</div>
</div>
<!-- person 4 end -->
<!-- person 5-->
<div class="row no-gutters pt-3">
<div class="col-auto">
<!--=============================
PERSON 5 HEADSHOT IMG & LINK
==============================-->
<a class="card rounded-circle" style="height:60px; width:60px;
background: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover; background-position: center;"
href="LINK"
></a>
</div>
<div class="col px-3 py-1">
<span style="font-size:110%; font-weight:500">
<!--===============
PERSON 5 NAME
=================-->
Character Name
</span>
<span style="color:#686868; font-size:95%">•
<!--===============
CONNECTION LVL 1-3
================-->
3rd+
</span>
<span class="d-block" style="color:#686868; font-size:95%">
<!--===============
PERSON 5 NAME
=================-->
Job Title at Company Name
</span>
<div class="btn btn-outline-primary mt-2" style="border-radius:25px"><i class="fa-solid fa-lock-keyhole mr-1"></i> Message</div>
</div>
</div>
<!-- person 5 end -->
</div>
<!-- show more-->
<div class="card text-center p-2" style="color:#686868; background:white; border:solid 1px #cccccc; border-radius:0px 0px 10px 10px">
<span>Show More<i class="fa-regular fa-angle-down ml-1"></i></span>
</div>
<!--============================
PEOPLE ALSO VIEWED CARD END
==============================-->
</div>
<!-- right column end-->
</div>
<!--credit, please don't remove!-->
<a class="mt-3" href="" style="color:#8c8c8c; margin-left:5%;"> <i class="fa-regular fa-code mr-1"></i> Coded by ELIM__08</a>
</div>
