CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

body {

background: #aba6f6;

font-family: 'Varela Round';

text-transform: uppercase;

height: 100vh;

}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

width: 325px;

margin: 5% auto;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.container header {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

padding: 10px 0;

background: #4a4448;

color: #a19e9e;

font-size: 9px;

letter-spacing: 0.5px;

border-radius: 5px 5px 0 0;

}

.container .location {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

padding: 20px 0;

color: #fff;

background: #86e082;

}

.container .location h2 {

font-size: 60px;

font-weight: bold;

}

.container .location h3 {

font-size: 9px;

letter-spacing: 0.5px;

}

.container .information {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background: #fff;

padding-left: 10px;

border-radius: 0 0 5px 5px;

}

.container .information .passenger {

width: 100%;

}

.container .information .passenger,

.container .information .flight,

.container .information .seat,

.container .information .gate {

padding: 25px 15px 0;

}

.container .information .passenger h4,

.container .information .flight h4,

.container .information .seat h4,

.container .information .gate h4 {

color: #9ae596;

font-size: 9px;

letter-spacing: 0.5px;

padding-bottom: 2px;

}

.container .information .passenger h5,

.container .information .flight h5,

.container .information .seat h5,

.container .information .gate h5 {

font-size: 15px;

letter-spacing: 1px;

}

.container .information .seat h5 {

margin-left: -2px;

letter-spacing: -0.5px;

}

.container .information img {

width: 90%;

height: 50px;

padding: 20px 0;

margin: 0 8px;

}