Cara Membuat Sidebar Contact Dengan HTML CSS dan Javascript

Sidebar dalam sebuah website tentu memiliki peran dalam menampilkan content atau sebuah informasi suatu website, jika seorang webdesign pasti akan menggunakan beberapa bentuk atau kreasi dalam menampilkan dan membuat sidebar itu sendiri. Pada kesempatan kali ini saya akan membuat sidebar contact , dan bagaimana Cara membuat sidebar Contact dengan Html Css dan Javascript , ikut langkah-langkah berikut ini.Langkah pertama  Cara membuat sidebar Contact dengan Html Css dan Javascript kita buat tampilan htmlnya terlebih dahulu seperti script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Sidebar Contact Dengan HTML CSS dan Javascript</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
</head>
<body>
  <div class="sidebar-contact">
    <div class="toggle"> </div>
      <h3>Contact Us</h3>
      <form action="">
        <input type="text" name="" placeholder="Name">
        <input type="text" name="" placeholder="Email">
        <input type="rel" name="" placeholder="Phone Number">
        <textarea placeholder="Message"></textarea>
        <input type="submit" name="" value="Send">
      </form>

  </div>
  <div class="banner"></div>
  <div class="content">
    <h3>Is a Lorem Ipsum</h3>
    <p>Lorem ipsum dolor sit amet....</p>
  </div>
  </body>
</html>

Untuk isi paragraph diatas saya tidak tampilkan semua, nanti sahabat bisa menggunakan dummy dari Lorem ipsum atau bisa mengisi beberapa paragraph, jika sudah selesai membuat file html sahabat lanjutkan membuat style cssnya untuk mengatur tampilan.

body{
  margin:0;
  padding: 0;
  font-family: sans-serif;
}

.banner{
  width: 100%;
  height: 100vh;
  background: url(bg.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.content{
  padding:50px 100px;
}

.content h3{
  margin: 0 0 20px;
  padding:0;
  font-size: 30px;
}

.content p{
  font-size: 18px;
}

.sidebar-contact{
  position: fixed;
  top:50%;
  left: -350px;
  transform: translateY(-50%);
  width: 350px;
  height: auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  box-sizing: border-box;
  transition: 0.5s;
}

.sidebar-contact.active{
  left:0px;
}

.sidebar-contact input, .sidebar-contact textarea{
  width: 100%;
  height: 36px;
  padding: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border:1px solid rgba(0,0,0,.5);
  outline: none;
}

.sidebar-contact textarea{
  height: 60px;
  resize:none;
}

.sidebar-contact input[type="submit"]
{
  background:#00cc66;
  color: #fff;
  cursor: pointer;
  border:none;
  font-size: 18px;
}

.sidebar-contact h3{
  margin:0 0 20px;
  padding: 0;
}

.toggle{
  position: absolute;
  width: 48px;
  height: 48px;
  right: -48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  background: #ff6600;
}

.toggle:before{
  content:'\f0e0';
  font-family: fontAwesome;
  color:#ccffff;
  font-size: 18px;
}

.toggle.active:before{
  content: '\f2d3';
}

pada gambar syntax css diatas saya mengisi property content: terdapat tanda ” \ “ digunakan untuk membantu membaca kode dari icon fontawesome yang dipakai. jadi akan seperti berikut tampilannya:

Langkah selanjutnya kita akan tambahkan javascript supaya saat cursor klik gambar amplop form bisa terbuka seperti gambar dibawah ini

Demikian artikel tentang  Cara membuat sidebar Contact dengan Html Css dan Javascript , semoga bermanfaat dan terus semangat .