<div class="container-cv-ui">
<div class="cv-ui-usercard">
<div class="cv-ui-usercard__body">
<header class="cv-ui-usercard__header">
<span class="border-avatar"></span>
<img src="https://1.bp.blogspot.com/-f-V1k0CA338/X83Fkr3fwOI/AAAAAAAABwU/c7qpdE_fgRkCRfRGGwOxpN4gY3wCGJgYgCK4BGAYYCw/s113/IMG_7976.png" class="cv-ui-usercard__avatar" alt="Avatar"/>
<div class="cv-ui-usercard__header-info">
<h3 class="cv-ui-usercard__name">Suprianto SA</h3>
<span class="cv-ui-usercard__name-label">Blogger & Freelancer</span>
<span class="cv-ui-usercard__post">Payubaco.my.id</span>
</div>
</header>
<div class="cv-ui-usercard__content">
<div class="cv-ui-slider">
<!-- control elements of slider -->
<input id="slide1" type="radio" class="cv-ui-slider__switch cv-ui-usercard__switch" name="slider-controls" checked autofocus>
<label for="slide1" class="cv-ui-slider__control cv-ui-usercard__control"></label>
<input id="slide2" type="radio" class="cv-ui-slider__switch cv-ui-usercard__switch" name="slider-controls">
<label for="slide2" class="cv-ui-slider__control cv-ui-usercard__control"></label>
<input id="slide3" type="radio" class="cv-ui-slider__switch cv-ui-usercard__switch" name="slider-controls">
<label for="slide3" class="cv-ui-slider__control cv-ui-usercard__control"></label>
<input id="slide4" type="radio" class="cv-ui-slider__switch cv-ui-usercard__switch" name="slider-controls">
<label for="slide4" class="cv-ui-slider__control cv-ui-usercard__control"></label>
<input id="slide5" type="radio" class="cv-ui-slider__switch cv-ui-usercard__switch" name="slider-controls">
<label for="slide5" class="cv-ui-slider__control cv-ui-usercard__control"></label>
<div class="cv-ui-slider__slides">
<!-- Tentang Penulis -->
<div class="cv-ui-slider__slide">
<div class="cv-ui-usercard__title"><h4>Tentang Penulis</h4></div>
<div class="cv-ui-usercard__stats">
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M22,3H2C0.91,3.04 0.04,3.91 0,5V19C0.04,20.09 0.91,20.96 2,21H22C23.09,20.96 23.96,20.09 24,19V5C23.96,3.91 23.09,3.04 22,3M22,19H2V5H22V19M14,17V15.75C14,14.09 10.66,13.25 9,13.25C7.34,13.25 4,14.09 4,15.75V17H14M9,7A2.5,2.5 0 0,0 6.5,9.5A2.5,2.5 0 0,0 9,12A2.5,2.5 0 0,0 11.5,9.5A2.5,2.5 0 0,0 9,7M14,7V8H20V7H14M14,9V10H20V9H14M14,11V12H18V11H14" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Nama</span>
<span class="cv-ui-stats__value">Suprianto SA</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M13.5,18H4V12H14.3C15.3,10.8 16.8,10 18.5,10C19.8,10 21,10.5 22,11.3V6A2,2 0 0,0 20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H14.6C14.2,19.4 13.8,18.7 13.5,18M4,6H20V8H4V6M18.5,12C16.6,12 15,13.6 15,15.5C15,18.1 18.5,22 18.5,22C18.5,22 22,18.1 22,15.5C22,13.6 20.4,12 18.5,12M18.5,16.8C17.8,16.8 17.3,16.2 17.3,15.6C17.3,14.9 17.9,14.4 18.5,14.4C19.1,14.4 19.7,15 19.7,15.6C19.8,16.2 19.2,16.8 18.5,16.8Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Alamat</span>
<span class="cv-ui-stats__value">Palembang-Sumatera Selatan</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M16,14H17.5V16.82L19.94,18.23L19.19,19.53L16,17.69V14M24,17A7,7 0 0,1 17,24C14.21,24 11.8,22.36 10.67,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H20A2,2 0 0,1 22,6V12.1C23.24,13.36 24,15.09 24,17M10,17C10,15.04 10.81,13.27 12.1,12H4V18H10.07C10,17.67 10,17.34 10,17M17,12A5,5 0 0,0 12,17A5,5 0 0,0 17,22A5,5 0 0,0 22,17A5,5 0 0,0 17,12M20,8V6H4V8H20Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Tanggal Lahir</span>
<span class="cv-ui-stats__value">27 April 1999</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M13,9.94L14.06,11L15.12,9.94L16.18,11L17.24,9.94L15.12,7.82L13,9.94M8.88,9.94L9.94,11L11,9.94L8.88,7.82L6.76,9.94L7.82,11L8.88,9.94M12,17.5C14.33,17.5 16.31,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Hubungan</span>
<span class="cv-ui-stats__value">Rumit</span>
</div>
</div>
</div>
</div>
<!-- Riwayat Pendidikan -->
<div class="cv-ui-slider__slide">
<div class="cv-ui-usercard__title"><h4>Riwayat Pendidikan</h4></div>
<div class="cv-ui-usercard__stats">
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">S1</span>
<span class="cv-ui-stats__value">Lulus 2021(Bismillah)</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">SMA</span>
<span class="cv-ui-stats__value">Lulus 2017</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">SMA</span>
<span class="cv-ui-stats__value">Lulus 2014</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">SD</span>
<span class="cv-ui-stats__value">Lulus 2011</span>
</div>
</div>
</div>
</div>
<!-- Pengalaman -->
<div class="cv-ui-slider__slide">
<div class="cv-ui-usercard__title"><h4>Pengalaman</h4></div>
<div class="cv-ui-usercard__stats">
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12.75,3.94C13.75,3.22 14.91,2.86 16.22,2.86C16.94,2.86 17.73,3.05 18.59,3.45C19.45,3.84 20.13,4.3 20.63,4.83C21.66,6.11 22.09,7.6 21.94,9.3C21.78,11 21.22,12.33 20.25,13.27L12.66,20.86C12.47,21.05 12.23,21.14 11.95,21.14C11.67,21.14 11.44,21.05 11.25,20.86C11.06,20.67 10.97,20.44 10.97,20.16C10.97,19.88 11.06,19.64 11.25,19.45L15.84,14.86C16.09,14.64 16.09,14.41 15.84,14.16C15.59,13.91 15.36,13.91 15.14,14.16L10.55,18.75C10.36,18.94 10.13,19.03 9.84,19.03C9.56,19.03 9.33,18.94 9.14,18.75C8.95,18.56 8.86,18.33 8.86,18.05C8.86,17.77 8.95,17.53 9.14,17.34L13.73,12.75C14,12.5 14,12.25 13.73,12C13.5,11.75 13.28,11.75 13.03,12L8.44,16.64C8.25,16.83 8,16.92 7.73,16.92C7.45,16.92 7.21,16.83 7,16.64C6.8,16.45 6.7,16.22 6.7,15.94C6.7,15.66 6.81,15.41 7.03,15.19L11.63,10.59C11.88,10.34 11.88,10.11 11.63,9.89C11.38,9.67 11.14,9.67 10.92,9.89L6.28,14.5C6.06,14.7 5.83,14.81 5.58,14.81C5.3,14.81 5.06,14.71 4.88,14.5C4.69,14.3 4.59,14.06 4.59,13.78C4.59,13.5 4.69,13.27 4.88,13.08C7.94,10 9.83,8.14 10.55,7.45L14.11,10.97C14.5,11.34 14.95,11.53 15.5,11.53C16.2,11.53 16.75,11.25 17.16,10.69C17.44,10.28 17.54,9.83 17.46,9.33C17.38,8.83 17.17,8.41 16.83,8.06L12.75,3.94M14.81,10.27L10.55,6L3.47,13.08C2.63,12.23 2.15,10.93 2.04,9.16C1.93,7.4 2.41,5.87 3.47,4.59C4.66,3.41 6.08,2.81 7.73,2.81C9.39,2.81 10.8,3.41 11.95,4.59L16.22,8.86C16.41,9.05 16.5,9.28 16.5,9.56C16.5,9.84 16.41,10.08 16.22,10.27C16.03,10.45 15.8,10.55 15.5,10.55C15.23,10.55 15,10.45 14.81,10.27V10.27Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Ketua Rohis</span>
<span class="cv-ui-stats__value">2015-2016</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12.75,3.94C13.75,3.22 14.91,2.86 16.22,2.86C16.94,2.86 17.73,3.05 18.59,3.45C19.45,3.84 20.13,4.3 20.63,4.83C21.66,6.11 22.09,7.6 21.94,9.3C21.78,11 21.22,12.33 20.25,13.27L12.66,20.86C12.47,21.05 12.23,21.14 11.95,21.14C11.67,21.14 11.44,21.05 11.25,20.86C11.06,20.67 10.97,20.44 10.97,20.16C10.97,19.88 11.06,19.64 11.25,19.45L15.84,14.86C16.09,14.64 16.09,14.41 15.84,14.16C15.59,13.91 15.36,13.91 15.14,14.16L10.55,18.75C10.36,18.94 10.13,19.03 9.84,19.03C9.56,19.03 9.33,18.94 9.14,18.75C8.95,18.56 8.86,18.33 8.86,18.05C8.86,17.77 8.95,17.53 9.14,17.34L13.73,12.75C14,12.5 14,12.25 13.73,12C13.5,11.75 13.28,11.75 13.03,12L8.44,16.64C8.25,16.83 8,16.92 7.73,16.92C7.45,16.92 7.21,16.83 7,16.64C6.8,16.45 6.7,16.22 6.7,15.94C6.7,15.66 6.81,15.41 7.03,15.19L11.63,10.59C11.88,10.34 11.88,10.11 11.63,9.89C11.38,9.67 11.14,9.67 10.92,9.89L6.28,14.5C6.06,14.7 5.83,14.81 5.58,14.81C5.3,14.81 5.06,14.71 4.88,14.5C4.69,14.3 4.59,14.06 4.59,13.78C4.59,13.5 4.69,13.27 4.88,13.08C7.94,10 9.83,8.14 10.55,7.45L14.11,10.97C14.5,11.34 14.95,11.53 15.5,11.53C16.2,11.53 16.75,11.25 17.16,10.69C17.44,10.28 17.54,9.83 17.46,9.33C17.38,8.83 17.17,8.41 16.83,8.06L12.75,3.94M14.81,10.27L10.55,6L3.47,13.08C2.63,12.23 2.15,10.93 2.04,9.16C1.93,7.4 2.41,5.87 3.47,4.59C4.66,3.41 6.08,2.81 7.73,2.81C9.39,2.81 10.8,3.41 11.95,4.59L16.22,8.86C16.41,9.05 16.5,9.28 16.5,9.56C16.5,9.84 16.41,10.08 16.22,10.27C16.03,10.45 15.8,10.55 15.5,10.55C15.23,10.55 15,10.45 14.81,10.27V10.27Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Kadept Syiar LDF</span>
<span class="cv-ui-stats__value">2018-2019</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12.75,3.94C13.75,3.22 14.91,2.86 16.22,2.86C16.94,2.86 17.73,3.05 18.59,3.45C19.45,3.84 20.13,4.3 20.63,4.83C21.66,6.11 22.09,7.6 21.94,9.3C21.78,11 21.22,12.33 20.25,13.27L12.66,20.86C12.47,21.05 12.23,21.14 11.95,21.14C11.67,21.14 11.44,21.05 11.25,20.86C11.06,20.67 10.97,20.44 10.97,20.16C10.97,19.88 11.06,19.64 11.25,19.45L15.84,14.86C16.09,14.64 16.09,14.41 15.84,14.16C15.59,13.91 15.36,13.91 15.14,14.16L10.55,18.75C10.36,18.94 10.13,19.03 9.84,19.03C9.56,19.03 9.33,18.94 9.14,18.75C8.95,18.56 8.86,18.33 8.86,18.05C8.86,17.77 8.95,17.53 9.14,17.34L13.73,12.75C14,12.5 14,12.25 13.73,12C13.5,11.75 13.28,11.75 13.03,12L8.44,16.64C8.25,16.83 8,16.92 7.73,16.92C7.45,16.92 7.21,16.83 7,16.64C6.8,16.45 6.7,16.22 6.7,15.94C6.7,15.66 6.81,15.41 7.03,15.19L11.63,10.59C11.88,10.34 11.88,10.11 11.63,9.89C11.38,9.67 11.14,9.67 10.92,9.89L6.28,14.5C6.06,14.7 5.83,14.81 5.58,14.81C5.3,14.81 5.06,14.71 4.88,14.5C4.69,14.3 4.59,14.06 4.59,13.78C4.59,13.5 4.69,13.27 4.88,13.08C7.94,10 9.83,8.14 10.55,7.45L14.11,10.97C14.5,11.34 14.95,11.53 15.5,11.53C16.2,11.53 16.75,11.25 17.16,10.69C17.44,10.28 17.54,9.83 17.46,9.33C17.38,8.83 17.17,8.41 16.83,8.06L12.75,3.94M14.81,10.27L10.55,6L3.47,13.08C2.63,12.23 2.15,10.93 2.04,9.16C1.93,7.4 2.41,5.87 3.47,4.59C4.66,3.41 6.08,2.81 7.73,2.81C9.39,2.81 10.8,3.41 11.95,4.59L16.22,8.86C16.41,9.05 16.5,9.28 16.5,9.56C16.5,9.84 16.41,10.08 16.22,10.27C16.03,10.45 15.8,10.55 15.5,10.55C15.23,10.55 15,10.45 14.81,10.27V10.27Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Wakil GubMa</span>
<span class="cv-ui-stats__value">2019-2020</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12.75,3.94C13.75,3.22 14.91,2.86 16.22,2.86C16.94,2.86 17.73,3.05 18.59,3.45C19.45,3.84 20.13,4.3 20.63,4.83C21.66,6.11 22.09,7.6 21.94,9.3C21.78,11 21.22,12.33 20.25,13.27L12.66,20.86C12.47,21.05 12.23,21.14 11.95,21.14C11.67,21.14 11.44,21.05 11.25,20.86C11.06,20.67 10.97,20.44 10.97,20.16C10.97,19.88 11.06,19.64 11.25,19.45L15.84,14.86C16.09,14.64 16.09,14.41 15.84,14.16C15.59,13.91 15.36,13.91 15.14,14.16L10.55,18.75C10.36,18.94 10.13,19.03 9.84,19.03C9.56,19.03 9.33,18.94 9.14,18.75C8.95,18.56 8.86,18.33 8.86,18.05C8.86,17.77 8.95,17.53 9.14,17.34L13.73,12.75C14,12.5 14,12.25 13.73,12C13.5,11.75 13.28,11.75 13.03,12L8.44,16.64C8.25,16.83 8,16.92 7.73,16.92C7.45,16.92 7.21,16.83 7,16.64C6.8,16.45 6.7,16.22 6.7,15.94C6.7,15.66 6.81,15.41 7.03,15.19L11.63,10.59C11.88,10.34 11.88,10.11 11.63,9.89C11.38,9.67 11.14,9.67 10.92,9.89L6.28,14.5C6.06,14.7 5.83,14.81 5.58,14.81C5.3,14.81 5.06,14.71 4.88,14.5C4.69,14.3 4.59,14.06 4.59,13.78C4.59,13.5 4.69,13.27 4.88,13.08C7.94,10 9.83,8.14 10.55,7.45L14.11,10.97C14.5,11.34 14.95,11.53 15.5,11.53C16.2,11.53 16.75,11.25 17.16,10.69C17.44,10.28 17.54,9.83 17.46,9.33C17.38,8.83 17.17,8.41 16.83,8.06L12.75,3.94M14.81,10.27L10.55,6L3.47,13.08C2.63,12.23 2.15,10.93 2.04,9.16C1.93,7.4 2.41,5.87 3.47,4.59C4.66,3.41 6.08,2.81 7.73,2.81C9.39,2.81 10.8,3.41 11.95,4.59L16.22,8.86C16.41,9.05 16.5,9.28 16.5,9.56C16.5,9.84 16.41,10.08 16.22,10.27C16.03,10.45 15.8,10.55 15.5,10.55C15.23,10.55 15,10.45 14.81,10.27V10.27Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Blogger</span>
<span class="cv-ui-stats__value">Sekarang</span>
</div>
</div>
</div>
</div>
<!-- Kemampuan -->
<div class="cv-ui-slider__slide">
<div class="cv-ui-usercard__title"><h4>Kemampuan</h4></div>
<div class="cv-ui-usercard__stats">
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">HTML</span>
<span class="cv-ui-stats__value">-</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">CSS</span>
<span class="cv-ui-stats__value">-</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Java Script</span>
<span class="cv-ui-stats__value">-</span>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">UI/UX</span>
<span class="cv-ui-stats__value">-</span>
</div>
</div>
</div>
</div>
<!-- Hubungi Kami -->
<div class="cv-ui-slider__slide">
<div class="cv-ui-usercard__title"><h4>Hubungi Kami</h4></div>
<div class="cv-ui-usercard__stats">
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M18.84,7H16.22L10.5,4L4,7.41V17A2,2 0 0,1 2,15V7.17C2,6.5 2.28,6.06 2.81,5.81L10.5,2L18.05,5.81C18.5,6.09 18.78,6.5 18.84,7M7,8H20A2,2 0 0,1 22,10V19A2,2 0 0,1 20,21H7A2,2 0 0,1 5,19V10A2,2 0 0,1 7,8M20,11.67V10L13.5,13.31L7,10V11.67L13.5,15L20,11.67Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">E-mail</span>
<a href="mailto:Mysupriantosa@gmail.com" class="cv-ui-stats__value">Mysupriantosa@gmail.com</a>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Twitter</span>
<a href="https://twitter.com/payubaco" class="cv-ui-stats__value">@payubaco</a>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">WhatsApp</span>
<a href="https://api.whatsapp.com/send?phone=6282186969076&text=Admin%20Payubaco%20saya%20ingin%20bertanya!" class="cv-ui-stats__value">+62 821 8696 9076</a>
</div>
</div>
<div class="cv-ui-stats cv-ui-usercard__stats-item">
<svg viewBox="0 0 24 24">
<path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</svg>
<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Instagram</span>
<a href="https://www.instagram.com/supriantosa" class="cv-ui-stats__value">@supriantosa</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="cv-ui-usercard__footer">
<span class="cv-ui-social__name">Informasi lebih lanjut hubungi kami via <a href="https://api.whatsapp.com/send?phone=6282307563112&text=Guru%20Design%20saya%20ingin%20bertanya!" class="cv-ui-social cv-ui-usercard__social">WhatsApp</a> .</span>
</footer>
</div>
</div><style type="text/css">
/*Created By www.gurudzgn.com*/.cv-ui-usercard{box-sizing:border-box;display:flex;flex-direction:column;background-image:linear-gradient(39deg,#FFF 44%,#E8ECF0 0%);margin:2rem auto 1rem;position:relative;z-index:5;box-shadow:5px 5px 10px rgba(0,0,0,0.5);border-radius:20px}.cv-ui-usercard:hover{box-shadow:2px 2px 5px rgba(0,0,0,0.5)}@media screen and (min-width:641px){.cv-ui-usercard{width:38rem}}@media screen and (max-width:640px){.cv-ui-usercard{width:90%}}.cv-ui-usercard__body{padding-bottom:2rem;flex-grow:2;color:#000}.cv-ui-usercard__header{padding:3rem 5% 2rem;display:flex;align-items:center;background-image:linear-gradient(to bottom,#bf1f1f,#ff4242);color:#fff;border-radius:20px 20px 0 0}.cv-ui-usercard__avatar{background-image:linear-gradient(39deg,#FFF 50%,#E8ECF0 0%);border-radius:50%;border:none;box-sizing:border-box;margin-right:4%;width:10rem;height:10rem;-webkit-transition:all 1.5s ease-in-out;transition:all 1.5s ease-in-out;z-index:99;box-shadow:2px 6px 10px rgba(0,0,0,0.5)}.border-avatar{position:absolute;border-radius:50%;border:4px groove #fff;box-sizing:border-box;margin-right:4%;width:10rem;height:10rem;-webkit-transition:all 1.5s ease-in-out;transition:all 1.5s ease-in-out;z-index:100;cursor:pointer}.border-avatar:hover{-webkit-transform:rotate(-540deg);transform:rotate(-540deg)}.cv-ui-usercard__name{font-size:18px;font-weight:300;margin-top:0;margin-bottom:0}.cv-ui-usercard__name-label{font-weight:700;font-size:20px;font-weight:300;margin-top:0;margin-bottom:0}.cv-ui-usercard__post{display:block}.cv-ui-usercard__title{padding:0 5% 1.5rem;margin-top:-70px;margin-bottom:40px;color:#bf1f1f;background-color:#ff4242}.cv-ui-usercard__title h4{padding:3px 10px 2px;font-weight:300;font-size:16px;background:#fff;display:inline-block;border-radius:50px;top:47px;position:relative;border:4px solid #ff4242;text-transform:capitalize}.cv-ui-stats{box-sizing:border-box;font-size:1.4rem}.cv-ui-stats__name,.cv-ui-stats__value{display:block;word-break:break-all}.cv-ui-stats__value{text-decoration:none;color:#000!important;margin-top:.2em}.cv-ui-usercard__stats{padding-right:4%;padding-left:4%;text-align:center;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.cv-ui-usercard__stats-item{width:48%;margin-top:3rem}.cv-ui-usercard__stats-item:first-child,.cv-ui-usercard__stats-item:nth-child(2){margin-top:0}.cv-ui-usercard__social:last-child{margin-right:0}.cv-ui-usercard__stats-info{margin-top:.7rem}.cv-ui-usercard__stats-name{font-weight:700;font-size:1.6rem}.cv-ui-usercard__footer{padding:1.5rem 4%;text-align:center;background-color:#bf1f1f;color:#fff;border-radius:0 0 20px 20px}.cv-ui-icon{width:2em;height:2em;display:inline-block;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}.cv-ui-social{display:inline-block;vertical-align:middle;position:relative;overflow:hidden}.cv-ui-social__name{position:relative;font-size:12px}.cv-ui-usercard__social{font-size:1rem;padding:2px 4px;background:#2cd46b;border-radius:50px}.cv-ui-slider{position:relative;overflow:hidden;box-sizing:border-box;height:32rem}.cv-ui-slider__slides{height:100%;transform:translate3d(0,0,0);transition:transform .4s}.cv-ui-slider__slide{position:absolute;width:100%;height:100%;top:0}.cv-ui-slider__slide:nth-of-type(1){left:0}.cv-ui-slider__slide:nth-of-type(2){left:100%}.cv-ui-slider__slide:nth-of-type(3){left:200%}.cv-ui-slider__slide:nth-of-type(4){left:300%}.cv-ui-slider__slide:nth-of-type(5){left:400%}.cv-ui-slider__control{width:1.2rem;height:1.2rem;display:block;border-radius:50%;cursor:pointer;text-indent:-9999px;position:absolute;z-index:3}.cv-ui-usercard__switch{position:absolute;top:0;left:-9999px}.cv-ui-slider__switch:nth-of-type(1):checked ~ .cv-ui-slider__slides{transform:translate3d(0%,0,0)}.cv-ui-slider__switch:nth-of-type(2):checked ~ .cv-ui-slider__slides{transform:translate3d(-100%,0,0)}.cv-ui-slider__switch:nth-of-type(3):checked ~ .cv-ui-slider__slides{transform:translate3d(-200%,0,0)}.cv-ui-slider__switch:nth-of-type(4):checked ~ .cv-ui-slider__slides{transform:translate3d(-300%,0,0)}.cv-ui-slider__switch:nth-of-type(5):checked ~ .cv-ui-slider__slides{transform:translate3d(-400%,0,0)}.cv-ui-usercard__switch:checked + .cv-ui-slider__control:before{transform:scale(0.7) translateZ(0)}.cv-ui-usercard__control{border:3px solid #bf1f1f;overflow:hidden;position:absolute;margin-left:-.75rem;bottom:1rem;z-index:2;display:flex;justify-content:center;align-items:center;transform:translateZ(0)}.cv-ui-usercard__control:before{content:"";display:block;width:100%;height:100%;border-radius:50%;transform:scale(0) translateZ(0);background-color:#bf1f1f;transition:transform .2s ease-out}.cv-ui-usercard__control:nth-of-type(1){left:30%}.cv-ui-usercard__control:nth-of-type(2){left:40%}.cv-ui-usercard__control:nth-of-type(3){left:50%}.cv-ui-usercard__control:nth-of-type(4){left:60%}.cv-ui-usercard__control:nth-of-type(5){left:70%}@media screen and (min-width:981px){html{font-size:62.5%}}@media screen and (min-width:641px) and (max-width:980px){html{font-size:9px}}@media screen and (max-width:640px){html{font-size:8px}}.container-cv-ui{font-family:"Roboto","Arial",sans-serif;font-size:14px;color:#fff;margin:0}a{color:inherit;text-decoration:none}.footer{text-align:center;padding-top:1.5rem;padding-bottom:1.5rem;position:relative;z-index:5}@media screen and (max-width:640px){.footer{font-size:1.4rem}}svg{width:24px;height:24px}svg path{fill:#bf1f1f}.cv-ui-usercard__footer svg path{fill:##bf1f1f}
</style>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.