Hello forum,
I have a card with labels and logo image that show information from database. The card also has a background image displayed on it which is gotten from database as well.
Please how can I print the card with the labels, the logo and the background image, and also the label control colors to appear the way they appear on the web page?
Here is my HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="stylesheet" href="style.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 16px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div class="wrapper">
<nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
<ul class="list-unstyled sidebar-header" style="padding: 10px; margin: 0 auto; margin-top: 2%;">
<li style="margin: 0 7px;">
<asp:Label runat="server" ID="id" Font-Size="9pt" ForeColor="#546579" Font-Bold="true" Text="ID"></asp:Label>
</li>
<li style="margin: 0 7px;">
<asp:Label ID="named" runat="server" Font-Size="10pt" Text="NAME" ForeColor="White"></asp:Label>
</li>
</ul>
<ul class="nav navbar-nav list-unstyled components">
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li>
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
</ul>
<ul class="list-unstyled components">
<li class="nav-item"><a href="#">Page 5</a>
</li>
</ul>
</nav>
<!--Main Page Content -->
<div id="content" style="font-size: 10pt; width: 100%;">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4; background-color: #fff;">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-bars"></i>
<span class="sr-only">Toggle Navigation</span>
</button>
<button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
<asp:Label ID="user" runat="server" Font-Size="10pt" Text="mannyrchrd@gmail.com" ForeColor="#0b2436"></asp:Label>
</li>
</ul>
</div>
</div>
</nav>
<asp:UpdatePanel ID="UpdatePane1" runat="server" ClientIDMode="Static" UpdateMode="Conditional">
<ContentTemplate>
<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 6%;">
<div class="col-sm-7" style="width: 100%;">
<div class="card1" runat="server" id="permit" style="width: 100%; margin: 0 auto; padding: 6px; border-radius: 6px; border: 1px solid #dde0e2;">
<div class="row" style="width: 100%;">
<div class="col-2">
<asp:Image ID="Image2" ImageUrl="~/images/resources/linkedin.png" AlternateText="logo" runat="server" Width="35" Height="35" />
</div>
<div class="col-8">
<span style="float: inline-start;">
<div style="text-align: center;">
<asp:Label ID="Label7" runat="server" Text="Emerald Concepts"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="title" runat="server" Text="JAZZ MUSICAL FESTIVAL"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="Label8" runat="server" Text="Emerald Event Center, 75 Mayne Avenue, Calabar"></asp:Label>
</div>
</span>
</div>
<hr style="margin-top: 3px;" />
</div>
<div class="eventdetail" runat="server" id="eventdetail" style="display: block; margin: 0 auto; margin-top: 5%;">
<div class="row" style="width: 100%;">
<div class="col-4">
<asp:Label ID="Label4" runat="server" Text="Access Level"></asp:Label>
</div>
<div class="col-4">
<asp:Label ID="Label5" runat="server" Text="Date"></asp:Label>
</div>
<div class="col-4">
<asp:Label ID="Label6" runat="server" Text="Time"></asp:Label>
</div>
</div>
<div class="row" style="width: 100%;">
<div class="col-4">
<asp:Label ID="Label11" runat="server" Text="Regular"></asp:Label>
</div>
<div class="col-4">
<asp:Label ID="Label13" runat="server" Text="May 14, 2023"></asp:Label>
</div>
<div class="col-4">
<asp:Label ID="Label15" runat="server" Text="6:30 PM"></asp:Label>
</div>
</div>
</div>
<div class="row" style="margin-top: 5%; margin-bottom: -1%;">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<asp:Label ID="Label2" runat="server" Text="Richard Williams"></asp:Label>
</div>
</div>
</div>
</div>
<div class="row" style="width: 100%;">
<div class="col-sm-5">
<div class="form-group">
<div class="input-group">
<asp:Label ID="Label1" runat="server" Text="07012763532"></asp:Label>
</div>
</div>
<div class="form-group" style="float: left; font-size: 5pt;">
<div class="input-group">
<asp:Label ID="permitID" runat="server" Text="45887"></asp:Label>
</div>
</div>
</div>
</div>
<div class="card" style="width: 100%; background-color: #f2f8fb; border: 0.1px solid #dde0e2;">
</div>
</div>
<input type="text" class="fonts" />
</div>
<div class="col-sm-4" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
<div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
<div style="margin-top: 1%; margin-bottom: 4%;">
<label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your permit</label>
</div>
<asp:Label ID="headcolor" runat="server">Header Color</asp:Label>
<div class="input-group">
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorChanged" />
<div class="input-group-append">
<span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; border: 0.3px solid #d6d8d9; color: #404344;">
<span id="toggle_pw" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
<asp:Label ID="Label3" runat="server">Background Color</asp:Label>
<div class="input-group" style="font-size: 4pt;">
<asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="ChangedAllColor" />
<div class="input-group-append">
<span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<br />
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script type="text/javascript">
var $j = $.noConflict(true);
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
</script>
<script type="text/javascript">
function ColorChanged(sender) {
//sender.get_element().value = "#" + sender.get_selectedColor();
document.getElementById("title").style.color = "#" + sender.get_selectedColor();
function ChangedAllColor(sender) {
//sender.get_element().value = "#" + sender.get_selectedColor();
document.getElementById("permit").style.color = "#" + sender.get_selectedColor();
}
}
</script>
</body>
</html>
