Contoh Company Profile Sederhana Bentuk Card untuk Blogspot

Daftar Isi

Membuat contoh company profile sederhana dalam bentuk card bisa didapat dalam banyak pelatihan maupun memperhatikan serta belajar dari banyak web tutorial program aplikasi.

Hasil belajarnya kemudian bisa diterapkan untuk mendesain website atau blog kamu, salah satu contoh hasil pembelajarannya pun bisa kamu kembangkan.

Baca Juga: loading

Contoh Company Profile Sederhana

Berikut ini Contoh Company Profile Sederhana hasil dari pemahaman dan edit desain dari situs www.gurudzgn.com

Source code: tag html dan CSS

	<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="#" class="cv-ui-usercard__avatar" alt="Avatar"/>
	<div class="cv-ui-usercard__header-info">
	<h3 class="cv-ui-usercard__name">Arrsi</h3>
	<span class="cv-ui-usercard__name-label">Kreatif Cilik</span>
	<span class="cv-ui-usercard__post">www.arrsialbariq.blogspot.com</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>
	<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">H. Arrsi Albariq</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">Bintaro-Jakarta 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">26 April</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">Rating</span>
	<span class="cv-ui-stats__value">Baru mulai</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:hadziqalbariq@gmail.com" class="cv-ui-stats__value">hadziqalbariq@gmail.com</a>
	</div>
	</div>
	<div class="cv-ui-stats cv-ui-usercard__stats-item">
	<svg viewBox="0 0 24 24">
	<path d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134" />
	</svg>
	<div class="cv-ui-stats__info cv-ui-usercard__stats-info">
	<span class="cv-ui-stats__name cv-ui-usercard__stats-name">Youtube</span>
	<a href="https://www.youtube.com/@ArrsiAlbariq" class="cv-ui-stats__value">@ArrsiAlbariq</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=6282112983769" class="cv-ui-stats__value">+62 @admin</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/arrsialbariq" class="cv-ui-stats__value">@ArrsiAlbariq</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://arrsialbariq.blogspot.com/p/contact-us.html" class="cv-ui-social cv-ui-usercard__social">Kontak</a> .</span>
	</footer>
	</div>
	</div>

view raw Profile Card hosted with ❤ by GitHub

Hasil Card Company Profile

Hasil Card Contoh Company Profile Sederhana ini bisa kamu save dan lihat demonya.

See the Pen Profile Card by Komptik (@komptik) on CodePen.