Ice Cream Mixue Boneka Raja Salju Merah dalam Tampilan CSS

agung wisudhatama November 13, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Ice Cream Mixue si Boneka Raja Salju dalam Tampilan CSS

MIXUE Siapa nih diantara kalian yang suka es krim? Tau nggak dengan Mixue. Ya, es krim berlogo Boneka Salju Merah ini disebut-sebut sebagai -- Sang Malaikat Penolong -- karena membeli ruko-ruko kosong untuk dibuat gerainya.

Hampir di berbagai tempat, dapat dipastikan Gerai Mixue berdiri. Dengan khas warna merah, gerai es krim ini menjual aneka rasa varian diantaranya :

1. Chocolate Cookies Smoothies dengan Ice Cream
2. Creamy Mango Boba
3. Oreo Sundae
4. Mango Smoothies dengan Ice Cream
5. Sundae
6. Strawberry Ice cream
7. Kiwi Smoothies
8. Strawberry Mi-shake

Ini dia videonya di Tiktok.

@mixue.vermillion Ada yang gemes gak sama maskot mixue ? 😁 #mixuemascot #mixuevermillion #mixueindonesia #mascotmixue ♬ Dj Orang Ntt - Bryan Rifaldi

Brand Mixue ini didirikan oleh seorang mahasiswa di China bernama Zhang Hongchao. Mixue didirikan setelah Zhang bekerja part-time di salah satu gerai es serut di Henan, China. Uniknya modal awal dari Mixue hanya 4000 yuan atau sekitar Rp 8 juta kalau dirupiahkan yang diberikan oleh neneknya.

Baca Juga :

Awal Mixue
Mixue atau (Hanzi: 蜜雪冰城; Pinyin: Mìxuě Bīngchéng) dalam tulisan China. Adalah Zhang sang pelopor es krim fenomenal ini. Awal mula dari sebuah es serut, hingga teh kemudian bertambah minuman teh susu mutiara. Gerai pertama sempat bangkrut, tapi Zhang memformulasikan kembali resep Mixue dan kembali melanjutkan bisnisnya hingga besar sampai saat ini.

Berawal dari Es Serut
Awalnya, Mixue merupakan es serut. Bahkan, dengan modal terbatas kala itu, ia harus menggunakan barang-barang pribadi miliknya seperti motor, turntable, dan mesin pengiris yang ia buat menjadi mesin serut keliling.

Setelah merasa usahanya terus berkembang dengan baik, pada 2010 Zhang memutuskan untuk bekerja sama dengan Zhengzhou Baodao Trading Co., Ltd. untuk memperluas operasi waralaba di seluruh negeri China. Dan kemudian meluas ke Dunia.

Kunci sukses Mixue
Harga Murah
Mixue mampu menekan biaya produksi yang relatif rendah karena membangun rantai pasokan sendiri. Mixue juga mengelola sendiri proses produksi, mulai bahan baku, pergudangan, hingga logistik. Cara ini, pada akhirnya dapat memotong perantara pihak ketiga dan terbukti efektif menjaga biayanya logistik sangat rendah.

Rasa yang Enak
Soal rasa dan varian dari Mixue sudah tidak diragukan lagi. Dari uraian diatas, varian rasa yang begitu banyak dan menjadi favorit warga Indo menjadi salah satu kunci dimana Mixue menekan biaya promosi karena masyarakat akan penasaran dan berusaha mencoba sendiri es krim Mixue.

Maskot Snow King
Guna mempopulerkan agar lebih terkenal, Mixue mempergunakan maskotnya berupa -- Boneka Salju -- warna merah yang dijuluki The Snow King. Dari maskot itulah Mixue menjadi semakin terkenal dan gerai waralabanya ada dimana-mana.

Mixue dalam CSS
Sekarang, hari ini kita mulai membuat Mixue, dalam hal ini es krim ya. Es krim Scopp dengan CSS. Masih sama ya teman-teman dengan artikel yang telah saya tulis di artikel Gwenchana dan artikel Becyandya. Tapi yang Mixue adalah es krim, tidak berbeda jauh dari tutorialnya yang sudah sudah sih. Dikombinasi saja kok.

Ini dia tutorialnya. Saya sempatkan di hari ini ya :

Caranya sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut

body {
  padding: 0;
  margin: 0;
  background-color: #dcacfe;
}
.wrapper {
  width: 350px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.container {
  width: 100%;
  height: 350px;
  position: relative;
}
.bowl {
  width: 230px;
  height: 90px;
  background-color: #d9f0fe;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 90px;
  border-radius: 0 0 150px 150px;
}
.bowl:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 110%;
  background-color: #afddfa;
  left: -5%;
  border-radius: 20px;
}
.base {
  height: 40px;
  width: 20px;
  background-color: #afddfa;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 90px;
}
.base:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 120px;
  background-color: #d9f0fe;
  left: -50px;
  top: 30px;
  border-radius: 50px 50px 0 0;
}
.scoop1 {
  height: 130px;
  width: 130px;
  background-color: #f45c96;
  border-radius: 50%;
  position: absolute;
  background-size: 40px 150px;
  background-image: radial-gradient(
    circle at 20px 12px,
    #f8bd3d 25px,
    transparent 25px
  );
  top: 20px;
  left: 108px;
}
.scoop2 {
  height: 130px;
  width: 130px;
  background-color: #badc58;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  right: 70px;
}
.scoop3 {
  height: 130px;
  width: 130px;
  background-color: #f58619;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 70px;
  background-size: 25px 80px;
  background-image: radial-gradient(
    circle at 12.5px 17px,
    #5c0003 20px,
    transparent 21px
  );
}
.btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 2px dashed #404080;
}
.btns button {
  width: 150px;
  padding: 12px 0;
  border-radius: 20px;
  margin-top: 20px;
  border: none;
  outline: none;
  background-color: #c174f8;
  color: #ffffff;
  cursor: pointer;
}

6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu

<div class="wrapper">
  <div class="container">
        <div class="scoop1"></div>
        <div class="scoop2"></div>
        <div class="scoop3"></div>
        <div class="bowl">
        <div class="base"></div>
   </div>
   </div>
   <div class="btns">
        <button id="btn-scoop1">Scoop 1</button>
        <button id="btn-scoop2">Scoop 2</button>
        <button id="btn-scoop3">Scoop 3</button>
        <button id="btn-topping1">Topping 1</button>
        <button id="btn-topping2">Topping 2</button>
  </div>
</div>

10. Terakhir kalian harus menambahkan JS dibawah ini tepat diatas kode </body>. Letak kode </body> adalah di template blog kalian ya teman-teman.

<script type='text/javascript'> 
//<![CDATA[ 
let scoop1 = document.querySelector(".scoop1");
let scoop2 = document.querySelector(".scoop2");
let scoop3 = document.querySelector(".scoop3");
let btnScoop1 = document.getElementById("btn-scoop1");
let btnScoop2 = document.getElementById("btn-scoop2");
let btnScoop3 = document.getElementById("btn-scoop3");
let btnTopping1 = document.getElementById("btn-topping1");
let btnTopping2 = document.getElementById("btn-topping2");
let colors = ["#f45c96", "#f8bd3d", "#badc58", "#5c0003", "#f58619", "#ebab70"];
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;
let counter4 = 0;
let counter5 = 0;
function setCounterValue(counter) {
  return counter < colors.length - 1 ? counter + 1 : 0;
}
btnScoop1.addEventListener("click", () => {
  scoop1.style.backgroundColor = colors[counter1];
  counter1 = setCounterValue(counter1);
});
btnScoop2.addEventListener("click", () => {
  scoop2.style.backgroundColor = colors[counter2];
  counter2 = setCounterValue(counter2);
});
btnScoop3.addEventListener("click", () => {
  scoop3.style.backgroundColor = colors[counter3];
  counter3 = setCounterValue(counter3);
});
btnTopping1.addEventListener("click", () => {
  scoop1.style.backgroundImage = `radial-gradient(circle at 20px 18px, ${colors[counter4]} 25px, transparent 25px)`;
  counter4 = setCounterValue(counter4);
});
btnTopping2.addEventListener("click", () => {
  scoop3.style.backgroundImage = `radial-gradient(circle at 12.5px 17px, ${colors[counter5]} 20px, transparent 21px)`;
  counter5 = setCounterValue(counter5);
});
//]]> 
</script>

MIXUE

Ada yang menarik dari Mixue. Dari situ kita dapat pelajaran bahwa uang bukan segalanya dalam memulai segala bisnis. Terbukti hanya dengan modal seadanya, Zhang mampu membawa nama Mixue mendunia. Apakah kita bisa? Bisa. Dengan ketekunan dan kreativitas, semua tidak ada yang tidak mungkin.

Proses jatuh bangun dan bangkrut itu adalah hal biasa. Dari hal itulah, mental seorang pebisnis akan terbentuk. Dikala rugi, maka semangat untuk bangun begitu tinggi. Dikala untung, semangat pun akan tetap mendampingi niat yang tinggi pula.

Renungan buat kita. Tidak ada hal yang instant, semua melalui proses. Setiap orang akan melalui jalan ujiannya masing-masing. Dan hasilnya akan terliat dari seberapa besar perjuangan dan doa dari tiap-tiap manusianya. Kita hanya berusaha, dan pertolongan Tuhanlah yang utama.

Doa dan Ikhtiar adalah dua jalan yang saling beriringan. Selamat sore. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Ice Cream Mixue Boneka Raja Salju Merah dalam Tampilan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.