HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Workingcode.in</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.workingcode.com/workingcodecss/4/workingcode.css">
<link rel="stylesheet" href="https://www.workingcode.com/lib/workingcode-theme-blue-grey.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>
</head>
<body class="workingcode-theme-l5">
<!-- Navbar -->
<div class="workingcode-top">
<div class="workingcode-bar workingcode-theme-d2 workingcode-left-align workingcode-large">
<a class="workingcode-bar-item workingcode-button workingcode-hide-medium workingcode-hide-large workingcode-right workingcode-padding-large workingcode-hover-white workingcode-large workingcode-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-large workingcode-theme-d4"><i class="fa fa-home workingcode-margin-right"></i>Logo</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-hide-small workingcode-padding-large workingcode-hover-white" title="News"><i class="fa fa-globe"></i></a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-hide-small workingcode-padding-large workingcode-hover-white" title="Account Settings"><i class="fa fa-user"></i></a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-hide-small workingcode-padding-large workingcode-hover-white" title="Messages"><i class="fa fa-envelope"></i></a>
<div class="workingcode-dropdown-hover workingcode-hide-small">
<button class="workingcode-button workingcode-padding-large" title="Notifications"><i class="fa fa-bell"></i><span class="workingcode-badge workingcode-right workingcode-small workingcode-green">3</span></button>
<div class="workingcode-dropdown-content workingcode-card-4 workingcode-bar-block" style="width:300px">
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">One new friend request</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">John Doe posted on your wall</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button">Jane likes your post</a>
</div>
</div>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-hide-small workingcode-right workingcode-padding-large workingcode-hover-white" title="My Account">
<img src="https://www.workingcode.com/workingcodeimages/avatar2.png" class="workingcode-circle" style="height:23px;width:23px" alt="Avatar">
</a>
</div>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="workingcode-bar-block workingcode-theme-d2 workingcode-hide workingcode-hide-large workingcode-hide-medium workingcode-large">
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-large">Link 1</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-large">Link 2</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-large">Link 3</a>
<a href="javascript:void(0)" class="workingcode-bar-item workingcode-button workingcode-padding-large">My Profile</a>
</div>
<!-- Page Container -->
<div class="workingcode-container workingcode-content" style="max-width:1400px;margin-top:80px">
<!-- The Grid -->
<div class="workingcode-row">
<!-- Left Column -->
<div class="workingcode-col m3">
<!-- Profile -->
<div class="workingcode-card workingcode-round workingcode-white">
<div class="workingcode-container">
<h4 class="workingcode-center">My Profile</h4>
<p class="workingcode-center"><img src="https://www.workingcode.com/workingcodeimages/avatar3.png" class="workingcode-circle" style="height:106px;width:106px" alt="Avatar"></p>
<hr>
<p><i class="fa fa-pencil fa-fw workingcode-margin-right workingcode-text-theme"></i> Piyush Kalra</p>
<p><i class="fa fa-home fa-fw workingcode-margin-right workingcode-text-theme"></i> Noida</p>
<p><i class="fa fa-birthday-cake fa-fw workingcode-margin-right workingcode-text-theme"></i> June 20,1992</p>
</div>
</div>
<br>
<!-- Accordion -->
<div class="workingcode-card workingcode-round">
<div class="workingcode-white">
<button onclick="myFunction('Demo1')" class="workingcode-button workingcode-block workingcode-theme-l1 workingcode-left-align"><i class="fa fa-circle-o-notch fa-fw workingcode-margin-right"></i> My Groups</button>
<div id="Demo1" class="workingcode-hide workingcode-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" class="workingcode-button workingcode-block workingcode-theme-l1 workingcode-left-align"><i class="fa fa-calendar-check-o fa-fw workingcode-margin-right"></i> My Events</button>
<div id="Demo2" class="workingcode-hide workingcode-container">
<p>Some other text..</p>
</div>
<button onclick="myFunction('Demo3')" class="workingcode-button workingcode-block workingcode-theme-l1 workingcode-left-align"><i class="fa fa-users fa-fw workingcode-margin-right"></i> My Photos</button>
<div id="Demo3" class="workingcode-hide workingcode-container">
<div class="workingcode-row-padding">
<br>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/lights.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/nature.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/mountains.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/forest.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/nature.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/snow.jpg" style="width:100%" class="workingcode-margin-bottom">
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Interests -->
<div class="workingcode-card workingcode-round workingcode-white workingcode-hide-small">
<div class="workingcode-container">
<p>Interests</p>
<p>
<span class="workingcode-tag workingcode-small workingcode-theme-d5">News</span>
<span class="workingcode-tag workingcode-small workingcode-theme-d4">Workincode</span>
<span class="workingcode-tag workingcode-small workingcode-theme-d3">Labels</span>
<span class="workingcode-tag workingcode-small workingcode-theme-d2">Games</span>
<span class="workingcode-tag workingcode-small workingcode-theme-d1">Friends</span>
<span class="workingcode-tag workingcode-small workingcode-theme">Games</span>
<span class="workingcode-tag workingcode-small workingcode-theme-l1">Friends</span>
<span class="workingcode-tag workingcode-small workingcode-theme-l2">Food</span>
<span class="workingcode-tag workingcode-small workingcode-theme-l3">Design</span>
<span class="workingcode-tag workingcode-small workingcode-theme-l4">Art</span>
<span class="workingcode-tag workingcode-small workingcode-theme-l5">Photos</span>
</p>
</div>
</div>
<br>
<!-- Alert Box -->
<div class="workingcode-container workingcode-display-container workingcode-round workingcode-theme-l4 workingcode-border workingcode-theme-border workingcode-margin-bottom workingcode-hide-small">
<span onclick="this.parentElement.style.display='none'" class="workingcode-button workingcode-theme-l3 workingcode-display-topright">
<i class="fa fa-remove"></i>
</span>
<p><strong>Hey!</strong></p>
<p>People are looking at your profile. Find out who.</p>
</div>
<!-- End Left Column -->
</div>
<!-- Middle Column -->
<div class="workingcode-col m7">
<div class="workingcode-row-padding">
<div class="workingcode-col m12">
<div class="workingcode-card workingcode-round workingcode-white">
<div class="workingcode-container workingcode-padding">
<h6 class="workingcode-opacity">Social Media template by Workingcode.in</h6>
<p contenteditable="true" class="workingcode-border workingcode-padding">Status: Feeling Blue</p>
<button type="button" class="workingcode-button workingcode-theme"><i class="fa fa-pencil"></i> Post</button>
</div>
</div>
</div>
</div>
<div class="workingcode-container workingcode-card workingcode-white workingcode-round workingcode-margin"><br>
<img src="https://www.workingcode.com/workingcodeimages/avatar2.png" alt="Avatar" class="workingcode-left workingcode-circle workingcode-margin-right" style="width:60px">
<span class="workingcode-right workingcode-opacity">1 min</span>
<h4>Piyush Kalra</h4><br>
<hr class="workingcode-clear">
<p>Welcome to Working Code, the ultimate Servicenow developer forum community. We have hundreds of quality scripts and solutions that address REAL-WORLD challenges. Connect with like-minded developers, exchange knowledge, and stay updated on the latest Servicenow trends and best practices.</p>
<div class="workingcode-row-padding" style="margin:0 -16px">
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/lights.jpg" style="width:100%" alt="Northern Lights" class="workingcode-margin-bottom">
</div>
<div class="workingcode-half">
<img src="https://www.workingcode.com/workingcodeimages/nature.jpg" style="width:100%" alt="Nature" class="workingcode-margin-bottom">
</div>
</div>
<button type="button" class="workingcode-button workingcode-theme-d1 workingcode-margin-bottom"><i class="fa fa-thumbs-up"></i> Like</button>
<button type="button" class="workingcode-button workingcode-theme-d2 workingcode-margin-bottom"><i class="fa fa-comment"></i> Comment</button>
</div>
<div class="workingcode-container workingcode-card workingcode-white workingcode-round workingcode-margin"><br>
<img src="https://www.workingcode.com/workingcodeimages/avatar5.png" alt="Avatar" class="workingcode-left workingcode-circle workingcode-margin-right" style="width:60px">
<span class="workingcode-right workingcode-opacity">16 min</span>
<h4>Puja K</h4><br>
<hr class="workingcode-clear">
<p>Welcome to Working Code, the ultimate Servicenow developer forum community. We have hundreds of quality scripts and solutions that address REAL-WORLD challenges. Connect with like-minded developers, exchange knowledge, and stay updated on the latest Servicenow trends and best practices.</p>
<button type="button" class="workingcode-button workingcode-theme-d1 workingcode-margin-bottom"><i class="fa fa-thumbs-up"></i> Like</button>
<button type="button" class="workingcode-button workingcode-theme-d2 workingcode-margin-bottom"><i class="fa fa-comment"></i> Comment</button>
</div>
<div class="workingcode-container workingcode-card workingcode-white workingcode-round workingcode-margin"><br>
<img src="https://www.workingcode.com/workingcodeimages/avatar6.png" alt="Avatar" class="workingcode-left workingcode-circle workingcode-margin-right" style="width:60px">
<span class="workingcode-right workingcode-opacity">32 min</span>
<h4>Nand Kishore</h4><br>
<hr class="workingcode-clear">
<p>Have you seen this?</p>
<img src="https://www.workingcode.com/workingcodeimages/nature.jpg" style="width:100%" class="workingcode-margin-bottom">
<p>Welcome to Working Code, the ultimate Servicenow developer forum community. We have hundreds of quality scripts and solutions that address REAL-WORLD challenges. Connect with like-minded developers, exchange knowledge, and stay updated on the latest Servicenow trends and best practices.</p>
<button type="button" class="workingcode-button workingcode-theme-d1 workingcode-margin-bottom"><i class="fa fa-thumbs-up"></i> Like</button>
<button type="button" class="workingcode-button workingcode-theme-d2 workingcode-margin-bottom"><i class="fa fa-comment"></i> Comment</button>
</div>
<!-- End Middle Column -->
</div>
<!-- Right Column -->
<div class="workingcode-col m2">
<div class="workingcode-card workingcode-round workingcode-white workingcode-center">
<div class="workingcode-container">
<p>Upcoming Events:</p>
<img src="https://www.workingcode.com/workingcodeimages/forest.jpg" alt="Forest" style="width:100%;">
<p><strong>Holiday</strong></p>
<p>Friday 15:00</p>
<p><button class="workingcode-button workingcode-block workingcode-theme-l4">Info</button></p>
</div>
</div>
<br>
<div class="workingcode-card workingcode-round workingcode-white workingcode-center">
<div class="workingcode-container">
<p>Friend Request</p>
<img src="https://www.workingcode.com/workingcodeimages/avatar6.png" alt="Avatar" style="width:50%"><br>
<span>Nikhil Jain</span>
<div class="workingcode-row workingcode-opacity">
<div class="workingcode-half">
<button class="workingcode-button workingcode-block workingcode-green workingcode-section" title="Accept"><i class="fa fa-check"></i></button>
</div>
<div class="workingcode-half">
<button class="workingcode-button workingcode-block workingcode-red workingcode-section" title="Decline"><i class="fa fa-remove"></i></button>
</div>
</div>
</div>
</div>
<br>
<div class="workingcode-card workingcode-round workingcode-white workingcode-padding-16 workingcode-center">
<p>ADS</p>
</div>
<br>
<div class="workingcode-card workingcode-round workingcode-white workingcode-padding-32 workingcode-center">
<p><i class="fa fa-bug workingcode-xxlarge"></i></p>
</div>
<!-- End Right Column -->
</div>
<!-- End Grid -->
</div>
<!-- End Page Container -->
</div>
<br>
<!-- Footer -->
<footer class="workingcode-container workingcode-theme-d3 workingcode-padding-16">
<h5>Footer</h5>
</footer>
<footer class="workingcode-container workingcode-theme-d5">
<p>Powered by <a href="https://www.workingcode.com/workingcodecss/default.asp" target="_blank">Workingcode.in</a></p>
</footer>
<script>
// Accordion
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("workingcode-show") == -1) {
x.className += " workingcode-show";
x.previousElementSibling.className += " workingcode-theme-d1";
} else {
x.className = x.className.replace("workingcode-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" workingcode-theme-d1", "");
}
}
// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("workingcode-show") == -1) {
x.className += " workingcode-show";
} else {
x.className = x.className.replace(" workingcode-show", "");
}
}
</script>
</body>
</html>
Custom profile picture page in ServiceNow
Working Code Edited question October 2, 2024