"Material Business Card"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Material Business Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<main>
<div class="container-div">
<div class="card">
<div class="card-content content-one">
<div class="img-circle" style="background-image: url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1586355803/HARUN_PEHL%C4%B0VAN_Image177_hdcg6k.jpg)"></div>
<h4 class="oneline-overflow">HARUN PEHLİVAN </h4>
<h5 class="oneline-overflow">IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</h5>
<hr class="double-hr">
<p class="p-spacing">22/07/1984 de Çorumda Doğdum Aslen Samsun'un Havza ilçesi eski adıyla Gülek daha sonra Küflek Köyü yeni adıyla Küflek Mahallesi İkame ettiğim Amasya'nın Suluova ilçesi
ilkokulu Suluova Mehmet Bilgili İlkokulu ortaokulu Suluova İlköğretimokulu din eğitimi ve oğretimi Suluova İmam-Hatip Lisesi Mesleki ve Teknik eğitimi/öğretimi için Mesleki Açıköğretim Lisesi Bilişim Teknolojileri Yüzyüze eğitim ve öğretim (Ticaret Meslek Lisesi) Suluova Adnan MENDERES Mesleki ve Teknik Anadolu Lisesi
hem mesleki hem diğer alanda kendimi geliştirmek için online sertifikalı akademik eğitimler almaktayım
bilişim teknolojilerinde Kodlama tasarım geliştirme yeteneğine sahibim web alanında bir çok çalışmalarım var bu çalışmalarımı görme engelli bireylerin istifade etmeleri için erişilebilir yapıyorum bende bir görme engelliyim uzak yakın olmak üzere iki gözlük kullanıyorum
</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.btn.social > :first-child,
.btn-large.social > :first-child,
.col.social > :first-child {
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn.social,
.btn-large.social,
.col.social {
padding: 0 2rem 0 0;
}
.btn.social i,
.btn-large.social i,
.col.social i {
padding: 0 1rem;
margin-right: 1rem;
}
.btn.social-icon,
.btn-large.social-icon,
.col.social-icon {
padding: 0;
}
.btn.social-icon i,
.btn-large.social-icon i,
.col.social-icon i {
padding: 0 1rem;
margin-right: 0;
}
.btn-large.social-icon {
padding: 0 1rem;
}
.col.social {
width: 100%;
text-align: left;
}
.col.social i.fa-fw {
width: 3.2rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
$('.modal').modal();
});
document.getElementById("myForm").onsubmit = function(e) {
e.preventDefault();
let formSubmission = function() {
let pic = document.querySelector('div.img-circle');
let newPic = document.createElement('div');
let userPic = document.getElementById('profile_picture').value;
if (userPic !== '') {
newPic.className = "img-circle";
newPic.style.backgroundImage = 'url(' + userPic + ')';
pic.parentNode.replaceChild(newPic, pic);
} else {
pic.remove();
}
// 2. Name
let name = document.querySelector('h4.oneline-overflow');
let title = document.querySelector('title');
let userName = document.getElementById('name').value
if (userName !== '') {
name.textContent = userName;
title.textContent = userName + ' Personal Web-Card';
} else {
name.remove();
}
let heading = document.querySelector('h5.oneline-overflow');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: