Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.html

Created June 5, 2021 23:02
Show Gist options
  • Save harunpehlivan/ddcd9f59c52bbbf2f3859cc77dfe4026 to your computer and use it in GitHub Desktop.
Save harunpehlivan/ddcd9f59c52bbbf2f3859cc77dfe4026 to your computer and use it in GitHub Desktop.
Download ZIP
Multi Modal Profile Card Bootstrap
Raw
index.html
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div id="overlay">
<div class="image">
<div class="trick">
</div>
</div>
<ul class="text">Harun Pehlivan </ul>
<div class="text1">HTML + CSS</div>
<div class="text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-outline btn-lg" data-toggle="modal" data-target="#myModal">
About + Social + Contact
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"><center>HARUN PEHLİVAN </center></h4>
</div>
<div class="modal-body">
<ul class="text-center bio"> <p><i class="fa fa-calendar fa-fw w3-margin-right"></i> 22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi <br>
<i class="fa fa-file-code-o" aria-hidden="true"></i> The language I Started Programming is PASCAL<br> 2008 TERCUMAN INFORMATICS CENTER<br> <i class="fa fa-calendar fa-fw w3-margin-right"></i> 2012 TERCUMAN EDUCATION, SCIENCE,TECHNICAL RESEARCH AND DEVELOPMENT CENTER<br><i class="fa fa-calendar fa-fw w3-margin-right"></i> 2013 TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU<br> <i class="fa fa-calendar fa-fw w3-margin-right"></i> 2018 HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#social" data-dismiss="modal">SOCIAL</button>
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#contact" data-dismiss="modal">CONTACT</button>
<button type="button" class="btn btn-danger btn-outline" data-dismiss="modal">&times;</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #2 ] -->
<div class="modal fade" id="social" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title caps"><strong><center>SOCIAL</center></strong></h4>
</div>
<div class="modal-body">
<div class="footer-social-links">
<a href="https://facebook.com/100008152065270" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem" title="İnstagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://codepen.io/harunpehlivan/" title="Codepen" target="_blank"><i class="fa fa-codepen"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" title="LinkedIn+" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://dribbble.com/harunpehlivan" title="Dribbble" target="_blank"><i class="fa fa-dribbble"></i></a>
<a href="https://www.behance.net/harunpehlivan" title="Behance" target="_blank"><i class="fa fa-behance"></i></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#myModal" data-dismiss="modal">ABOUT</button>
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#contact" data-dismiss="modal">CONTACT</button>
<button type="button" class="btn btn-danger btn-outline" data-dismiss="modal">&times;</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #3 ] -->
<div class="modal fade" id="contact" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title caps"><strong><center>CONTACT</center></strong></h4>
</div>
<div class="modal-body">
<form id="form" class="topBefore">
<input id="name" type="text" placeholder="NAME">
<input id="email" type="text" placeholder="E-MAIL">
<textarea id="message" type="text" placeholder="MESSAGE"></textarea>
<input id="submit" type="submit" value="Submit Now!">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#myModal" data-dismiss="modal">ABOUT</button>
<button type="button" class="btn btn-danger btn-outline" data-toggle="modal" data-target="#social" data-dismiss="modal">SOCIAL</button>
<button type="button" class="btn btn-danger btn-outline" data-dismiss="modal">&times;</button>
</div>
</div>
</div>
</div>
</div>
<!-- end .container -->
</body>
Raw
multi-modal-profile-card-bootstrap.markdown

Multi Modal Profile Card Bootstrap

Simple multi modal profile card. Easy to display multiple pages of information on your blog. Built using bootstrap modals and buttons.

A Pen by HARUN PEHLİVAN on CodePen.

License.

Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Raw
style.css
@import "compass/css3";
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
.body {
margin: auto;
}
body {
background: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png') no-repeat center center;
background-size: 1400px 700px;
background-position: 30%;
background-attachment: fixed;
}
.box {
width: 300px;
height: 450px;
margin: auto;
background-color: transparent;
border-style: solid;
border-width: 0.0px;
/* add px if you want border */
border-color: #eee;
margin-bottom: 800px;
/* delete */
margin-top: 25px;
/* delete */
background: url('') no-repeat center center;
background-size: 300px 210px;
background-position: left top;
}
.text {
font-family: raleway;
font-size: 40px;
position: absolute center;
display: inline-block;
text-align: center;
padding-left: 7.4%;
color: #eee;
margin-top: 43px;
}
.text1 {
font-family: raleway;
font-size: 29px;
text-align: center;
margin-top: -20px;
color: #eee;
}
.btn-outline {
color: inherit;
transition: all 1.4s;
background-color: transparent;
}
/* button CSS */
.btn-primary.btn-outline {
margin-top: 9px;
background-color: transparent;
color: #eee;
border-color: #eee;
padding-left: 30px;
padding-right: 30px;
font-family: lato;
font-weight: 300;
}
/* Modal button CSS */
.btn-danger.btn-outline {
background-color: transparent;
color: #000;
border-color: #000;
padding-left: 20px;
padding-right: 20px;
font-family: lato;
font-weight: 300;
}
.bio {
font-family: raleway;
font-size: 20px;
margin-right: 5%;
}
.image {
text-align: center;
width: 250px;
/* Container's dimensions */
height: 250px;
-webkit-border-radius: 75%;
-moz-border-radius: 75%;
box-shadow: 0 0 0 1px #eee;
background: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1569070436/medium_gravatartebm.qr_yi1sjg.png") center center no-repeat;
background-size: cover;
margin: 8%;
margin-top: 20px;
margin-bottom: -30px;
align-content: center;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
.image:hover {
box-shadow: 0px 0px 38px .9px #ccc;
}
.image:hover {
-webkit-transform: scale(1.10);
transform: scale(1.10);
-webkit-transition: 1.6s ease-in-out;
transition: 1.6s ease-in-out;
}
.image {
-webkit-transform: scale(1.0);
transform: scale(1.0);
-webkit-transition: 1.6s ease-out;
transition: 1.6s ease-out;
}
.trick:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
#overlay {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding: 0 0 0 0;
opacity: 1.0;
-webkit-transition: opacity 2.25s ease;
-moz-transition: opacity 10.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
/*--------- Social Icons ------------*/
.footer-social-links {
font-size: 14px;
text-align: center;
margin-top: 3%;
}
.footer-social-links a {
width: 25px;
height: 25px;
line-height: 25px !important;
position: relative;
margin: 0 5px;
text-align: center;
display: inline-block;
color: #111;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.footer-social-links a i,
.footer-social-links a span {
position: relative;
top: 2px;
left: 1px;
}
.footer-social-links a:before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #111;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.footer-social-links a:hover {
color: #fff;
}
.footer-social-links a:hover:before {
background: #111;
}
/*--------- Contact Form ------------*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #000;
font-size: 15px;
}
/* on hover placeholder */
input:hover::-webkit-input-placeholder,
textarea:hover::-webkit-input-placeholder {
color: #fff;
font-size: 15px;
font-family: raleway;
}
input:hover:focus::-webkit-input-placeholder,
textarea:hover:focus::-webkit-input-placeholder {
color: #fff;
font-family: raleway;
}
input:hover::-moz-placeholder,
textarea:hover::-moz-placeholder {
color: #fff;
font-size: 15px;
font-family: raleway;
}
input:hover:focus::-moz-placeholder,
textarea:hover:focus::-moz-placeholder {
color: #fff;
font-family: raleway;
}
input:hover::placeholder,
textarea:hover::placeholder {
color: #fff;
font-size: 15px;
font-family: raleway;
}
input:hover:focus::placeholder,
textarea:hover:focus::placeholder {
color: #fff;
font-family: raleway;
}
input:hover::placeholder,
textarea:hover::placeholder {
color: #fff;
font-size: 15px;
font-family: raleway;
}
input:hover:focus::-ms-placeholder,
textarea:hover::focus:-ms-placeholder {
color: #fff;
font-family: raleway;
}
#form {
position: relative;
width: 100%;
margin: 0px auto 0px auto;
font-family: raleway;
}
input {
font-family: raleway;
font-size: 15px;
width: 100%;
height: 50px;
padding: 0px 12px 0px 12px;
background: transparent;
outline: none;
color: #726659;
border: solid 1px #eee;
border-bottom: none;
transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
}
input:hover {
background: #ccc;
color: #fff;
font-family: raleway;
}
textarea {
width: 100%;
max-width: 100%;
height: 110px;
max-height: 110px;
padding: 15px;
background: transparent;
outline: none;
color: #000;
font-family: raleway;
font-size: 25px;
border: solid 1px #eee;
transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
}
textarea:hover {
background: #ccc;
color: #fff;
font-family: raleway;
}
#submit {
width: 100%;
padding: 0;
font-family: raleway;
font-size: 20px;
color: #000;
outline: none;
cursor: pointer;
border: solid 1px #eee;
border-top: none;
margin-bottom: -20px;
}
#submit:hover {
color: #fff;
background-color: #ccc;
}
Raw
styles
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sco.js/1.1.0/css/scojs.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment