-
-
Save ShawnRong/7e7f7c2b5a90f65863aed3206f416e13 to your computer and use it in GitHub Desktop.
企业首页// source http://js.jirengu.com/xolureheqo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @font-face { | |
| font-family: 'iconfont'; /* project id 445228 */ | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot'); | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot?#iefix') format('embedded-opentype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.woff') format('woff'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.ttf') format('truetype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.svg#iconfont') format('svg'); | |
| } | |
| body { | |
| font-family: Arial, 'iconfont'; | |
| margin: 0 auto; | |
| width: 100%; | |
| background-color: #333; | |
| } | |
| .container { | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .navbar { | |
| background-color: transparent; | |
| padding: 15px 0; | |
| transition: padding .3s; | |
| border: 0; | |
| } | |
| .navbar-collapse ul { | |
| list-style: none; | |
| float: right; | |
| } | |
| .navbar-collapse ul:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse .navbar-title { | |
| float: left; | |
| color: #fdcf48; | |
| font-size: 2.5em; | |
| } | |
| .navbar-collapse:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse ul li { | |
| float: right; | |
| padding-top: 7px; | |
| } | |
| .navbar-collapse ul li a { | |
| text-decoration: none; | |
| padding: 0 11px; | |
| color: #fff; | |
| } | |
| .navbar-collapse ul li a:hover { | |
| color: #fdcf48; | |
| } | |
| header { | |
| background-image: url('http://oxzza6wqb.bkt.clouddn.com/jirengu/task15/header-bg.jpg'); | |
| background-repeat: none; | |
| background-attachment: scroll; | |
| background-size: cover; | |
| background-position: center center; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| header .intro { | |
| padding-top: 100px; | |
| padding-bottom: 50px; | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 22px; | |
| line-height: 22px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 50px; | |
| line-height: 50px; | |
| margin-bottom: 25px; | |
| margin-top: 0; | |
| } | |
| @media (min-width:768px) { | |
| header .intro { | |
| padding-top: 300px; | |
| padding-bottom: 200px | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 40px; | |
| line-height: 40px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 75px; | |
| line-height: 75px; | |
| margin-bottom: 50px; | |
| } | |
| } | |
| header .intro a { | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| text-decoration: none; | |
| } | |
| section { | |
| padding: 100px 0 | |
| } | |
| .services { | |
| background-color: #fff; | |
| } | |
| .services-head, | |
| .protifile-head { | |
| text-align: center; | |
| } | |
| .services-head h3, | |
| .protifile-head h3, | |
| .about h3, | |
| .team-head h3 { | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .services-head p, | |
| .protifile-head p, | |
| .about p, | |
| .team-head p, | |
| .team-footer p, | |
| .contact-us-header p { | |
| font-size: 16px; | |
| text-transform: none; | |
| font-style: italic; | |
| font-weight: 400; | |
| margin-bottom: 75px; | |
| color: #777; | |
| } | |
| .services-body { | |
| display: flex; | |
| text-align: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| } | |
| .service-item { | |
| width: 350px; | |
| } | |
| .service-item .icon { | |
| text-align: center; | |
| background-color: #fdcf48; | |
| color: #fff; | |
| width: 1em; | |
| height: 1em; | |
| font-size: 3em; | |
| border-radius: 2em; | |
| display: inline-block; | |
| padding: 0.5em; | |
| } | |
| .service-item h4, | |
| .protifile-item h4 { | |
| margin: 15px 0; | |
| text-transform: none; | |
| } | |
| .service-item p:last-child, | |
| .protifile-item p:last-child{ | |
| color: #777; | |
| font-size: 14px; | |
| line-height: 1.75; | |
| } | |
| .protifile { | |
| background-color: #f7f7f7; | |
| } | |
| .protifile .protifile-body { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .protifile .protifile-item { | |
| width: 345px; | |
| margin: 0 35px 60px; | |
| right: 0; | |
| background-color: #fff; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .protifile .protifile-item img { | |
| width: 100%; | |
| } | |
| .protifile .protifile-item .protifile-hover { | |
| background: rgba(254, 209, 54, .9); | |
| position: absolute; | |
| width: 100%; | |
| height: 74%; | |
| opacity: 0; | |
| transition: all ease .5s; | |
| } | |
| .protifile .protifile-item .protifile-hover:hover { | |
| opacity: 1; | |
| } | |
| .protifile .protifile-hover .protifile-hover-content { | |
| position: absolute; | |
| width: 100%; | |
| height: 70px; | |
| font-size: 70px; | |
| text-align: center; | |
| top: 50%; | |
| margin-top: -12px; | |
| color: #fff; | |
| } | |
| .about { | |
| background-color: #fff; | |
| text-align: center; | |
| } | |
| .timeline { | |
| list-style: none; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .timeline:before { | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| content: ""; | |
| width: 5px; | |
| background-color: #f1f1f1; | |
| left: 50%; | |
| margin-left: -1.5px; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 40%; | |
| float: right; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: left; | |
| text-align: right; | |
| } | |
| .timeline li:after{ | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .timeline li .timeline-panel:before { | |
| border-left-width: 0; | |
| border-right-width: 15px; | |
| left: -15px; | |
| right: auto; | |
| } | |
| .timeline li .timeline-panel:after { | |
| border-left-width: 0; | |
| border-right-width: 14px; | |
| left: -14px; | |
| right: auto; | |
| } | |
| .timeline .timeline-img { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 100%; | |
| border: 7px solid #f1f1f1; | |
| left: 50%; | |
| margin-left: 0; | |
| transform: translateX(-50%); | |
| } | |
| .timeline li:last-child .timeline-img { | |
| background-color: #fcce55; | |
| margin-top: -20px; | |
| } | |
| .timeline li:last-child .timeline-img h4 { | |
| color: #fff; | |
| color: #fff; | |
| line-height: 1.25; | |
| font-size: 20px; | |
| } | |
| .timeline .timeline-img img { | |
| width: 100%; | |
| border-radius: inherit; | |
| } | |
| .timeline .timeline-head h4 { | |
| margin-top: 0; | |
| color: inherit; | |
| } | |
| .timeline .timeline-head p { | |
| margin-bottom: 15px; | |
| } | |
| .timeline .timeline-head h4, | |
| .timeline .timeline-head p { | |
| font-size: 18px; | |
| color: #000; | |
| line-height: 1.1; | |
| font-style: normal; | |
| font-weight: bold; | |
| } | |
| @media (max-width:780px) { | |
| .services-body { | |
| justify-content: center; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: right; | |
| text-align: left; | |
| } | |
| .timeline .timeline-img, | |
| .timeline:before { | |
| left: 10%; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 80%; | |
| } | |
| } | |
| .team { | |
| background-color: #f7f7f7; | |
| text-align: center; | |
| } | |
| .all-member ul { | |
| list-style: none; | |
| } | |
| .all-member { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .team-member { | |
| width: 20%; | |
| } | |
| .team-member img { | |
| width: 100%; | |
| border-radius: 100%; | |
| border: 7px solid #fff; | |
| box-sizing: border-box; | |
| } | |
| .team-member img { | |
| margin: 0 auto; | |
| border: 7px solid #fff | |
| } | |
| .team-member h4 { | |
| margin-top: 25px; | |
| margin-bottom: 0; | |
| text-transform: none | |
| } | |
| .team-member p { | |
| margin-top: 0 | |
| } | |
| .team-member ul { | |
| margin-left: -40px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .team-member ul li { | |
| background-color: #000; | |
| font-size: 30px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 60px; | |
| padding: 13px 0; | |
| } | |
| .team-member ul li a { | |
| text-decoration: none; | |
| color: #fff; | |
| } | |
| .team-member ul li:hover { | |
| background-color: #fcce55; | |
| } | |
| .contact-us { | |
| background-image: url('http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/map-image.png'); | |
| text-align: center; | |
| } | |
| .contact-us-header h4 { | |
| color: #fff; | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .form-left { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| left: 6%; | |
| } | |
| .form-right { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| right: 6%; | |
| } | |
| .contact-us-form { | |
| position: relative; | |
| } | |
| .contact-us-form:after { | |
| clear: both; | |
| content: ''; | |
| display: block; | |
| } | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel] { | |
| margin-top: 28px; | |
| } | |
| .contact-us-form input[type=text], | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel], | |
| .contact-us-form textarea{ | |
| display: block; | |
| width: 100%; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075); | |
| transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
| padding: 20px; | |
| } | |
| .contact-us-form button { | |
| margin-top: 260px; | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| } | |
| footer { | |
| background-color: #fff; | |
| text-align: center; | |
| padding: 25px 0; | |
| } | |
| footer .copyright{ | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .social-media { | |
| margin-bottom: 0; | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .links ul { | |
| list-style: none; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| footer .links ul li a { | |
| text-decoration: none; | |
| color: #fcce55; | |
| } | |
| footer .links ul li:first-of-type { | |
| margin-right: 20px; | |
| } | |
| footer .container { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .social-media span { | |
| background-color: #000; | |
| font-size: 37px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 50px; | |
| padding: 5px 0; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .social-media span:hover { | |
| background-color: #fcce55; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <nav class="navbar"> | |
| <div class="container"> | |
| <div class="navbar-collapse"> | |
| <div class="navbar-title"> | |
| Start Projects | |
| </div> | |
| <ul> | |
| <li><a href="#">SERVICES</a></li> | |
| <li><a href="#">PROTIFILE</a></li> | |
| <li><a href="#">ABOUT</a></li> | |
| <li><a href="#">TEAM</a></li> | |
| <li><a href="#">CONTACT</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <div class="intro"> | |
| <p>Welcome to Our Studio!</p> | |
| <p>It's Nice to Meet You</p> | |
| <a href="#">TELL ME MORE</a> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="services"> | |
| <div class="container"> | |
| <div class="services-head"> | |
| <h3>SERVICES</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur.</p> | |
| </div> | |
| <div class="services-body"> | |
| <div class="service-item"> | |
| <p class="icon"></p> | |
| <h4>E-Commerce</h4> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> | |
| </div> | |
| <div class="service-item"> | |
| <p class="icon"></p> | |
| <h4>Responsive Design</h4> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> | |
| </div> | |
| <div class="service-item"> | |
| <p class="icon"></p> | |
| <h4>Web Security</h4> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="protifile"> | |
| <div class="container"> | |
| <div class="protifile-head"> | |
| <h3>PORTFOLIO</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur.</p> | |
| </div> | |
| <div class="protifile-body"> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Round Icons</h4> | |
| <p>Graphic Design</p> | |
| </div> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Startup Framework</h4> | |
| <p>Website Design</p> | |
| </div> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Treehouse</h4> | |
| <p>Website Design</p> | |
| </div> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Golden</h4> | |
| <p>Graphic Design</p> | |
| </div> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Escape</h4> | |
| <p>Graphic Design</p> | |
| </div> | |
| <div class="protifile-item"> | |
| <div class="protifile-hover"> | |
| <div class="protifile-hover-content"> | |
|  | |
| </div> | |
| </div> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/roundicons.png" alt="roundicons"> | |
| <h4>Dreams</h4> | |
| <p>Graphic Design</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="about"> | |
| <div class="container"> | |
| <div class="about-head"> | |
| <h3>ABOUT</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur.</p> | |
| </div> | |
| <div class="about-item"> | |
| <ul class="timeline"> | |
| <li> | |
| <div class="timeline-img"> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/timeline-1.jpg" alt="timeline-pic"> | |
| </div> | |
| <div class="timeline-panel"> | |
| <div class="timeline-head"> | |
| <h4>2009-2011</h4> | |
| <p>Our Humble Beginnings</p> | |
| </div> | |
| <div class="timeline-body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="timeline-img"> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/timeline-1.jpg" alt="timeline-pic"> | |
| </div> | |
| <div class="timeline-panel timeline-panel-reverse"> | |
| <div class="timeline-head"> | |
| <h4>March 2011</h4> | |
| <p>An Agency is Born</p> | |
| </div> | |
| <div class="timeline-body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="timeline-img"> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/timeline-1.jpg" alt="timeline-pic"> | |
| </div> | |
| <div class="timeline-panel"> | |
| <div class="timeline-head"> | |
| <h4>December 2012</h4> | |
| <p>Transition to Full Service</p> | |
| </div> | |
| <div class="timeline-body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="timeline-img"> | |
| <img src="http://oxzza6wqb.bkt.clouddn.com/timeline-1.jpg" alt="timeline-pic"> | |
| </div> | |
| <div class="timeline-panel timeline-panel-reverse"> | |
| <div class="timeline-head"> | |
| <h4>July 2014</h4> | |
| <p>Phase Two Expansion</p> | |
| </div> | |
| <div class="timeline-body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="timeline-img"> | |
| <h4>Be Part | |
| <br>Of Our | |
| <br>Story!</h4> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="team"> | |
| <div class="container"> | |
| <div class="team-head"> | |
| <h3>OUR AMAZING TEAM</h3> | |
| <p>Lorem ipsum dolor sit amet consectetur.</p> | |
| </div> | |
| <div class="all-member"> | |
| <div class="team-member"> | |
| <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/6.jpg" alt=""> | |
| <h4>Kay Garland</h4> | |
| <p>Lead Designer</p> | |
| <ul> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="team-member"> | |
| <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/6.jpg" alt=""> | |
| <h4>Kay Garland</h4> | |
| <p>Lead Designer</p> | |
| <ul> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="team-member"> | |
| <img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/team/6.jpg" alt=""> | |
| <h4>Kay Garland</h4> | |
| <p>Lead Designer</p> | |
| <ul> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| <li><a href="#"></a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="team-footer"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="contact-us"> | |
| <div class="container"> | |
| <div class="contact-us-header"> | |
| <h4>CONTACT US</h4> | |
| <p>Lorem ipsum dolor sit amet consectetur.</p> | |
| </div> | |
| <form name="sentMessage" class="contact-us-form" action="#" method="post"> | |
| <div class="form-left"> | |
| <input type="text" placeholder="YOUR NAME *" id="name"> | |
| <input type="email" placeholder="YOUR EMAIL *" id="email"> | |
| <input type="tel" placeholder="YOUR PHONE *" id="phone"> | |
| </div> | |
| <div class="form-right"> | |
| <textarea placeholder="YOUR MESSAGE *" id="message" rows="10"></textarea> | |
| </div> | |
| <button type="submit">Send Message</button> | |
| </form> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="copyright"> | |
| Copyright © Your Website 2014 | |
| </div> | |
| <div class="social-media"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="links"> | |
| <ul> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">Terms of Use</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </footer> | |
| <script id="jsbin-source-css" type="text/css">@font-face { | |
| font-family: 'iconfont'; /* project id 445228 */ | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot'); | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot?#iefix') format('embedded-opentype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.woff') format('woff'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.ttf') format('truetype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.svg#iconfont') format('svg'); | |
| } | |
| body { | |
| font-family: Arial, 'iconfont'; | |
| margin: 0 auto; | |
| width: 100%; | |
| background-color: #333; | |
| } | |
| .container { | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .navbar { | |
| background-color: transparent; | |
| padding: 15px 0; | |
| transition: padding .3s; | |
| border: 0; | |
| } | |
| .navbar-collapse ul { | |
| list-style: none; | |
| float: right; | |
| } | |
| .navbar-collapse ul:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse .navbar-title { | |
| float: left; | |
| color: #fdcf48; | |
| font-size: 2.5em; | |
| } | |
| .navbar-collapse:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse ul li { | |
| float: right; | |
| padding-top: 7px; | |
| } | |
| .navbar-collapse ul li a { | |
| text-decoration: none; | |
| padding: 0 11px; | |
| color: #fff; | |
| } | |
| .navbar-collapse ul li a:hover { | |
| color: #fdcf48; | |
| } | |
| header { | |
| background-image: url('http://oxzza6wqb.bkt.clouddn.com/jirengu/task15/header-bg.jpg'); | |
| background-repeat: none; | |
| background-attachment: scroll; | |
| background-size: cover; | |
| background-position: center center; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| header .intro { | |
| padding-top: 100px; | |
| padding-bottom: 50px; | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 22px; | |
| line-height: 22px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 50px; | |
| line-height: 50px; | |
| margin-bottom: 25px; | |
| margin-top: 0; | |
| } | |
| @media (min-width:768px) { | |
| header .intro { | |
| padding-top: 300px; | |
| padding-bottom: 200px | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 40px; | |
| line-height: 40px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 75px; | |
| line-height: 75px; | |
| margin-bottom: 50px; | |
| } | |
| } | |
| header .intro a { | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| text-decoration: none; | |
| } | |
| section { | |
| padding: 100px 0 | |
| } | |
| .services { | |
| background-color: #fff; | |
| } | |
| .services-head, | |
| .protifile-head { | |
| text-align: center; | |
| } | |
| .services-head h3, | |
| .protifile-head h3, | |
| .about h3, | |
| .team-head h3 { | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .services-head p, | |
| .protifile-head p, | |
| .about p, | |
| .team-head p, | |
| .team-footer p, | |
| .contact-us-header p { | |
| font-size: 16px; | |
| text-transform: none; | |
| font-style: italic; | |
| font-weight: 400; | |
| margin-bottom: 75px; | |
| color: #777; | |
| } | |
| .services-body { | |
| display: flex; | |
| text-align: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| } | |
| .service-item { | |
| width: 350px; | |
| } | |
| .service-item .icon { | |
| text-align: center; | |
| background-color: #fdcf48; | |
| color: #fff; | |
| width: 1em; | |
| height: 1em; | |
| font-size: 3em; | |
| border-radius: 2em; | |
| display: inline-block; | |
| padding: 0.5em; | |
| } | |
| .service-item h4, | |
| .protifile-item h4 { | |
| margin: 15px 0; | |
| text-transform: none; | |
| } | |
| .service-item p:last-child, | |
| .protifile-item p:last-child{ | |
| color: #777; | |
| font-size: 14px; | |
| line-height: 1.75; | |
| } | |
| .protifile { | |
| background-color: #f7f7f7; | |
| } | |
| .protifile .protifile-body { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .protifile .protifile-item { | |
| width: 345px; | |
| margin: 0 35px 60px; | |
| right: 0; | |
| background-color: #fff; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .protifile .protifile-item img { | |
| width: 100%; | |
| } | |
| .protifile .protifile-item .protifile-hover { | |
| background: rgba(254, 209, 54, .9); | |
| position: absolute; | |
| width: 100%; | |
| height: 74%; | |
| opacity: 0; | |
| transition: all ease .5s; | |
| } | |
| .protifile .protifile-item .protifile-hover:hover { | |
| opacity: 1; | |
| } | |
| .protifile .protifile-hover .protifile-hover-content { | |
| position: absolute; | |
| width: 100%; | |
| height: 70px; | |
| font-size: 70px; | |
| text-align: center; | |
| top: 50%; | |
| margin-top: -12px; | |
| color: #fff; | |
| } | |
| .about { | |
| background-color: #fff; | |
| text-align: center; | |
| } | |
| .timeline { | |
| list-style: none; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .timeline:before { | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| content: ""; | |
| width: 5px; | |
| background-color: #f1f1f1; | |
| left: 50%; | |
| margin-left: -1.5px; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 40%; | |
| float: right; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: left; | |
| text-align: right; | |
| } | |
| .timeline li:after{ | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .timeline li .timeline-panel:before { | |
| border-left-width: 0; | |
| border-right-width: 15px; | |
| left: -15px; | |
| right: auto; | |
| } | |
| .timeline li .timeline-panel:after { | |
| border-left-width: 0; | |
| border-right-width: 14px; | |
| left: -14px; | |
| right: auto; | |
| } | |
| .timeline .timeline-img { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 100%; | |
| border: 7px solid #f1f1f1; | |
| left: 50%; | |
| margin-left: 0; | |
| transform: translateX(-50%); | |
| } | |
| .timeline li:last-child .timeline-img { | |
| background-color: #fcce55; | |
| margin-top: -20px; | |
| } | |
| .timeline li:last-child .timeline-img h4 { | |
| color: #fff; | |
| color: #fff; | |
| line-height: 1.25; | |
| font-size: 20px; | |
| } | |
| .timeline .timeline-img img { | |
| width: 100%; | |
| border-radius: inherit; | |
| } | |
| .timeline .timeline-head h4 { | |
| margin-top: 0; | |
| color: inherit; | |
| } | |
| .timeline .timeline-head p { | |
| margin-bottom: 15px; | |
| } | |
| .timeline .timeline-head h4, | |
| .timeline .timeline-head p { | |
| font-size: 18px; | |
| color: #000; | |
| line-height: 1.1; | |
| font-style: normal; | |
| font-weight: bold; | |
| } | |
| @media (max-width:780px) { | |
| .services-body { | |
| justify-content: center; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: right; | |
| text-align: left; | |
| } | |
| .timeline .timeline-img, | |
| .timeline:before { | |
| left: 10%; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 80%; | |
| } | |
| } | |
| .team { | |
| background-color: #f7f7f7; | |
| text-align: center; | |
| } | |
| .all-member ul { | |
| list-style: none; | |
| } | |
| .all-member { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .team-member { | |
| width: 20%; | |
| } | |
| .team-member img { | |
| width: 100%; | |
| border-radius: 100%; | |
| border: 7px solid #fff; | |
| box-sizing: border-box; | |
| } | |
| .team-member img { | |
| margin: 0 auto; | |
| border: 7px solid #fff | |
| } | |
| .team-member h4 { | |
| margin-top: 25px; | |
| margin-bottom: 0; | |
| text-transform: none | |
| } | |
| .team-member p { | |
| margin-top: 0 | |
| } | |
| .team-member ul { | |
| margin-left: -40px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .team-member ul li { | |
| background-color: #000; | |
| font-size: 30px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 60px; | |
| padding: 13px 0; | |
| } | |
| .team-member ul li a { | |
| text-decoration: none; | |
| color: #fff; | |
| } | |
| .team-member ul li:hover { | |
| background-color: #fcce55; | |
| } | |
| .contact-us { | |
| background-image: url('http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/map-image.png'); | |
| text-align: center; | |
| } | |
| .contact-us-header h4 { | |
| color: #fff; | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .form-left { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| left: 6%; | |
| } | |
| .form-right { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| right: 6%; | |
| } | |
| .contact-us-form { | |
| position: relative; | |
| } | |
| .contact-us-form:after { | |
| clear: both; | |
| content: ''; | |
| display: block; | |
| } | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel] { | |
| margin-top: 28px; | |
| } | |
| .contact-us-form input[type=text], | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel], | |
| .contact-us-form textarea{ | |
| display: block; | |
| width: 100%; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075); | |
| transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
| padding: 20px; | |
| } | |
| .contact-us-form button { | |
| margin-top: 260px; | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| } | |
| footer { | |
| background-color: #fff; | |
| text-align: center; | |
| padding: 25px 0; | |
| } | |
| footer .copyright{ | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .social-media { | |
| margin-bottom: 0; | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .links ul { | |
| list-style: none; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| footer .links ul li a { | |
| text-decoration: none; | |
| color: #fcce55; | |
| } | |
| footer .links ul li:first-of-type { | |
| margin-right: 20px; | |
| } | |
| footer .container { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .social-media span { | |
| background-color: #000; | |
| font-size: 37px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 50px; | |
| padding: 5px 0; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .social-media span:hover { | |
| background-color: #fcce55; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: 'iconfont'; /* project id 445228 */ | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot'); | |
| src: url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.eot?#iefix') format('embedded-opentype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.woff') format('woff'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.ttf') format('truetype'), | |
| url('//at.alicdn.com/t/font_445228_b28j287bu39885mi.svg#iconfont') format('svg'); | |
| } | |
| body { | |
| font-family: Arial, 'iconfont'; | |
| margin: 0 auto; | |
| width: 100%; | |
| background-color: #333; | |
| } | |
| .container { | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .navbar { | |
| background-color: transparent; | |
| padding: 15px 0; | |
| transition: padding .3s; | |
| border: 0; | |
| } | |
| .navbar-collapse ul { | |
| list-style: none; | |
| float: right; | |
| } | |
| .navbar-collapse ul:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse .navbar-title { | |
| float: left; | |
| color: #fdcf48; | |
| font-size: 2.5em; | |
| } | |
| .navbar-collapse:after { | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .navbar-collapse ul li { | |
| float: right; | |
| padding-top: 7px; | |
| } | |
| .navbar-collapse ul li a { | |
| text-decoration: none; | |
| padding: 0 11px; | |
| color: #fff; | |
| } | |
| .navbar-collapse ul li a:hover { | |
| color: #fdcf48; | |
| } | |
| header { | |
| background-image: url('http://oxzza6wqb.bkt.clouddn.com/jirengu/task15/header-bg.jpg'); | |
| background-repeat: none; | |
| background-attachment: scroll; | |
| background-size: cover; | |
| background-position: center center; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| header .intro { | |
| padding-top: 100px; | |
| padding-bottom: 50px; | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 22px; | |
| line-height: 22px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 50px; | |
| line-height: 50px; | |
| margin-bottom: 25px; | |
| margin-top: 0; | |
| } | |
| @media (min-width:768px) { | |
| header .intro { | |
| padding-top: 300px; | |
| padding-bottom: 200px | |
| } | |
| header .intro p:first-child { | |
| font-style: italic; | |
| font-size: 40px; | |
| line-height: 40px; | |
| margin-bottom: 25px; | |
| } | |
| header .intro p:last-of-type { | |
| text-transform: uppercase; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| font-size: 75px; | |
| line-height: 75px; | |
| margin-bottom: 50px; | |
| } | |
| } | |
| header .intro a { | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| text-decoration: none; | |
| } | |
| section { | |
| padding: 100px 0 | |
| } | |
| .services { | |
| background-color: #fff; | |
| } | |
| .services-head, | |
| .protifile-head { | |
| text-align: center; | |
| } | |
| .services-head h3, | |
| .protifile-head h3, | |
| .about h3, | |
| .team-head h3 { | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .services-head p, | |
| .protifile-head p, | |
| .about p, | |
| .team-head p, | |
| .team-footer p, | |
| .contact-us-header p { | |
| font-size: 16px; | |
| text-transform: none; | |
| font-style: italic; | |
| font-weight: 400; | |
| margin-bottom: 75px; | |
| color: #777; | |
| } | |
| .services-body { | |
| display: flex; | |
| text-align: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| } | |
| .service-item { | |
| width: 350px; | |
| } | |
| .service-item .icon { | |
| text-align: center; | |
| background-color: #fdcf48; | |
| color: #fff; | |
| width: 1em; | |
| height: 1em; | |
| font-size: 3em; | |
| border-radius: 2em; | |
| display: inline-block; | |
| padding: 0.5em; | |
| } | |
| .service-item h4, | |
| .protifile-item h4 { | |
| margin: 15px 0; | |
| text-transform: none; | |
| } | |
| .service-item p:last-child, | |
| .protifile-item p:last-child{ | |
| color: #777; | |
| font-size: 14px; | |
| line-height: 1.75; | |
| } | |
| .protifile { | |
| background-color: #f7f7f7; | |
| } | |
| .protifile .protifile-body { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .protifile .protifile-item { | |
| width: 345px; | |
| margin: 0 35px 60px; | |
| right: 0; | |
| background-color: #fff; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .protifile .protifile-item img { | |
| width: 100%; | |
| } | |
| .protifile .protifile-item .protifile-hover { | |
| background: rgba(254, 209, 54, .9); | |
| position: absolute; | |
| width: 100%; | |
| height: 74%; | |
| opacity: 0; | |
| transition: all ease .5s; | |
| } | |
| .protifile .protifile-item .protifile-hover:hover { | |
| opacity: 1; | |
| } | |
| .protifile .protifile-hover .protifile-hover-content { | |
| position: absolute; | |
| width: 100%; | |
| height: 70px; | |
| font-size: 70px; | |
| text-align: center; | |
| top: 50%; | |
| margin-top: -12px; | |
| color: #fff; | |
| } | |
| .about { | |
| background-color: #fff; | |
| text-align: center; | |
| } | |
| .timeline { | |
| list-style: none; | |
| position: relative; | |
| padding: 0; | |
| } | |
| .timeline:before { | |
| top: 0; | |
| bottom: 0; | |
| position: absolute; | |
| content: ""; | |
| width: 5px; | |
| background-color: #f1f1f1; | |
| left: 50%; | |
| margin-left: -1.5px; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 40%; | |
| float: right; | |
| padding: 0; | |
| position: relative; | |
| text-align: left; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: left; | |
| text-align: right; | |
| } | |
| .timeline li:after{ | |
| content: ''; | |
| clear: both; | |
| display: block; | |
| } | |
| .timeline li .timeline-panel:before { | |
| border-left-width: 0; | |
| border-right-width: 15px; | |
| left: -15px; | |
| right: auto; | |
| } | |
| .timeline li .timeline-panel:after { | |
| border-left-width: 0; | |
| border-right-width: 14px; | |
| left: -14px; | |
| right: auto; | |
| } | |
| .timeline .timeline-img { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 100%; | |
| border: 7px solid #f1f1f1; | |
| left: 50%; | |
| margin-left: 0; | |
| transform: translateX(-50%); | |
| } | |
| .timeline li:last-child .timeline-img { | |
| background-color: #fcce55; | |
| margin-top: -20px; | |
| } | |
| .timeline li:last-child .timeline-img h4 { | |
| color: #fff; | |
| color: #fff; | |
| line-height: 1.25; | |
| font-size: 20px; | |
| } | |
| .timeline .timeline-img img { | |
| width: 100%; | |
| border-radius: inherit; | |
| } | |
| .timeline .timeline-head h4 { | |
| margin-top: 0; | |
| color: inherit; | |
| } | |
| .timeline .timeline-head p { | |
| margin-bottom: 15px; | |
| } | |
| .timeline .timeline-head h4, | |
| .timeline .timeline-head p { | |
| font-size: 18px; | |
| color: #000; | |
| line-height: 1.1; | |
| font-style: normal; | |
| font-weight: bold; | |
| } | |
| @media (max-width:780px) { | |
| .services-body { | |
| justify-content: center; | |
| } | |
| .timeline li .timeline-panel-reverse { | |
| float: right; | |
| text-align: left; | |
| } | |
| .timeline .timeline-img, | |
| .timeline:before { | |
| left: 10%; | |
| } | |
| .timeline li .timeline-panel { | |
| width: 80%; | |
| } | |
| } | |
| .team { | |
| background-color: #f7f7f7; | |
| text-align: center; | |
| } | |
| .all-member ul { | |
| list-style: none; | |
| } | |
| .all-member { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .team-member { | |
| width: 20%; | |
| } | |
| .team-member img { | |
| width: 100%; | |
| border-radius: 100%; | |
| border: 7px solid #fff; | |
| box-sizing: border-box; | |
| } | |
| .team-member img { | |
| margin: 0 auto; | |
| border: 7px solid #fff | |
| } | |
| .team-member h4 { | |
| margin-top: 25px; | |
| margin-bottom: 0; | |
| text-transform: none | |
| } | |
| .team-member p { | |
| margin-top: 0 | |
| } | |
| .team-member ul { | |
| margin-left: -40px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .team-member ul li { | |
| background-color: #000; | |
| font-size: 30px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 60px; | |
| padding: 13px 0; | |
| } | |
| .team-member ul li a { | |
| text-decoration: none; | |
| color: #fff; | |
| } | |
| .team-member ul li:hover { | |
| background-color: #fcce55; | |
| } | |
| .contact-us { | |
| background-image: url('http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/map-image.png'); | |
| text-align: center; | |
| } | |
| .contact-us-header h4 { | |
| color: #fff; | |
| font-size: 40px; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| } | |
| .form-left { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| left: 6%; | |
| } | |
| .form-right { | |
| width: 40%; | |
| position: absolute; | |
| top: 0; | |
| right: 6%; | |
| } | |
| .contact-us-form { | |
| position: relative; | |
| } | |
| .contact-us-form:after { | |
| clear: both; | |
| content: ''; | |
| display: block; | |
| } | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel] { | |
| margin-top: 28px; | |
| } | |
| .contact-us-form input[type=text], | |
| .contact-us-form input[type=email], | |
| .contact-us-form input[type=tel], | |
| .contact-us-form textarea{ | |
| display: block; | |
| width: 100%; | |
| font-size: 14px; | |
| line-height: 1.42857143; | |
| color: #555; | |
| background-color: #fff; | |
| background-image: none; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075); | |
| transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; | |
| padding: 20px; | |
| } | |
| .contact-us-form button { | |
| margin-top: 260px; | |
| color: #fff; | |
| background-color: #fed136; | |
| border-color: #fed136; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| font-size: 18px; | |
| padding: 20px 40px; | |
| } | |
| footer { | |
| background-color: #fff; | |
| text-align: center; | |
| padding: 25px 0; | |
| } | |
| footer .copyright{ | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .social-media { | |
| margin-bottom: 0; | |
| line-height: 40px; | |
| text-transform: uppercase; | |
| text-transform: none | |
| } | |
| footer .links ul { | |
| list-style: none; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| footer .links ul li a { | |
| text-decoration: none; | |
| color: #fcce55; | |
| } | |
| footer .links ul li:first-of-type { | |
| margin-right: 20px; | |
| } | |
| footer .container { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .social-media span { | |
| background-color: #000; | |
| font-size: 37px; | |
| color: white; | |
| border-radius: 100%; | |
| width: 50px; | |
| padding: 5px 0; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .social-media span:hover { | |
| background-color: #fcce55; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment