<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>
<div class="section-break">
<section class="icon-container container-1">
<a class="waves-effect waves-light btn-floating social icon-spacing linkedin">
<i class="fa fa-linkedin"></i> Linkedin</a>
<a class="waves-effect waves-light btn-floating social icon-spacing angellist">
<i class="fa fa-angellist" style="background-color:black"></i> Angellist</a>
<a class="waves-effect waves-light btn-floating social icon-spacing product-hunt">
<i class="fa fa-product-hunt" style="background-color:#DA552F"></i> Product-hunt</a>
<a class="waves-effect waves-light btn-floating social icon-spacing github">
<i class="fa fa-github"></i> Github</a>
<a class="waves-effect waves-light btn-floating social icon-spacing medium">
<i class="fa fa-medium" style="background-color:#00ab6c"></i> Medium</a>
<a class="waves-effect waves-light btn-floating social icon-spacing twitter">
<i class="fa fa-twitter"></i> Twitter</a>
<a class="waves-effect waves-light btn-floating social icon-spacing instagram">
<i class="fa fa-instagram" style="background-color:#9b6954"></i> Instagram</a>
</section>
</div>
<div class="section-break">
<section class="icon-container footer-container">
<a id="call" class="waves-effect waves-light btn icon-spacing" style="background-color:#5BC236">
<i class="material-icons left">call</i>Call</a>
<a id="email" class="waves-effect waves-light btn icon-spacing" style="background-color:#007AFF">
<i class="material-icons left">email</i>Email</a>
</section>
</div>
</div>
</div>
</div>
</main>
<cutme>
<!-- Modal Structure -->
<div id="edit-form" class="modal">
<div class="modal-content">
<h4 class="modal-center">Edit Your Card ✏️</h4>
<h6 class="modal-center">(All fields are optional
.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;
}
.adn {
background-color: #d87a68 !important;
color: #fff !important;
}
.adn i {
color: #fff !important;
}
.adn:hover {
background-color: #e29e91 !important;
}
.bitbucket {
background-color: #205081 !important;
color: #fff !important;
}
.bitbucket i {
color: #fff !important;
}
.bitbucket:hover {
background-color: #2a69aa !important;
}
.dropbox {
background-color: #1087dd !important;
color: #fff !important;
}
.dropbox i {
color: #fff !important;
}
.dropbox:hover {
background-color: #309ff0 !important;
}
.facebook {
background-color: #3b5998 !important;
color: #fff !important;
}
.facebook i {
color: #fff !important;
}
.facebook:hover {
background-color: #4c70ba !important;
}
.flickr {
background-color: #ff0084 !important;
color: #fff !important;
}
.flickr i {
color: #fff !important;
}
.flickr:hover {
background-color: #ff339d !important;
}
.foursquare {
background-color: #f94877 !important;
color: #fff !important;
}
.foursquare i {
color: #fff !important;
}
.foursquare:hover {
background-color: #fb799c !important;
}
.github {
background-color: #444444 !important;
color: #fff !important;
}
.github i {
color: #fff !important;
}
.github:hover {
background-color: #5e5e5e !important;
}
.google {
background-color: #dd4b39 !important;
color: #fff !important;
}
.google i {
color: #fff !important;
}
.google:hover {
background-color: #e47365 !important;
}
.instagram {
background-color: #405de6 !important;
color: #fff !important;
}
.instagram i {
color: #fff !important;
}
.instagram:hover {
background-color: #6d83ec !important;
}
.linkedin {
background-color: #007bb6 !important;
color: #fff !important;
}
.linkedin i {
color: #fff !important;
}
.linkedin:hover {
background-color: #009de9 !important;
}
.microsoft {
background-color: #2672ec !important;
color: #fff !important;
}
.microsoft i {
color: #fff !important;
}
.microsoft:hover {
background-color: #5590f0 !important;
}
.windows {
background-color: #2672ec !important;
color: #fff !important;
}
.windows i {
color: #fff !important;
}
.windows:hover {
background-color: #5590f0 !important;
}
.odnoklassniki {
background-color: #f4731c !important;
color: #fff !important;
}
.odnoklassniki i {
color: #fff !important;
}
.odnoklassniki:hover {
background-color: #f6914d !important;
}
.openid {
background-color: #f7931e !important;
color: #fff !important;
}
.openid i {
color: #fff !important;
}
.openid:hover {
background-color: #f9ab4f !important;
}
.pinterest {
background-color: #cb2027 !important;
color: #fff !important;
}
.pinterest i {
color: #fff !important;
}
.pinterest:hover {
background-color: #e03e44 !important;
}
.reddit {
background-color: #eff7ff !important;
color: #000 !important;
}
.reddit i {
color: #000 !important;
}
.reddit:hover {
background-color: #ffffff !important;
}
.soundcloud {
background-color: #ff5500 !important;
color: #fff !important;
}
.soundcloud i {
color: #fff !important;
}
.soundcloud:hover {
background-color: #ff7733 !important;
}
.tumblr {
background-color: #2c4762 !important;
color: #fff !important;
}
.tumblr i {
color: #fff !important;
}
.tumblr:hover {
background-color: #3c6085 !important;
}
.twitter {
background-color: #55acee !important;
color: #fff !important;
}
.twitter i {
color: #fff !important;
}
.twitter:hover {
background-color: #83c3f3 !important;
}
.vimeo {
background-color: #1ab7ea !important;
color: #fff !important;
}
.vimeo i {
color: #fff !important;
}
.vimeo:hover {
background-color: #49c6ee !important;
}
.vk {
background-color: #587ea3 !important;
color: #fff !important;
}
.vk i {
color: #fff !important;
}
.vk:hover {
background-color: #7897b6 !important;
}
.yahoo {
background-color: #720e9e !important;
color: #fff !important;
}
.yahoo i {
color: #fff !important;
}
.yahoo:hover {
background-color: #9412cd !important;
}
/**
* CONTENTS
*
* GENERIC
* Box-sizing...........Better default `box-sizing`.
* Layout...............HTML, BODY styles.
*
* MAIN
* Content..............Centering, general setup.
*
* CARDS
* Basic................Card styles.
* Content..............Card content.
*
* MODAL
* Modal Form...........Form styles
*
* Add-on Styles
* Icons................Materialize icons add-ons.
*/
/*------------------------------------*\
#GENERIC
\*------------------------------------*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100vw;
background-color: antiquewhite;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
}
/*------------------------------------*\
#MAIN
\*------------------------------------*/
main {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
}
a {
text-decoration: none;
color: black;
}
.container-div {
height: 100%;
width: 100%;
margin: 0.8rem 0.2rem 4.2rem 0.2rem;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
h1, h2, h3, h4, h5, h6 { line-height: 120%; }
h4 {
font-weight: bold;
margin: 1rem 0 1rem 0;
}
h5 {
font-size: 1.5rem;
margin: 1rem 0 1rem 0;
}
@media only screen and (max-device-width: 737px) {
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
p {
font-size: 1.00rem;
text-align: center;
}
}
/*------------------------------------*\
#CARDS
\*------------------------------------*/
/* CARD SETUP STYLES */
.card {
background-color: white;
width: 100%;
max-height: 80vh;
margin: 1rem auto;
-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
overflow-x: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.card:hover {
-webkit-box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
transform: translateY(-0.5rem);
}
@media only screen and (max-device-width: 737px) {
.card {
height: 90vh;
}
}
@media only screen and (min-width: 737px) {
.card {
width: 46.000rem;
}
}
.img-circle {
width: 7em;
height: 7em;
border-radius: 60px;
background-clip: padding-box;
background-size: cover;
background-position: center center;
text-align: center;
margin: 0 auto;
}
@media only screen and (min-width: 737px) {
.img-circle {
float: left;
margin-left: 1rem;
margin-right: 2rem;
}
}
.oneline-overflow {
white-space: nowrap;
overflow: auto;
}
@media only screen and (max-width: 737px) {
.oneline-overflow {
text-align: center;
}
}
/* CARD CONTENT STYLES */
.double-hr{ border-top: 3px double #8c8b8b; }
.p-spacing { padding: 1em 0 1em 0; }
.content-one { margin: 1em 2.5em 1em 2.5em; }
@media only screen and (max-device-width: 737px) {
.content-one { margin: 0 0.5em 0 0.5em; }
}
.section-break {
display: flex;
justify-content: center;
align-items: center;
}
.icon-spacing { margin: 1em 1em 1em 1em; }
@media only screen and (max-device-width: 737px) {
.icon-spacing { margin: 0.5em 0.5em 0.5em 0.5em; }
}
.icon-container {
text-align: center;
width: 100%;
}
.container-1 { margin-bottom: 1em; }
/*------------------------------------*\
#MODAL-FORM
\*------------------------------------*/
.vertical {
display: flex;
flex-direction: column;
}
.modal {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
max-height: 80%;
}
@media only screen and (max-width: 992px) {
.modal {
width: 90%;
}
}
.modal-form-row { margin-bottom: 0px; }
.modal-center { text-align: center; }
.modal-footer {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
.btn-flat {
padding: 0 1rem 2.5rem 1rem;
font-weight: bold;
font-size: 1.35rem;
border: 2px solid;
}
.autofill-disclaimer {
text-align: center;
}
@media only screen and (min-device-width : 1025px) {
.autofill-disclaimer {
display: none;
}
}
/*------------------------------------*\
#ADD-ONS
\*------------------------------------*/
/* Custom styles for Materialize Font Awesome Icons */
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
pre {
padding: 16px 20px 0px;
background: #eee;
border: 1px solid #ddd;
border-radius: 4px;
}
.info {
font-size: 1.3rem;
text-align: center;
}
.margin-bottom { margin-bottom: 0.5rem }
$(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');
let userHeading = document.getElementById('heading').value;
if (userHeading !== '') {
heading.textContent = userHeading;
} else {
heading.remove();
}
// If 2 and 3 are empty, remove hr
// If 2 or 3 are empty and pic is not empty, remove hr
let hr = document.querySelector('hr.double-hr');
if (userName === '' && userHeading === '') { hr.remove(); }
if ((userName === '' || userHeading === '') && (userPic !== '')) { hr.remove(); }
let summary = document.querySelector('p.p-spacing');
let userSummary = document.getElementById('summary').value;
if (userSummary !== '') {
summary.textContent = userSummary;
} else {
summary.remove();
}
let linkedin = document.querySelector('a.linkedin');
let userLinkedin = document.getElementById('linkedin_url').value;
if (userLinkedin !== '') {
linkedin.href = userLinkedin;
} else {
linkedin.remove();
}
let angellist = document.querySelector('a.angellist');
let userAngellist = document.getElementById('angellist_url').value;
if (userAngellist !== '') {
angellist.href = userAngellist;
} else {
angellist.remove();
}
let producthunt = document.querySelector('a.product-hunt');
let userProductHunt = document.getElementById('ph_url').value;
if (userProductHunt !== '') {
producthunt.href = userProductHunt;
} else {
producthunt.remove();
}
// 7. Github Icon
let github = document.querySelector('a.github');
let userGithub = document.getElementById('github_url').value;
if (userGithub !== '') {
github.href = userGithub;
} else {
github.remove();
}
// 8. Medium Icon
let medium = document.querySelector('a.medium');
let userMedium = document.getElementById('medium_url').value;
if (userMedium !== '') {
medium.href = userMedium;
} else {
medium.remove();
}
// 9. Twitter Icon
let twitter = document.querySelector('a.twitter');
let userTwitter = document.getElementById('twitter_url').value;
if (userTwitter !== '') {
twitter.href = userTwitter;
} else {
twitter.remove();
}
// 10. Instagram Icon
let ig = document.querySelector('a.instagram');
let userIG = document.getElementById('instagram_url').value;
if (userIG !== '') {
ig.href = userIG;
} else {
ig.remove();
}
/* ----- Contact Section ----- */
// 11. Call Button
let callButton = document.getElementById('call');
let userNumber = document.getElementById('number').value;
if (userNumber !== '') {
callButton.href = "tel:" + userNumber;
} else {
callButton.remove();
}
// 12. Email Button
let emailButton = document.getElementById('email');
let userEmail = document.getElementById('emailaddress').value;
if (userEmail !== '') {
emailButton.href = "mailto:" + userEmail;
} else {
emailButton.remove();
}
/* ----- Background ----- */
let userColor = document.getElementById('bg_color').value;
if (bg_color !== '') {
document.body.style.background = userColor;
}
}();
return false;
};
// Download HTML file
document.getElementById("dwn-btn").addEventListener("click", function() {
let text = "<!DOCTYPE html>\n" + document.documentElement.outerHTML;
let filteredText = text.replace(/<cutme>([\s\S]*?)<\/cutme>/g, '');
let filteredText2 = filteredText.replace(/<script src=\"https:\/\/www.linkedin.com\/([\s\S]*?)<\/head>/g, '</head>');
let filteredText3 = filteredText2.replace(/<div class="hiddendiv common">([\s\S]*?)<\/html>/g, '<\/body><\/html>');
let filename = "index.html";
let download = function(filename, text) {
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
};
download(filename, filteredText3);
}, false);
