Web Company Profile – Citra Air Nusantara (CAN)

Membuat Card Section Rekomendasi Pada Web Company Profile Dengan Bootstrap 5 #5

admin — Thu, 20 Jan 2022 01:26:24 +0000

Selanjutnya kita akan membuat bagian rekomendasi rumah, seperti biasa kita siapkan dulu kerangnkanya sebagai berikut :

      
      
        
          
            
              Rekomendasi Ruah Impian

Kemudia kita membuat row baru untuk menyimpan card yang ada pada desain, seperti berikut :

Kemudian masukan data dibawah didalam row

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah
                    
                  
                
              

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah
                    
                  
                
              

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah
                    
                  
                
              

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah
                    
                  
                
              

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah
                    
                  
                
              

              
                
                  
                  
                    IDR. 200.000.000
                    Baturaja Timu Kab. OKU 
 Sewa
                    
                  
  
                  
                    
                       3
                      Kamar Tidur 
                                         
                    
                       3
                      Kamar Mandi
                    
                    
                       100m
                      Luas Tanah

Kemudian tambahkan file css berikut :

/* REKOMENDASI */
#rekomendasi h2 {
  margin-top: 100px;
}

.card {
  height: 100%;
  border: none;
}

.card-body h4 {
  color: #000;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.6rem;
}

.card-body p {
  color: #000;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.6rem;
  margin-bottom: 80px;
}

.card:hover {
  background: linear-gradient(149.69deg, #3a61a0 36.55%, #000000 92.83%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.card:hover .card-body h4 {
  color: #fff;
  transition: all ease-in-out 0.3s;
}

.card-fasilitas {
  background-color: #fff;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 15px;
  color: #000;
}

.card-fasilitas span {
  height: 50px;
  font-size: 12px;
  margin-top: 0px;
}

Maka hasilnya sebagai berikut :

Membuat SEARCH BAR pada Website Copany Profile dengan Bootstrap 5 #4

admin — Wed, 19 Jan 2022 11:43:56 +0000

Setelah kita membuat desain section layanan kami sekarang kita akan membuat desain Serach Bar, langkah pertama silahkan tambahkan section search lalu tambahkan code berikut :

      
      
      
        
          
            
              Temukan Rumah Impian
            
            
              Sekarang anda tidak perlu ribet dalam mencari model rumah impianmu.

Setelah itu tambahkan code css berikut :

/* SEACRH */
#search {
  background-image: url(../asset/img/bg-search-bar.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

#search h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: 0em;
  text-align: center;
}

#search p {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: center;
}

Selanjutnya kita akan mebuat kerang dari Navs and tabs

lalu didalamnya kita tambahkan fitur navs and tabs yang ada pada bootstrap 5 seperti berikut :

        
          
            
          
          
            
          
          
            
          
        
        
          Jual
          Sewa
          Property Baru

Harus diperhatikan, jangan lupa untuk memperhatikan id dari masing-masing targetnya jangan sampai berbeda.

Selanjutnya kita akan membuat isi dari navs & tabs nya, seperti berikut :

        
          
            
              
              
                Action
                Another action
                Something else here
                
                Separated link
              

              
              
                Action
                Another action
                Something else here
                
                Separated link
              
              

              
            
          


          
            
              
              
                Action
                Another action
                Something else here
                
                Separated link
              

              
              
                Action
                Another action
                Something else here
                
                Separated link
              
              

              
            
          


          
            
              
              
                Action
                Another action
                Something else here
                
                Separated link
              

              
              
                Action
                Another action
                Something else here
                
                Separated link

Atur sesuai dengan desain yang ada pada figma, sehingga hasilnya seperti ini

Berikut adalah file css dan section search secara lengkap

      
      
      
        
          
            
              Temukan Rumah Impian
            
            
              Sekarang anda tidak perlu ribet dalam mencari model rumah impianmu.
            
          
        

        
          
            
              
            
            
              
            
            
              
            
          
          
            
              
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link
                
  
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link
                
                
  
                
              
            
  
  
            
              
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link
                
  
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link
                
                
  
                
              
            
  
  
            
              
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link
                
  
                
                
                  Action
                  Another action
                  Something else here
                  
                  Separated link

/* SEACRH */
#search {
  background-image: url(../asset/img/bg-search-bar.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

#search h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: 0em;
  text-align: center;
  margin-top: 60px;
}

#search p {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: center;
  margin-bottom: 50px;
}

.input-cari {
  height: 60px;
}

.input-cari:focus {
  border: none;
}

.input-cari .button-secondary {
  width: 200px;
  height: 60px;
  color: #0d5b83;
  font-weight: normal;
  border: none;
  border-radius: 0 0 0 10px;
}

.input-cari .button-primary {
  height: 60px;
  background-color: #0d5b83;
  color: #fff;
  font-weight: normal;
  font-size: 25px;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link.active {
  color: #0d5b83;
}

.nav-tabs .nav-link {
  color: #000;
  border: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.1);
}

Membuat Service Section Pada Web Company Profile Dengan Bootstrap 5 #3

admin — Tue, 18 Jan 2022 15:33:59 +0000

Setelah selesai membuat section hero kali ini kita akan membuat section Layanan Kami, untuk langkah pertama silahkan membuat sebuah section seperti dibawah ini :


      
        
          
            
              Layanan Kami
              Moro Adver hadir memberikan solusi terbaik bagi Anda

Selnanjutnya tambahkan card didalamnya seperti code dibawah :

          
            
              
                
                  
                
                Property Baru
                Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.

Setelah itu tambahkan style.css dengan code berikut :

/* LAYANAN */
#layanan {
  padding: 100px 0;
}

h2 {
  font-size: 48px;
  font-weight: bold;
  color: #025782;
}

.sub-title {
  font-size: 18px;
  color: #000;
}

.card-layanan {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.7s ease-in;
}

.card-layanan h3 {
  color: #025782;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.7s ease-in;
}

.card-layanan p {
  color: #025782;
  font-size: 14px;
  transition: all 1s ease-in;
}

.wadah-icon {
  width: 73px;
  height: 73px;
  background-color: #9dcbef;
  border-radius: 50%;
  transition: all 0.7s ease-in;
}
/* Kondisi ketika di hover */
.card-layanan:hover {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  background: linear-gradient(113.94deg, #3c83ab 2.44%, #000000 215.92%);
  padding: 30px;
  box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.7s ease-in;
}

.card-layanan:hover h3 {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.7s ease-in;
}

.card-layanan:hover p {
  color: #fff;
  font-size: 14px;
  transition: all 1s ease-in;
}

.card-layanan:hover .wadah-icon {
  background-color: #fff;
  transition: all 0.7s ease-in;
}

Selanjutnya copy card layanan sebanyak 3 kali dan sesuaikan isinya, seperti code berikut :

      
      
        
          
            
              Layanan Kami
              Moro Adver hadir memberikan solusi terbaik bagi Anda
            
          

          
            
              
                
                  
                
                Property Baru
                Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.
              
            

            
              
                
                  
                
                Sewa Rumah
                Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.
              
            

            
              
                
                  
                
                Beli Rumah
                Rumah impinan baru jadi milik anda
                  nikmati hunian murah dan dengan lingkungan
                  yang asri dan lingkungan yang bersih.

Setelah selesai hasilnya sebagai berikut :

Membuat Hero Section Pada Web Company Profile Dengan Bootstrap 5 #2

admin — Tue, 18 Jan 2022 01:29:07 +0000

Setelah selesai membuat navigasi, kali ini kita akan membuat sebuah Hero Section. Langkah awal yang perlu dipersiapkan adalah membuat kerangka section hero seperti berikut :

Setelah itu tambahkan h1 dan paragraf

            
              Membantu 
                Temukan 
                Rumah Impian
              MORO ADVER hadir memberikan solusi terbaik terhadap rumah impianmu, bisa langsung beli sewa ataupun anda jual kembali.

Setelah itu masukan tombol temukan rumah

Masukan gambar hero dan ornamen setelah class row

Ubh file style.css seperti dibawah ini :

:root {
  --pr-color: #025782;
  --sc-color: #000;
}

body {
  font-family: "Noto Sans", sans-serif;
  background-color: #f6fbff;
}

/* NAVBAR */
.navbar-brand {
  font-weight: bold;
  font-size: 20px;
}

.nav-link {
  font-size: 16px;
}

.nav-link.active {
  font-weight: bold;
}

.button-primary {
  width: 109px;
  height: 34px;
  background-color: transparent;
  color: var(--sc-color);
  border: none;
  font-size: 16px;
}

.button-secondary {
  width: 109px;
  height: 34px;
  background-color: #fff;
  color: var(--pr-color);
  border: none;
  font-size: 16px;
  font-weight: bold;
}

/* HERO */
#hero {
  background: linear-gradient(111.44deg, #9dcbef 2.86%, #ffffff 100%);
  height: 100vh;
  width: 100%;
}

.img-hero {
  height: 100%;
}

Selanjutnya kita membuat div tagline sesuai dengan code berikut :

Setelah itu tambahkan file css sebagai berikut :

.hero-tagline h1 {
  color: #025782;
  font-weight: 700;
  font-size: 60px;
  line-height: 70px;
}

.hero-tagline p {
  font-size: 16px;
  color: #0d5b83;
  margin-top: 30px;
  line-height: 25px;
}

Setelah itu setting tombolnya pada css seperti ini

.button-lg-primary {
  width: 220px;
  height: 40px;
  background-color: #fff;
  color: #025782;
  border: none;
  font-size: 20px;
  font-weight: bold;
  margin-right: 5px;
}

Pada navbar ubah posisinya menjadi Fixed dengan widht nya 100

Sehingga hasilnya akan seperti dibawah ini

File Index.html



  
    
    
    

    
    

    
    
    
    

    
    

    
    

    Rumah Idaman - Moro Adver
  
  
    
    
    
        
          
             MORO ADVER
          
          
            
              
                HOME
              
              
                LAYANAN
              
              
                FITUR
              
              
                KONTAK
              
            
            
                
                
                        
          
        
  

      
      
        
          
            
              Membantu 
                Temukan 
                Rumah Impian
              MORO ADVER hadir memberikan solusi terbaik terhadap rumah impianmu, bisa langsung beli sewa ataupun anda jual kembali.

File style.css

:root {
  --pr-color: #025782;
  --sc-color: #000;
}

body {
  font-family: "Noto Sans", sans-serif;
  background-color: #f6fbff;
}

/* NAVBAR */
.navbar {
  z-index: 3;
}

* {
  z-index: 2;
}

.navbar-brand {
  font-weight: bold;
  font-size: 20px;
}

.nav-link {
  font-size: 16px;
}

.nav-link.active {
  font-weight: bold;
}

.button-primary {
  width: 109px;
  height: 34px;
  background-color: transparent;
  color: var(--sc-color);
  border: none;
  font-size: 16px;
}

.button-secondary {
  width: 109px;
  height: 34px;
  background-color: #fff;
  color: var(--pr-color);
  border: none;
  font-size: 16px;
  font-weight: bold;
}

/* HERO */
#hero {
  background: linear-gradient(111.44deg, #9dcbef 2.86%, #ffffff 100%);
  height: 100vh;
  width: 100%;
}

.img-hero {
  height: 100%;
  z-index: 1;
}

.img-ornamen {
  z-index: 0;
}

.hero-tagline h1 {
  color: #025782;
  font-weight: 700;
  font-size: 60px;
  line-height: 70px;
}

.hero-tagline p {
  font-size: 16px;
  color: #0d5b83;
  margin-top: 30px;
  line-height: 25px;
}

.button-lg-primary {
  width: 220px;
  height: 40px;
  background-color: #fff;
  color: #025782;
  border: none;
  font-size: 20px;
  font-weight: bold;
  margin-right: 5px;
}

Persiapan Membuat Navbar Pada Web Company Profile Dengan Bootstrap 5 Di Visual Studio Code #1

admin — Mon, 17 Jan 2022 12:14:33 +0000

Untuk membuat Web Company Profile dengan bootstrap pertama kita harus membuat struktur folder untuk menyimpan file nya. Pertama silahkan buat folder companyprofile, kemudian buka foldernya dengan Visual Studio Code. Setelah terbuka silahkan buat file baru dengan nama index.html

Setelah jadi file index.html silahkan copy starter template dari bootstrap 5 disini https://getbootstrap.com/docs/5.1/getting-started/introduction/ setelah itu paste pada index.html seperti berikut :



  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

Setelah itu kita setting terlebih dahulu jenis font yang akan kita pakai sesuai dengan desain sudah di buat Fitur Rumah, Kontak dan Footer Pada Web Company Profile dengan Figma #6, degan cara buka https://fonts.google.com/?query=noto+sans setelah itu pilih font apa yang mau dipakai, seperti berikut :

Selanjutnya copy link nya lalu paste pada file index.html

Selanjutnya, buat folder css pada vsCode nya, lalu buat file style.css seperti berikut :

font-family: 'Noto Sans', sans-serif;

Lalu koneksikan file style.css dengan index.html dengan cara :

Edit titlenya menjadi

Rumah Idaman - Moro Adver

Setelah itu ubah iconnya dengan cara import logo yang ada pada figma, klik icon logo pada figma lalu klik Export

Setelah itu buat folder asset, lalu simpan image hasil export ke dalamnya. asset/img/icon.png

Setelah itu buat code seperti dibawah ini :

Selanjutnya kita akan membuat sebuah navbar, dengan cara masuk ke bootstrap https://getbootstrap.com/docs/5.1/components/navbar/ lalu paste kedalam index.html

Selanjutnya kita akan menambahkan logo pada samping judul, tambahkan code img berikut :

          
             MORO ADVER

Untuk membuat navbar bisa berada pada posisi center, maka tinggal dihapus saja fluid nya pada container seperti berikut

Untuk membuat menunya berada ditengah kita cukup menambahkan class pada ul seperti berikut :

Agar menu pada navbar bisa rapi tambahkan margin pada sumbu x sebesar 2, seperti code berikut :

Selanjutnya tambahkan bold pada judul navbar, dengan cara menambahkan css navbar-brand menjadi seperti ini :

.navbar-brand {
  font-weight: bold;
}

Pada bagian navbarny agar supaya logo dan tulisannya berjaran mka kita tambahkan margin end sebesar 2


             MORO ADVER

Setelah itu pada bagian link yang aktif kita tambahkan css sebagai berikut :

body {
  font-family: "Noto Sans", sans-serif;
}

.navbar-brand {
  font-weight: bold;
  font-size: 20px;
}

.nav-link {
  font-size: 16px;
}

.nav-link.active {
  font-weight: bold;
}

Hasilnya akan seperti gambar berikut :

Setelah itu kita akan edit tombol yang ada pada sebelah kanan, pertama buat class button pada css

.button-promary {
  width: 109px;
  height: 34px;
  background-color: #fff;
}

Kemudian kita akan membuat variable agar supaya konsisten font yang digunakan tanpa harus mengetikan code warnanya :

:root {
  --pr-color: #025782;
}

body {
  font-family: "Noto Sans", sans-serif;
}

.navbar-brand {
  font-weight: bold;
  font-size: 20px;
}

.nav-link {
  font-size: 16px;
}

.nav-link.active {
  font-weight: bold;
}

.button-primary {
  width: 109px;
  height: 34px;
  background-color: #fff;
  color: var(--pr-color);
  border: none;
  font-size: 16px;
  font-weight: bold;
}

Setelah itu ubah backgroung navbar menjadi transparant, seperti berikut :

Setelah itu rapikan code css sesuai kebutuhan, atau bisa seperti dibawah ini :

:root {
  --pr-color: #025782;
  --sc-color: #000;
}

body {
  font-family: "Noto Sans", sans-serif;
  background-color: #F6FBFF;
}

.navbar-brand {
  font-weight: bold;
  font-size: 20px;
}

.nav-link {
  font-size: 16px;
}

.nav-link.active {
  font-weight: bold;
}

.button-primary {
  width: 109px;
  height: 34px;
  background-color: transparent;
  color: var(--sc-color);
  border: none;
  font-size: 16px;
}

.button-secondary {
  width: 109px;
  height: 34px;
  background-color: #fff;
  color: var(--pr-color);
  border: none;
  font-size: 16px;
  font-weight: bold;
}

Sehingga hasil akhir dari navbar adalah sebagai berikut :

Fitur Rumah, Kontak dan Footer Pada Web Company Profile dengan Figma #6

admin — Sun, 16 Jan 2022 13:34:19 +0000

Kali ini kita akan menambahkan fitur rumah, buat desain sesuai dengan gambar dibawah ini :

Setelah itu kita akan membuat kontak dengan cara membuat container full yang isinya adalah gambar seperti dibawah ini :

Setelah itu kita buat Footer seperti gambar dibawah ini :

Desain Search & Rekomendasi Rumah Pada Web Company Profile dengan Figma #5

admin — Sun, 16 Jan 2022 12:31:32 +0000

Setelah selesai dengan section Laynan Kami sekarang kita akan mendesain bagian Search dan Rekomendasi Rumah, Seperti gambar berikut :

Setelah itu kita akan membuat bagian Rekomendasi Rumah seperti gambar dibawah ini:

Desain Hero & Layanan Kami Pada Web Company Profile dengan Figma #4

admin — Sun, 16 Jan 2022 10:13:53 +0000

Setelah kita selesai mendesain Navbar selanjutnya kita akan desain bagian Hero seperti berikut :

Selanjutnya masukan gambar yang ada pada resource yang sudah disiapkan, Seperti dibawah ini :

Setelah ini kita akan melakukan masking, agar gambarnya lebih rapi, yaitu dengan cara membuat lekukan gambar dengan menggunakan pen tool, seperti dibawah ini :

Setelah selesai dengan pen tool, maka langkah selanjutnya adalah masking dengan cara membuat gambar pen tool di letakan tepat dibawah gambar, kemudian Blok keduanya lalu tekan CTRL+ALT+M , hasilnya sebagai berikut :

Setelah itu tambahkan sedikit ornamen pada section hero, seperti dibawah ini. Jik ada gambar yang keluar dari garis hero aka pelu dilakukan masking agar terlihat lebih rapi, seperti berikut :

Selanjutnya kita akan membuat Tagline, sebagai berikut :

Setelah itu kita akan membuat CTA (Call To Action), seperti berikut :

Selanjutnya kita akan membuat section bagian Layanan Kami, silahkan desain seperti gambar dibawah ini :

Desain NAVBAR Web Company Profile dengan Figma #3

admin — Sun, 16 Jan 2022 07:55:59 +0000

Setelah Mindmap dan asset sudah sisap sekarang kita langsung saja login ke https://www.figma.com/ setelah itu Import resource yang sudah siap, setelah itu ikuti langkah dibawah ini :

Setting grid terlebih dahulu menjadi 12 kolom, caranya dengan cara klik Layout Grid, setelah itu ubah menjadi 12 Column seperti gambar dibawah ini :

Seteah itu, Klik icon Frame lalu klik Dekstop dan isi propertynya seperti gambar berikut :

Setelah itu kita akan membuat Navbar, dengan cara klik Icon Rectangle lalu drag ke canvas seperti gambar berikut :

Setelah itu tambahkan Logo dan isi navbar lainnya yang ada pada asset sebelumnya, setting seperti dibawah ini :

Membuat Mind Map Website Company Profile #2

admin — Sun, 16 Jan 2022 03:52:21 +0000

Untuk membuat desain company profile kita perlu Mind Map agar bisa memudahkan dalam mebuat desain

https://mm.tt/map/2149729795?t=AZMBBRjkl1

Setelah melihat mind map diatas barulah kita bisa melanjutkan proses desain UI Company Profile dengan FIGMA.

Persiapkan Asset, silahkan klik disini https://www.figma.com/file/udRQcvVxaVXnP1YzO5Yw8f/Resource?node-id=0%3A1

Web Company Profile – Citra Air Nusantara (CAN)

Membuat Card Section Rekomendasi Pada Web Company Profile Dengan Bootstrap 5 #5

Rekomendasi Ruah Impian

IDR. 200.000.000

IDR. 200.000.000

IDR. 200.000.000

IDR. 200.000.000

IDR. 200.000.000

IDR. 200.000.000

Membuat SEARCH BAR pada Website Copany Profile dengan Bootstrap 5 #4

Temukan Rumah Impian

Temukan Rumah Impian

Membuat Service Section Pada Web Company Profile Dengan Bootstrap 5 #3

Layanan Kami

Property Baru

Layanan Kami

Property Baru

Sewa Rumah

Beli Rumah

Membuat Hero Section Pada Web Company Profile Dengan Bootstrap 5 #2

Membantu Temukan Rumah Impian

Membantu Temukan Rumah Impian

Persiapan Membuat Navbar Pada Web Company Profile Dengan Bootstrap 5 Di Visual Studio Code #1

Hello, world!

Fitur Rumah, Kontak dan Footer Pada Web Company Profile dengan Figma #6

Desain Search & Rekomendasi Rumah Pada Web Company Profile dengan Figma #5

Desain Hero & Layanan Kami Pada Web Company Profile dengan Figma #4

Desain NAVBAR Web Company Profile dengan Figma #3

Membuat Mind Map Website Company Profile #2