Cara membuat box wrapper dihalaman utama blog

By Aru 2/16/2021

Share Tweet Share Email

Cara membuat box wrapper dihalaman utama blog

 
Kode CSS :

/* CSS box wrapper */
.c,.d{fill:#f9f9fc}
.b{clip-path:url(#a)}
.d{opacity:.5;isolation:isolate}
.content-amp{max-width:1100px}
.content-amp,.out-amp{position:relative}
.c,.d{fill:#fff}
.button-home a span.bus svg,.button-home a span.but svg{width:22px;fill:#373837}svg{vertical-align:middle}
.button-home a span.bus{font-size:13px;font-weight:600;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;padding:8px 20px;text-transform:uppercase;display:inline-block;text-align:center;position:relative;margin:20px auto 0;overflow:hidden;background-color:rgba(0,0,0,0.05);color:#fff;border:2px solid #fff;}
.button-home a span.bus svg,.button-home a span.but svg{width:22px;fill:#373837}svg{vertical-align:middle}
.button-home a span.but{font-size:13px;font-weight:700;background-color:#fff;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;padding:9px 20px;display:inline-block;text-transform:uppercase;text-align:center;position:relative;margin:20px 10px auto 0;overflow:hidden;color:#fd6458;}
.button-wrapper span{font-size:40px;font-weight:700;padding:5px 0;position:relative;margin:0;color:#fff}
.box-wrapper svg.wave{position:absolute;bottom:-1px;left:0;overflow:hidden;vertical-align:middle}
.coll span.bg1{background-size:100%;display:block;background-repeat:no-repeat;height:100%;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4lGwIaopo_hJfrCRh6DZh4ON9yTqWjMZJEkpNVwtvDZTYO8kTGf1xxE1DRa1vIX4vMrUp2BcPBRUDhOE21RPiFRlw08IH2EBQsFsQwNd44msFFbsdEZLcNO0bVxuwdC12ySJBXYuZ-e8/s16000/blogging.png)}
.box-wrapper .coll{right:0;box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:35px 0;padding:0;z-index:10;width:500px;height:298px;position:absolute}.button-wrapper{display:block;margin:0;padding:10px 0}
.widget-wrap h2.heading-title{padding:0;color:rgba(255,255,255,.6);font-weight:400;z-index:1;font-size:20px;margin:0}
.widget-wrap{width:50%;float:left;margin:0;margin-top:5%;padding:0;position:relative;box-sizing:border-box;-webkit-box-sizing:border-box}
.content-amp{max-width:1100px}
.content-amp,.out-amp{position:relative}
.content-amp{margin:0 auto}
.box-wrapper{padding:1rem 0 5rem;position:relative;display:inline-block;background:#fd6458;background:linear-gradient(-50deg,#e74c3c,#e74c3c,#fd6458,#fd6458);background-size:cover;z-index:0;margin-top:-30px;margin-bottom:10px;width:100%}

Kode HTML :

<b:if cond='data:view.isHomepage'>  
<div class='box-wrapper'>
<div class='content-amp'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<h2 class='heading-title'>Hello, I&#39;m</h2>
<span>Asep Rukmana</span>
</div>
<h2 class='heading-title'>Visual System Designer</h2>
<div class='button-home'>
<a href='https://api.whatsapp.com/send?phone=6289502729200' target='_blank'><span class='but'>Learn More</span></a>
<a href='/p/contact.html' target='_blank'><span class='bus'>Contact</span></a></div>
</div>
<div class='coll'>
<span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if>