1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / karyaninfotech / public_html / admin /
Filename : card.php
back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" />

<link rel="stylesheet" href="styles.css" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title>Digital Visiting card | Single landing page | my Bussines card </title>



<style>





#top5

{

margin-top:-10px;



}



.tab5

{

width:300px;

height:200px;

}

*

{

margin:0px;

padding:0px;

box-sizing:border-box;

}

html

{

font-size:10px;

font-family:"Roboto",sans-serif;

}

a

{

text-decoration:none;

color:#FFFFFF;

}

section

{

padding:10rem 0;

background:#DFD984;

margin-top:-90px;

margin-left:0px;

}

.heading

{

text-transform:uppercase;

font-size:2.5rem;

letter-spacing:3px;

margin-right:-3px;

margin-bottom:5rem;

text-align:center;

color:#000;

position:relative;

font-style:italic;

}

.heading::after

{

content:"";

width:10rem;

height:.8rem;

background-color:#45e19f;

position:absolute;

bottom:-2rem;

left:50%;

transform:translateX(-50%);

border-radius:2rem;



}

.card-wrapper

{

display:flex;

align-items:center;

align-content:center;

flex-decoration:column;



}

.card

{

width:100%;

background-image:url();

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

margin:2rem 0;

box-shadow:.5rem .5rem 3rem rgba(0,0,0,0.2);

margin-left:6px;

margin-right:6px;

}

.card .card-img

{

width:100%;

height:100%;

object-fit:cover;

-webkit-clip-path:polygon(0 0, 100% 0, 100% 78%, 0% 100%);

clip-path:polygon(0 0, 100% 0, 100% 78%, 0% 100%);

margin-top:-50px;

}









.profile-img

{

width:115px;

height:115px;

object-fit:cover;

border-radius:50%;

margin-top:-10rem;

z-index:999;

border:6px solid #FEB300;

}

.card h1

{

font-size:2.5rem;

color:#333;

margin:1.5rem 0;



}

.job-title

{

color:#777;

font-size:1.5rem;

font-weight:300;

}

.about

{

font-size:1.5rem;

margin:1.5rem 0;

font-style:italic;

text-align:center;

color:#333;

}



.card .btn

{

padding:1rem 2.5rem;

background-color:#445ae3;

border-radius:2rem;

margin:1rem 0;

text-transform:uppercase;

color:#eee;

font-size:1.4rem;

transition:all .5s;

}

.card .btn:hover

{

transform:translateY(-2px);

box-shadow:.5rem .5rem 2rem rgba(0,0,0,.2);

}



.card .btn:active

{

transform:translateY(0);

box-shadow:none;

}

.social-media

{

width:100%;

list-style:none;

display:flex;

justify-content:space-evenly;

padding:2rem 0;

margin-top:1.5rem;

border-top:2px solid #55ACEE;

}

.social-media i

{

font-size:3rem;

}

.fa-facebook-square

{

color:#3b5999;

}

.fa-linkedin-square

{

color:#55acee;

}

.fa-instagram

{

color:#e6683c;

}



.fa-youtube

{

color:#e6683c;

}









.social-mediaa

{

width:100%;

list-style:none;

display:flex;

justify-content:space-evenly;

padding:2rem 0;

margin-top:1.5rem;

border-top:2px solid #55ACEE;

}

.social-mediaa i

{

font-size:3rem;

}

.fa-phone

{

color:#00CC00;

}

.fa-whatsapp

{

color:#24CC63;

}

.fa-envelope

{

color:#CC0000;

}















.social-mediaaa

{

width:100%;

list-style:none;

display:flex;

justify-content:space-evenly;

padding:2rem 0;

margin-top:1.5rem;

border-top:2px solid #55ACEE;

}

.social-mediaaa i

{

font-size:3rem;

}

.fa-phone

{

color:#00CC00;

}

.fa-whatsapp

{

color:#24CC63;

}

.fa-envelope

{

color:#CC0000;

}

















.fa-facebook-square:hover,



.fa-twitter-square:hover,



.fa-instagram:hover,



.fa-youtube:hover

{

color:#45e19f;

}







@media screen and (min-width:468px){

    

  

 







.card-wrapper

{

flex-direction:row;

flex-wrap:wrap;

justify-content:center;

align-items:center;

margin-left:20px;



}





.card:nth-child(1)

{

animation:fadeIn .5s .5s backwards;

}



.card:nth-child(2)

{

animation:fadeIn .5s 1s backwards;

}



.card:nth-child(3)

{

animation:fadeIn .5s 1.5s backwards;

}



.card:nth-child(4)

{

animation:fadeIn .5s 2s backwards;

}



html

{

font-size:10px;

font-family:"Roboto",sans-serif;

}

a

{

text-decoration:none;

color:#FFFFFF;

}

section

{

padding:10rem 0;

background:#DFD984;

margin-top:-90px;

margin-left:0px;

}

.heading

{

text-transform:uppercase;

font-size:2.5rem;

letter-spacing:3px;

margin-right:-3px;

margin-bottom:5rem;

text-align:center;

color:#000;

position:relative;

font-style:italic;

}

.heading::after

{

content:"";

width:10rem;

height:.8rem;

background-color:#45e19f;

position:absolute;

bottom:-2rem;

left:50%;

transform:translateX(-50%);

border-radius:2rem;



}

.card-wrapper

{

display:flex;

align-items:center;

align-content:center;

flex-decoration:column;

}

.card

{

width:32rem;

background-color:#ebeef8;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

margin:2rem 0;

box-shadow:.5rem .5rem 3rem rgba(0,0,0,0.2);

margin-left:50px !important;





}

.card .card-img

{

width:100%;

height:26rem;

object-fit:cover;

-webkit-clip-path:polygon(0 0, 100% 0, 100% 78%, 0% 100%);

clip-path:polygon(0 0, 100% 0, 100% 78%, 0% 100%);

margin-top:-50px;

}









.profile-img

{

width:115px;

height:115px;

object-fit:cover;

border-radius:50%;

margin-top:-10rem;

z-index:999;

border:6px solid #FEB300;

}

.card h1

{

font-size:2.5rem;

color:#333;

margin:1.5rem 0;

}

.job-title

{

color:#777;

font-size:1.5rem;

font-weight:300;

}

.about

{

font-size:1.5rem;

margin:1.5rem 0;

font-style:italic;

text-align:center;

color:#333;

}



.card .btn

{

padding:1rem 2.5rem;

background-color:#445ae3;

border-radius:2rem;

margin:1rem 0;

text-transform:uppercase;

color:#eee;

font-size:1.4rem;

transition:all .5s;

}

.card .btn:hover

{

transform:translateY(-2px);

box-shadow:.5rem .5rem 2rem rgba(0,0,0,.2);

}



.card .btn:active

{

transform:translateY(0);

box-shadow:none;

}

.social-media

{

width:100%;

list-style:none;

display:flex;

justify-content:space-evenly;

padding:2rem 0;

margin-top:1.5rem;

border-top:2px solid #55ACEE;

}

.social-media i

{

font-size:3rem;

}

.fa-facebook-square

{

color:#3b5999;

}

.fa-twitter-square

{

color:#55acee;

}

.fa-instagram

{

color:#e6683c;

}



.fa-youtube

{

color:#e6683c;

}













.fa-facebook-square:hover,



.fa-twitter-square:hover,



.fa-instagram:hover,



.fa-youtube:hover

{

color:#45e19f;

}





}











</style>

</head>



<body>



<?php



include("connection/connect.php");



if(mysqli_connect_error()){



    die("Error");



}



$id = $_GET["id"];



$query="select * from form where id = '$id' ";



  $result=mysqli_query($conn, $query) or die(mysqli_error($conn));



  $row=mysqli_fetch_assoc($result);



  

?>		



<section>

<div class="container">

<center><h1 class="heading">My Business Card</h1></center>

<div  class="card-wrapper">

<div class="card" style="background-color:#<?php echo $row["color"]; ?>">

<img src="card-1/<?php echo $row["back"]; ?>" alt="card" class="card-img" />

<img src="card-1/<?php echo $row["banner1"]; ?>" alt="profile" class="profile-img" />

<h1 id="top5"><?php echo $row["name"]; ?></h1>

<table class="tab5">

<tr>

<td><img src="../images/phone.png" alt="" /></td>

<td><h2><a href="tel:<?php echo $row["phone"]; ?>"><font color="#000000"><?php echo $row["phone"]; ?></font></h2></td>

<td><img src="../images/whats.png" alt="" /></td>

<td><h2><a href="<?php echo $row["whats_link"]; ?>" data-action="share/whatsapp/share"><font color="#000000"><?php echo $row["whats"]; ?></font></a></h2></td>

</tr>





<tr>

<td><img src="../images/email.png" alt="" /></td>

<td colspan="4"><h2><a href="mailto:<?php echo $row["email"]; ?>"><font color="#000000"><?php echo $row["email"]; ?></font></a></h2></td>



</tr>



<tr>

<td><img src="../images/icon-web.png" alt="" /></td>

<td colspan="4"><h2><a href="<?php echo $row["web_link"]; ?>"><font color="#000"><?php echo $row["website"]; ?></font></a></h2></td>



</tr>



<tr>

<td><img src="../images/add.png" alt="" /></td>

<td colspan="4"><h3><a href="<?php echo $row["map"]; ?>"><font color="#000"><b><?php echo $row["address"]; ?></b></font></a></h3></td>



</tr>











</table>

<ul class="social-media">

<li><a href="<?php echo $row["link1"]; ?>" target="blank"><i class="fab fa-facebook-square"></i></a></li>

<li><a href="<?php echo $row["link2"]; ?>" target="blank"><i class="fab fa-linkedin-square"></i></a></li>

<li><a href="<?php echo $row["link3"]; ?>" target="blank"><i class="fab fa-instagram"></i></a></li>

<li><a href="<?php echo $row["link4"]; ?>" target="blank"><i class="fab fa-youtube"></i></a></li>

</ul>

</div>





















</div>

</div>

</section>

</body>

</html>