"mysite"
Bootstrap 4.1.1 Snippet by vijay18399

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet"> <div class="menu"> <span></span> </div> <nav id="nav"> <ul class="main"> <li><a target="_blank " href="https://www.facebook.com/ravi7284007">Hi There! Ravi</a></li> <li><a target="_blank" href="https://www.facebook.com/ravi7284007">About ME</a></li> <li><a href="#one">Web Development</a></li> <li><a href="#two">Digital Marketing</a></li> <li><a target="_blank" href="https://www.instagram.com/ravi_singh_7/">Portfolio</a></li> <li><a target="_blank" href="https://500px.com/ravi7284007">Contact</a></li> </ul> </nav> <div class="overlay"></div> <section class="section_all" id="education" id="one"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="section_title text-center"> <p class="mb-0">Education & Experiance</p> <h3 class="font-weight-bold text-capitalize mb-0">Education & Experiance </h3> </div> </div> </div> <div class="row mt-5"> <div class="col-lg-6"> <div class="edu_content edu_gradiant_1 text-white mt-3"> <div class="edu_detail"> <h5 class="text-white">Studied at Cambridge University</h5> <h6 class="text-white font-weight-bold">2010 - 2014</h6> <p class="edu_desc mb-0 text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> <div class="col-lg-6"> <div class="edu_content edu_gradiant_2 text-white mt-3"> <div class="edu_detail"> <h5>Master In Computer Science</h5> <h6 class=" font-weight-bold">2014 - 2016</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-lg-6"> <div class="edu_content edu_gradiant_3 text-white mt-3"> <div class="edu_detail"> <h5>UI/UX Designer</h5> <h6 class="font-weight-bold">2016 - 2018</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> <div class="col-lg-6"> <div class="edu_content edu_gradiant_4 text-white mt-3"> <div class="edu_detail"> <h5>Senior Graphic Designer</h5> <h6 class="font-weight-bold">2010 - 2014</h6> <p class="edu_desc mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> </div> </div> </div> </div> </section> <section id="two"> <div class="container"> <div class="row center"> <div class="col-md-4 col-sm-6"> <div class="our-team"> <img src="http://static1.purebreak.com.br/articles/7/62/22/7/@/248104-filme-liga-da-justica-ganha-nova-foto-diapo-3.jpg"> <div class="team-content"> <h3 class="title">YONY</h3> <span class="post">fond -enb</span> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> </div> </div> </section> <script> $('.menu, .overlay').click(function () { $('.menu').toggleClass('clicked'); $('#nav').toggleClass('show'); }); </script>
body{background:url(https://images.pexels.com/photos/207135/pexels-photo-207135.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat center/cover;font-family: 'Poppins', sans-serif; height:150vh; } html {font-size:14px} /* BURGER MENU ========================================== */ .menu { width: 50px; height: 50px; position: absolute; z-index: 21; right: 1%; } .menu span { position: relative; margin-top: 9px; margin-bottom: 9px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -1.5px; } .menu span, .menu span::before, .menu span::after { display: block; width: 26px; right: 0; height: 3px; background-color: #fccb32; outline: 1px solid transparent; -webkit-transition-property: background-color, -webkit-transform; -moz-transition-property: background-color, -moz-transform; -o-transition-property: background-color, -o-transform; transition-property: background-color, transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .menu span::before, .menu span::after { position: absolute; content: ""; } .menu span::before { top: -9px; width:20px } .menu span::after { top: 9px;width: 33px; } .menu.clicked span { background-color: transparent; } .menu.clicked span::before { -webkit-transform: translateY(9px) rotate(45deg); -moz-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); -o-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); width: 33px; } .menu.clicked span::after { -webkit-transform: translateY(-9px) rotate(-45deg); -moz-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); -o-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); } .menu.clicked span:before, .menu.clicked span:after { background-color: #ffffff; } .menu:hover { cursor: pointer; } /* NAV ========================================== */ #nav { background: #31B0D5; position: fixed; z-index: 20; top: 0; right: 0; height: 100%; max-width: 250px; width: 100%; padding: 100px 40px 60px 40px; overflow-y: auto; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); } #nav.show { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #nav.show ul.main li { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); opacity: 1; } .menu.clicked { position: fixed; z-index: 99; } #nav.show ul.main li:nth-child(1) { transition-delay: 0.15s; } #nav.show ul.main li:nth-child(2) { transition-delay: 0.3s; } #nav.show ul.main li:nth-child(3) { transition-delay: 0.45s; } #nav.show ul.main li:nth-child(4) { transition-delay: 0.6s; } #nav.show ul.main li:nth-child(5) { transition-delay: 0.75s; } #nav.show ul.main li:nth-child(6) { transition-delay: 0.9s; } #nav.show ul.main li:nth-child(7) { transition-delay: 1.05s; } #nav.show ul.main li:nth-child(8) { transition-delay: 1.2s; } #nav.show ul.main li:nth-child(9) { transition-delay: 1.35s; } #nav.show .about, #nav.show .social, #nav.show ul.sub { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: .85s; } @media (min-width: 667px) { #nav { padding: 120px 30px 70px 20px; } } #nav ul.main { list-style-type: none; } #nav ul.main li { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; float: none; list-style: circle; color: #fff } #nav ul.main li:last-of-type { margin-bottom: 0px; } #nav ul.main li a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 1rem; display: block; padding: 10px 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #nav ul.main li a span { color: #FFFFFF; } #nav ul.main li a:hover { color: #FFFFFF; } #nav ul.sub { list-style-type: none; margin-top: 40px; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } #nav ul.sub li { margin-bottom: 10px; } #nav ul.sub li:last-of-type { margin-bottom: 0px; } #nav ul.sub li a { color: #ffffff; font-family: "Raleway", sans-serif; letter-spacing: 1px; font-size: 0.9rem; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #nav ul.sub li a:hover { color: #b7ac7f; } .menu:hover span{} /* OVERLAY ========================================== */ .overlay { position: fixed; top: 0; left: 0; z-index: 7; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #603e82; opacity: 0; visibility: hidden; } .overlay.show { opacity: 0.8; visibility: visible; } /*================ 0.8 EDU & EXP ==================*/ .edu_content{ border-radius: 7px; border: 1px solid #e7e7e7; padding: 50px; } .edu_detail h5{ font-size: 18px; font-weight: 600; margin-top: 0; text-transform: capitalize; } .edu_gradiant_1{ background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%); } .edu_gradiant_2{ background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%); } .edu_gradiant_3{ background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%); } .edu_gradiant_4{ background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%); } .our-team{ border: 2px solid violet; border-radius: 10px; text-align: center; margin: 10px; z-index: 1; position: relative; } .our-team:before, .our-team:after{ content: ""; width: 100%; height: 104%; background: violet; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%) scaleX(0.3); transition: all 0.3s ease 0s; } .our-team:after{ width: 106%; left: 50%; transform: translate(-50%, -50%) scaleY(0.25); } .our-team:hover:before{ transform: translateY(-50%) scaleX(0.7); } .our-team:hover:after{ transform: translate(-50%, -50%) scaleY(0.7); } .our-team img{ width: 100%; height: auto; border-radius: 10px; transition: all 0.3s ease 0s; } .our-team .team-content{ width: 93%; padding: 25px 0 10px; background: violet; position: absolute; bottom: 50px; left: 50%; opacity: 0; -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); transform: translateX(-50%); transition: all 0.3s cubic-bezier(0.5, 0.2,0.1,0.9); } .our-team:hover .team-content{ bottom: 10px; opacity: 1; } .our-team .title{ font-size: 25px; font-weight: 600; color: #fff; letter-spacing: 1px; text-transform: capitalize; margin: 0; } .our-team .post{ display: block; font-size: 16px; color: #fff; text-transform: uppercase; margin-bottom: 10px; } .our-team .social{ padding: 0; margin: 0; list-style: none; } .our-team .social li{ display: inline-block; margin: 0 5px; } .our-team .social li a{ display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; background: #fff; font-size: 20px; color: #000; transition: all 0.3s ease 0s; } .our-team .social li a:hover{ background: linear-gradient(to bottom,violet, darkred); box-shadow: 0 0 0 5px rgba(255,255,255,0.3); color: #fff; } @media only screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; } }

Related: See More


Questions / Comments: