226 lines
5.2 KiB
HTML
226 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<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/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" /> -->
|
|
<title>Custom Bootstrap 4 card</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500&subset=latin-ext" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
|
</head>
|
|
|
|
<style>
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
background-color: #fff;
|
|
background-clip: border-box;
|
|
border: 1px solid black;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.container {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
font-family: "Open Sans";
|
|
}
|
|
|
|
.card-custom {
|
|
overflow: hidden;
|
|
min-height: 500px;
|
|
|
|
/* box-shadow: 0 0 15px rgba(10, 10, 10, 0.3); */
|
|
}
|
|
|
|
.card-custom-img {
|
|
height: 278px;
|
|
background-color: #792227;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-color: inherit;
|
|
margin-top: 222px;
|
|
}
|
|
|
|
/* First border-left-width setting is a fallback */
|
|
/* .card-custom-img::after {
|
|
position: absolute;
|
|
content: '';
|
|
top: 161px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-top-width: 40px;
|
|
border-right-width: 0;
|
|
border-bottom-width: 0;
|
|
border-left-width: 545px;
|
|
border-left-width: calc(575px - 5vw);
|
|
border-top-color: transparent;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: inherit;
|
|
} */
|
|
|
|
.img-fluid {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
border-style: none;
|
|
}
|
|
|
|
.card-custom-avatar img {
|
|
border-radius: 50%;
|
|
border: 5px solid #792227;
|
|
position: absolute;
|
|
top: 234px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 158px;
|
|
height: 154px;
|
|
}
|
|
|
|
.card-custom-avatar2 .img2 {
|
|
position: absolute;
|
|
top: 65px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 255px;
|
|
height: 90px;
|
|
}
|
|
|
|
.card-custom-avatar2 .direccion {
|
|
position: absolute;
|
|
top: 94px;
|
|
left: 53%;
|
|
transform: translate(-50%, -50%);
|
|
width: 69%;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.card-custom-avatar2 .telefono {
|
|
position: absolute;
|
|
top: 110px;
|
|
left: 52%;
|
|
transform: translate(-50%, -50%);
|
|
width: 30%;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.card-footer{
|
|
color: white;
|
|
position: absolute;
|
|
height: 195px;
|
|
bottom: 0;
|
|
width: 100%;
|
|
/* background-color: aquamarine; */
|
|
}
|
|
|
|
.nombre {
|
|
position: absolute;
|
|
font-size: 23px;
|
|
left: 50%;
|
|
transform: translate(-50% , -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
width: 50%;
|
|
}
|
|
|
|
.cargo {
|
|
font-size: 15px;
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 50%;
|
|
transform: translate(-50% , -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
.m-auto {
|
|
margin: auto!important;
|
|
}
|
|
|
|
.pt-5 {
|
|
padding-top: 3rem!important;
|
|
}
|
|
|
|
.row {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.pb-3 {
|
|
padding-bottom: 1rem!important;
|
|
}
|
|
|
|
.col-md-6 {
|
|
width: 310px;
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #fff!important;
|
|
}
|
|
.m-auto {
|
|
margin: auto!important;
|
|
}
|
|
.pt-5 {
|
|
padding-top: 3rem!important;
|
|
}
|
|
.row {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
*, ::after, ::before {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row pt-5 m-auto">
|
|
<div class="col-md-6 col-lg-4 pb-3">
|
|
<!-- Copy the content below until next comment -->
|
|
<div class="card card-custom bg-white border-white border-0">
|
|
<div class="card-custom-avatar2">
|
|
<img class="img-fluid img2" src="Logo_DCM.png" alt="Avatar" />
|
|
<p class="card-text direccion">Av. Ing Roberto Pastoriza 164. Sto.Dgo.</p>
|
|
<p class="card-text telefono">(809)-227-2223)</p>
|
|
</div>
|
|
|
|
<div class="card-custom-avatar">
|
|
<img class="img-fluid" src="lana.PNG" alt="Avatar" />
|
|
</div>
|
|
<div class="card-custom-img"></div>
|
|
<div class="card-footer">
|
|
<p class="nombre">Lana Rhoades</p>
|
|
<p class="cargo">Gerente de RR.HH</p>
|
|
</div>
|
|
</div>
|
|
<!-- Copy until here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |