Line 113: | Line 113: | ||
} | } | ||
+ | |||
+ | |||
+ | .type-1 { | ||
+ | width: 33%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .btn-1 { | ||
+ | background-color: #F27935; | ||
+ | width: 30%; | ||
+ | left: 90%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .btn-1 .round { | ||
+ | background-color: #f59965; | ||
+ | left: 90%; | ||
+ | width: 30%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | .btn-2 { | ||
+ | background-color: #00AFD1; | ||
+ | left: 90%; | ||
+ | width: 30%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .btn-2 .round { | ||
+ | background-color: #00c4eb; | ||
+ | left: 90%; | ||
+ | width: 30%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .btn-3 { | ||
+ | background-color: #5A5B5E; | ||
+ | left: 90%; | ||
+ | width: 30%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .btn-3 .round { | ||
+ | background-color: #737478; | ||
+ | left: 90%; | ||
+ | width: 30%; | ||
+ | margin-bottom: 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .btn-1, .btn-2, .btn-3 { | ||
+ | text-decoration: none; | ||
+ | -moz-border-radius: 30px; | ||
+ | -webkit-border-radius: 30px; | ||
+ | border-radius: 30px; | ||
+ | padding: 12px 30px 12px 30px; | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | font-family: sans-serif; | ||
+ | font-weight: bold; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .btn-1, .btn-2, .btn-3 span { | ||
+ | position: relative; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | .txt { | ||
+ | font-size: 14px; | ||
+ | line-height: 1.45; | ||
+ | } | ||
+ | |||
Line 130: | Line 207: | ||
<div class='triangle bottom-right'></div> | <div class='triangle bottom-right'></div> | ||
<div class='triangle bottom-left'></div> | <div class='triangle bottom-left'></div> | ||
+ | |||
+ | <div class="type-1"> | ||
+ | <div> | ||
+ | <a href="#" class="btn btn-1"> | ||
+ | <span class="txt">May </span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-2"> | ||
+ | <span class="txt">June</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-3"> | ||
+ | <span class="txt">July</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-3"> | ||
+ | <span class="txt">August</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-3"> | ||
+ | <span class="txt">September</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-3"> | ||
+ | <span class="txt">October</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | <a href="" class="btn btn-3"> | ||
+ | <span class="txt">Protocols</span> | ||
+ | |||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 05:35, 18 October 2017