<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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 ----------> <div id="experience" class="experience"> <div class="container"> <!---728x90---> <div class="sec-title text-center"> <h3>Some Story Behind Us</h3> <h1>Jobs & Experience</h1> </div> <div class="skill_info_wthree_agile"> <div class="work-info"> <div class="col-md-6 work-left"> <h4>2014 - 2018 </h4> </div> <div class="col-md-6 work-right"> <h5><span class="fa fa-dot-circle-o"> </span>Developer</h5> <p>University of Oxford</p> <div class="clearfix"> </div> </div> <div class="work-info"> <div class="col-md-6 work-right work-right2"> <h4>2013 - 2014 </h4> </div> <div class="col-md-6 work-left work-left2"> <h5> Designer <span class="fa fa-dot-circle-o"> </span></h5> <p>Freelancer </p> </div> <div class="clearfix"> </div> </div> <div class="work-info"> <div class="col-md-6 work-left"> <h4>2012 - 2013 </h4> </div> <div class="col-md-6 work-right"> <h5><span class="fa fa-dot-circle-o"> </span> Upwork</h5> <p>Company Ltd. </p> </div> <div class="clearfix"> </div> </div> <div class="work-info"> <div class="col-md-6 work-right work-right2"> <h4>2010 - 2012 </h4> </div> <div class="col-md-6 work-left work-left2"> <h5> Wordpress <span class="fa fa-dot-circle-o"></span> </h5> <p>Company Inc.</p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div>

/*--work--*/ div#experience { float: left; width: 100%; padding: 30px 0px; } .work { background: #000; } .work-left { text-align: right; padding: 4em 5em 0 0; } .work-right { border-left: 4px solid #ebebec; padding: 4em 0 2em 6em; } .work-info h4 { font-size: 1.2em; display: inline-block; padding: .4em 1.2em; color: #fff; position: relative; background: #1b1b1b; font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: 1px; box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 4px 7px 0 rgba(0, 0, 0, 0.19); } .work-info h4:before { width: 0; height: 0; position: absolute; content: ''; top: 9px; right: -10px; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #1b1b1b; } .work-info h5 { font-size: 1.0em; color: #00a98f; text-transform: uppercase; margin-bottom: .5em; display: inline-block; padding: 0 1.2em; letter-spacing: 1px; text-shadow: 2px 2px 0px rgba(74, 76, 76, 0.09); font-weight: 700; } .work-info h5 span.fa { font-size: 1.0em; color: #ffffff; background: #5b3859; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; width: 28px; height: 28px; text-align: center; line-height: 29px; } h3{ font-family: 'Courgette', cursive !important; } .work-right h5 span.fa { margin-right: 3.5em; margin-left: -7.3em; } .work-left2 h5 span.fa { margin-left: 3em; margin-right: -6.5em; z-index: 9; } .work-right.work-right2 { min-height: 160px; float: right; } .work-right.work-right2 h4:before { left: -10px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } .work-right.work-right2 h4 { margin-top: 0.2em; } .work-info:hover h5 span.fa { color: #fff; } .work-info p { font-size: 15px; color: #666; line-height: 12px; } .experience h4.title-w3ls { margin-bottom: 20px; } h3.tittle_w3layouts.two, p.sub_para.two { text-align: center; } .slogan-area { background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 60px 0 20px 0px; position: relative; z-index: 1; clear: both; overflow: hidden; float: left; width: 100%; } .slogan-area h1 { color: #ffffff; font-size: 36px; font-weight: 600; line-height: 42px; margin: 0 0 13px; } .slogan-area p { color: #ffffff; font-size: 14px; margin: 0; }