Banner style css based logo
Sun Feb 13 2022 06:24:54 GMT+0000 (Coordinated Universal Time)
Saved by @developerchef #html #css #javascript
<div class="snip1306"> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <h1>Woodstone</h1> <h5>Neque porro quisquam</h5> <h6>Est. 1958</h6> </div> <div class="snip1306"> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <h1>Vanguard</h1> <h5>Cras ornare tristique elit</h5> <h6>Est. 1965</h6> </div> <div class="snip1306"> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <h1>Spartacus</h1> <h5>At vero eos et accusamus</h5> <h6>Est. 1977</h6> </div> _______________________________- @import url(https://fonts.googleapis.com/css?family=Raleway:500); @import url(https://fonts.googleapis.com/css?family=Righteous); @import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css); .snip1306 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; color: #bdbdbd; margin: 40px 25px; max-width: 285px; width: 100%; text-align: center; font-size: 16px; -webkit-box-sizing: content-box; box-sizing: content-box; } .snip1306 h1, .snip1306 h5 { margin: 0; text-transform: uppercase; } .snip1306 h1 { font-family: 'Righteous', Arial, sans-serif; font-size: 1.8em; line-height: 50px; position: relative; background-color: #bdbdbd; color: #212121; text-align: center; margin: 0 30px 10px; } .snip1306 h1:before, .snip1306 h1:after { content: ''; position: absolute; width: 0; height: 0; top: -5px; border-width: 25px 10px; border-style: solid; } .snip1306 h1:before { left: -23px; border-color: #bdbdbd #bdbdbd #bdbdbd transparent; } .snip1306 h1:after { right: -23px; border-color: #bdbdbd transparent #bdbdbd #bdbdbd; } .snip1306 h5 { font-weight: 500; } .snip1306 h6 { margin: 0; display: inline-block; position: relative; } .snip1306 h6:before, .snip1306 h6:after { position: absolute; height: 1px; content: ''; background: #bdbdbd; width: 30px; top: 50%; } .snip1306 h6:before { left: -35px; } .snip1306 h6:after { right: -35px; } .snip1306 .diamond { width: 10px; height: 10px; margin: 15px 5px; display: inline-block; line-height: 80px; background: #bdbdbd; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .snip1306 .diamond:nth-of-type(2) { -webkit-transform: rotateZ(-45deg) scale(2) translate(2px, -2px); transform: rotateZ(-45deg) scale(2) translate(2px, -2px); } /* Demo purposes only */ body { background-color: #212121; }
Comments