Player_card - MukeshKumar101/IPL_Auction GitHub Wiki

#HTML

<!DOCTYPE html> <html lang="en">

<head>

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

src="https://kit.fontawesome.com/27b3f9c25d.js" crossorigin="anonymous"

></script> <link

rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"

/> <link rel="stylesheet" href="./css/style.css" /> <title>Document</title>

</head> <body>

<!-- players-card --> <div class="row">

<div class="container">
<div id="playerCard" class="col-6 mx-auto mt-3">
<div class="card bg-transparent text-white p-2 rounded">
<div class="d-inline-flex p-2">
<div class="d-flex flex-column order-1">
<i class="fas fa-plane-departure"></i> <i class="mt-4 fab fa-redhat"></i>

</div> <div class="div order-2 ml-2 flex-grow-1">

<img
id="playerOriginImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQumd3ec1jKtn27J1uUdpLwBJutkUr0ixZKlQ&usqp=CAU" alt="" class="card-img img-fluid"

/> <!-- <img

id="playerImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTeqVcu58ZPsf4qS4uFjigXbC3Q47lEDN7h0Q&usqp=CAU" alt="" class="img-fluid img-thumbnail"

/> -->

</div>

</div> <div class="card-body text-center p-2">

<div class="h1 text-dark bg-light p-2">
MS Dhoni <small>(IND)</small>

</div> <form>

<div class="form-row py-2">
<div class="col">
<label for="Role" class="h4">Role</label>

</div> <div class="col">

<input type="text" class="form-control" />

</div>

</div> <div class="form-row py-2">

<div class="col">
<label for="Batting Style" class="h4">Batting Style</label>

</div> <div class="col">

<input type="text" class="form-control" />

</div>

</div> <div class="form-row py-2">

<div class="col">
<label for="Bowling Style" class="h4">Bowling Style</label>

</div> <div class="col">

<input type="text" class="form-control" />

</div>

</div>

</form> <hr class="bg-white" /> <form class="form-inline justify-content-center">

<label for="Base Price" class="h4">Base Price</label> <input type="text" class="ml-4 form-control" />

</form>

</div>

</div>

</div>

</div>

</div>

<script
src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"

></script> <script

src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"

></script> <script

src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"

></script>

</body>

</html>

CSS:

#playerCard {
background: url("https://lh3.googleusercontent.com/proxy/yMwZQK-bktepE33Nb3Fdm7QLE4kXSfao-RJasREuRZGekqIO7q-1LPB1Ljxgu0uVuKn41CfLrE0fsYFEueVIs_ZRe5aH-kRczQ-TSDkAVDqk34ujvbcQ2dijrD6gIPp-Q_Gg5gHj22B_EpX6ZpDk"); background-attachment: local; background-repeat: no-repeat; background-size: cover; border: 5px solid cyan; border-radius: 15px; padding: 2px;

}

#playerImg {
position: absolute; width: 40%; max-width: 400px; max-height: 300px; top: 20%; left: 20%;

}

⚠️ **GitHub.com Fallback** ⚠️