アプリーチ
SAMPLE
COLOR :
コードを表示
CSS
/* * Copyright (c) NomadWorks * Design: NomadCode * https://www.code.nomad.inc/ */ .appreach { text-align: left; border: 1px solid #323232; background: #FFF; max-width: 100% !important; width: 100% !important; padding: 25px; margin: 20px auto; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .appreach:after { content: ""; display: block; clear: both; } .appreach p { line-height: 1.8em !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0% 3% 0% 0% !important; width: 22.5% !important; height: auto !important; max-width: 100px !important; } .appreach__detail { display: inline-block; line-height: 1.5; width: 72%; } .appreach__detail:after { content: ""; display: block; clear: both; } .appreach__name { font-size: 15px !important; color: #323232 !important; line-height: 1.5em !important; font-weight: bold !important; max-height: 3em; overflow: hidden; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; } .appreach__detail .appreach__info .appreach__posted { line-height: 1.3em !important; font-size: .8em !important; } .appreach__info { font-size: 12px !important; color: #929292 !important; } .appreach__posted { font-size: .9em !important; } .appreach__developper, .appreach__price { margin-right: 0.5em; } .appreach__posted a { margin-left: 0.8em; color: #55A8DC !important; } .appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .appreach__aslink img { height: 40px; -webkit-backface-visibility: hidden; margin-right: 10px; } .appreach__gplink img { height: 40px; -webkit-backface-visibility: hidden; } @media(max-width:460px) { .appreach { overflow: hidden; max-width: 320px !important; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; font-size: .7em !important; } .appreach__posted { font-size: .7em !important; } .appreach__icon { width: 25% !important; } .appreach__info { font-size: 10px !important; } .appreach__links { margin: auto; margin-top: 5px; padding-top: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% !important; } .appreach__aslink img, .appreach__gplink img { margin-right: 2px; height: 40px; } }
アプリーチ + 太線
SAMPLE
COLOR :
コードを表示
CSS
/* * Copyright (c) NomadWorks * Design: NomadCode * https://www.code.nomad.inc/ */ .appreach { text-align: left; border: 3px solid #323232; background: #FFF; max-width: 100% !important; width: 100% !important; padding: 25px; margin: 20px auto; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .appreach:after { content: ""; display: block; clear: both; } .appreach p { line-height: 1.8em !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0% 3% 0% 0% !important; width: 22.5% !important; height: auto !important; max-width: 100px !important; } .appreach__detail { display: inline-block; line-height: 1.5; width: 72%; } .appreach__detail:after { content: ""; display: block; clear: both; } .appreach__name { font-size: 15px !important; color: #323232 !important; line-height: 1.5em !important; font-weight: bold !important; max-height: 3em; overflow: hidden; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; } .appreach__detail .appreach__info .appreach__posted { line-height: 1.3em !important; font-size: .8em !important; } .appreach__info { font-size: 12px !important; color: #929292 !important; } .appreach__posted { font-size: .9em !important; } .appreach__developper, .appreach__price { margin-right: 0.5em; } .appreach__posted a { margin-left: 0.8em; color: #55A8DC !important; } .appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .appreach__aslink img { height: 40px; -webkit-backface-visibility: hidden; margin-right: 10px; } .appreach__gplink img { height: 40px; -webkit-backface-visibility: hidden; } @media(max-width:460px) { .appreach { overflow: hidden; max-width: 320px !important; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; font-size: .7em !important; } .appreach__posted { font-size: .7em !important; } .appreach__icon { width: 25% !important; } .appreach__info { font-size: 10px !important; } .appreach__links { margin: auto; margin-top: 5px; padding-top: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% !important; } .appreach__aslink img, .appreach__gplink img { margin-right: 2px; height: 40px; } }
アプリーチ + 影
SAMPLE
COLOR :
コードを表示
CSS
/* * Copyright (c) NomadWorks * Design: NomadCode * https://www.code.nomad.inc/ */ .appreach { text-align: left; box-shadow: 0px 0px 6px #00000029; background: #FFF; max-width: 100% !important; width: 100% !important; padding: 25px; margin: 20px auto; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } .appreach:after { content: ""; display: block; clear: both; } .appreach p { line-height: 1.8em !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; } .appreach a:after { display: none; } .appreach__icon { float: left; border-radius: 10%; overflow: hidden; margin: 0% 3% 0% 0% !important; width: 22.5% !important; height: auto !important; max-width: 100px !important; } .appreach__detail { display: inline-block; line-height: 1.5; width: 72%; } .appreach__detail:after { content: ""; display: block; clear: both; } .appreach__name { font-size: 15px !important; color: #323232 !important; line-height: 1.5em !important; font-weight: bold !important; max-height: 3em; overflow: hidden; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; } .appreach__detail .appreach__info .appreach__posted { line-height: 1.3em !important; font-size: .8em !important; } .appreach__info { font-size: 12px !important; color: #929292 !important; } .appreach__posted { font-size: .9em !important; } .appreach__developper, .appreach__price { margin-right: 0.5em; } .appreach__posted a { margin-left: 0.8em; color: #55A8DC !important; } .appreach__links { float: left; height: 40px; margin-top: 8px; white-space: nowrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .appreach__aslink img { height: 40px; -webkit-backface-visibility: hidden; margin-right: 10px; } .appreach__gplink img { height: 40px; -webkit-backface-visibility: hidden; } @media(max-width:460px) { .appreach { overflow: hidden; max-width: 320px !important; } .appreach__detail .appreach__name { line-height: 1.3em !important; padding-bottom: 5px !important; font-size: .7em !important; } .appreach__posted { font-size: .7em !important; } .appreach__icon { width: 25% !important; } .appreach__info { font-size: 10px !important; } .appreach__links { margin: auto; margin-top: 5px; padding-top: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% !important; } .appreach__aslink img, .appreach__gplink img { margin-right: 2px; height: 40px; } }