Cara Buat Halaman Riwayat Hidup Gaya Slide
Setelah sebelumnya Admin telah membahas mengenai Cara Buat Halaman Profile Card Simpel kali ini Admin akan memberikan tutorial Cara Buat Halaman Riwayat Hidup Gaya Slide yang mana kali ini akan lebih keren lagi pastinya. Terutama bagi kalian yang suka dengan keindahan hehe. Sebelum melangkah lebih jauh alangkah baiknya sobat menjadi posisi yang nyaman supaya bisa menyimak dengan seksama tutorial yang akan Admin bagikan kali ini.
Cara Buat Halaman Riwayat Hidup Gaya Slide
- Silahkan sobat buka blogger sobat.
- Selanjutnya silahkan sobat bukaHalaman >> Halaman Baru.
- Lalu silahkan paste semua kode di bawah ini pada mode HTML.
- Silahkan ubah url gambar dengan url kalian masing-masing.
- Untuk isi biodata silahkan di sesuaikan sendiri.
- Untuk merubah warna background header nya silahkan cari kode ini .cv-ui-usercard__header{ kemudian ubah warna pada background-image:
- Untuk merubah warna background footer nya silahkan cari kode ini .cv-ui-usercard__footer{ kemudian ubah warna pada background-color:
- Untuk merubah warna icon silahkan cari kode ini fill: silahkan ganti warna dengan kebutuhan.
- Jika sudah silahkan Simpan Halaman yang sudah dibuat tadi.
- Selesai, untuk melihat hasilnya silahkan lihat dibawah ini.
HTML
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrORAIyV4CV1Jmqr0QU60fusTWQHRWzdsuhdxdtf3KI20R1ds6t4Nar-f75fvr1xzlRy_5m1DL93KL1zQ9p2CekgHjJiL9esyq-zN6JmEvDNb0L8NWLROjN0VOkgZZOTHNGYNnvVR-N-Fn/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>Note :
CSS
<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>Note :
Demo
Oke sobat itulah tutorialnya, mudah bukan?. Jadi itulah tutorial cara membuat halaman riwayat hidup gaya slide, semoga tutorial ini bermanfaat bagi sobat sekalian. Nah jika sobat memiliki pertanyaan mengenai artikel ini silahkan tinggalkan di kolom komentar. Oh ya untuk mendukung terus blog ini jangan lupa bantu share tutorial ini ke sobat yang lain, terimakasih dan sampai jumpa diartikel selanjutnya byebye.
image quote pre code