Untitled
unknown
html
2 years ago
11 kB
4
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<style>
body {
background-color: #f2f2f2;
font-family: Nunito, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 24px;
overflow-x: hidden;
}
.mobile-screen {
width: 100vw;
/* Set width to the full viewport width */
height: 100vh;
/* Set height to the full viewport height */
max-width: 455px;
/* Set a maximum width for mobile devices */
margin: 0 auto;
/* Center the div horizontally */
background-color: #ffffff;
/* Set a background color or any other styles */
box-shadow: 0 4px 16px rgba(17, 17, 26, .1), 0 8px 32px rgba(17, 17, 26, .05);
/* Add any additional styles as needed */
/* Media query for larger viewports */
@media (min-width: 768px) {
max-width: 455px;
/* Maintain the same width on larger screens */
height: auto;
/* Set a fixed height for larger screens */
}
}
.sec-1 {
display: flex;
justify-content: center;
align-items: center;
}
.bg-black {
margin: 0 auto;
/* width: 500px; */
/* height: 200px; */
/* background: lightblue; */
position: relative;
overflow: hidden;
}
.bg-black:after {
content: "";
position: absolute;
height: 80px;
left: -10%;
right: -10%;
border-radius: 50%;
bottom: -25px;
background-color: #ffffff;
}
.dv-2 {
display: flex;
align-items: center;
justify-content: center;
}
.circle-div {
position: relative;
bottom: 15vh;
background-image: url(qr.png);
background-repeat: no-repeat;
background-size: contain;
}
.btn-dark {
padding: 10px 20px;
background-color: black;
color: whitesmoke;
border-radius: 50px;
text-transform: uppercase;
font-size: small;
width: 50%;
}
.btns {
margin-top: -5%;
}
.contact-lists ul {
display: flex;
flex-wrap: wrap
}
.contact-lists ul li {
margin: 5%;
}
.copyright-content {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: hsla(0, 0%, 100%, .5);
bottom: 0;
left: 0;
margin: auto;
padding: 10px;
position: fixed;
right: 0;
text-align: center;
width: 455px;
font-size: medium;
}
.contact-lists ul{
list-style-type: none;
}
/* */
</style>
</head>
<body>
<div class="mobile-screen">
<div class="bg-black sec-1" style="height: 30vh;">
<img src="logo-nbg.png" alt="" style="margin-bottom: 20%;">
</div>
<div class="dv-2 ">
<div class="circle-div"
style="border: 5px solid #b6b6b6e4; border-radius: 50%; width: 180px; height: 180px;">
</div>
</div>
<div class="user-detail text-center " style="position: relative;bottom: 10vh;">
<h4 style="color: rgb(0, 0, 0);">TAPiTAG Official</h4>
<p style="color: rgb(0, 0, 0);">
<div><b>Welcome to the TAPiTAG Profile.</b><br>This shows you how your profile could look.<br>Your
profile is fully customisable <br>& you can update it at any time.<br>Add a your logo,
profile pic, name & Bio.<br>Share all your socials, websites & more.<br><br><br><br><br>
</div>
</p>
<div class="btns">
<a href="https://account.tapitag.co/tapitag/api/v1/downloadcard?user_id=107&rfNo=044B34626D6F81"
class="btn btn-dark mb-2">save my contact card</a><br>
<a href="form.html" class="btn btn-dark">connect with me</a>
</div>
</div>
<div class="column info">
<div class="contact-lists">
<ul>
<li><a href="tel:+353894740660" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/tt4FqOU5tkGVx0zNRajfKhvHtBjvpq8rvztOolUj.png"
alt="Phone Number" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="mailto:Sales@tapitag.co" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/7clCpRwLavq6gJUTlhHDH9X0w7UCJUOFVYYVlHVK.png"
alt="Email" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.tapitag.co/" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/5LnnPP9Gp1ZHlYaid89btFCNkcr94TOFqYpRjBhw.png"
alt="Website" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.linkedin.com/company/78061113/admin/" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/cHqoUBni6gkfbnpau1SqPPijzov0OI1sFVzSMDSD.png"
alt="Linkedin" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://api.whatsapp.com/send?phone=+353894740660" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/7ObC0Q8rkeatXWjXRRbmmD9gbypgIJQlqgfSFZay.png"
alt="Whatsapp" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.instagram.com/tapitag" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/2igxI0IdLy2xkAm91tonG4yIS1Ouuo4OVxQZD3xY.png"
alt="Instagram" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.facebook.com/mytapitag" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/4dArralwEGDEYiLRLV1JaCbljogx6M6uREfRY5Z2.png"
alt="Facebook" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://twitter.com/@TAPiTAG_IRL" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/q0peUPCK3VaQGqmlRuzIQv8ZEDkHkGbf406RYUzY.png"
alt="Twitter" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.snapchat.com/add/tapitag_irl" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/H3jqFvMu4Y1oUALnClUMc6zweMXDqCghUTuhQ4Lv.png"
alt="Snapchat" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.tiktok.com/@tapitag" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/G6TSOydbjzfp19A04zHpoOUY18yl6a9hAjUsx452.png"
alt="TikTok" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.youtube.com/@tapitag/" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/IIqOPILJjAUz9IEipjky7LJssm0Y7xnWOfpwO7eY.png"
alt="YouTube" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.tapitag.co/" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/Mi7dOl1gaIjqAcXs6P7QdoBqiDghTnfouRJWcvhp.png"
alt="Product Portfolio" style="width: 80px; height: 80px; border-radius: 20px;"></a>
</li>
<li><a href="https://www.tapitag.co/pages/faq" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/1645578853faq.png"
alt="FAQ" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
<li><a href="https://www.tapitag.co/pages/corporate-enquiries" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/1nN2x4Ga96W5P4PN8BK3OK2CWHzIsmWZXraZrawM.png"
alt="TAPiTAG Corporate" style="width: 80px; height: 80px; border-radius: 20px;"></a>
</li>
<li><a href="https://tapitag.co/pages/contact-us" style="color: rgb(0, 0, 0);"><img
src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/2ApFTcGyKd3DiQRBf6le5mvpbnNExw8Fc5tFLuyH.png"
alt="Enquiry Forms" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
</ul>
</div>
</div>
<BR><BR></BR></BR>
<div class="copyright-content">
<p>POWERED BY TAPiTAG</p>
</div>
</div>
</body>
</html>Editor is loading...