HTML & CSS :Kiosk Machine Interface Design

In this article, you will learn on how to design Kiosk Machine Interface with HTML and CSS. You can also copy or download the source code below.

  • Create index.html file on your Text Editor.
  • Copy and paste the given HTML code below.
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kiosk</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
    <link rel="stylesheet" href="assets/css/mediaquery.css">
    <link rel="stylesheet" href="assets/css/Navigation-with-Search.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div class="main-div">
        <section id="header-logo"><img src="assets/img/wideawareness main.png" class="logo-img"></section>
        <section id="header-logo-time">
            <div class="row">
                <div class="col-6 logo-holder">
                    <h2 class="text-white">Tickets</h2>
                </div>
                <div class="col-6">
                    <div class="float-right searchbox-holder">
                        <form class="searchbox-form">
                            <div class="input-group searchbox">
                                <div class="input-group-prepend"></div><input class="form-control searchbox" type="text" placeholder="Search Here">
                                <div class="input-group-append"><button class="btn btn-primary searchbox-btn" type="button"><i class="fa fa-search"></i></button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <section class="navigation-sec">
            <div class="row">
                <div class="col-5"><button id="btn-topleft-corner" class="btn btn-primary big-btn-left" type="button">
    <i class="material-icons big-btn-left-icon">train</i>
 
    <br>Train</button></div>
                <div class="col-5"><button class="btn btn-primary big-btn-left" type="button">
<i class="material-icons big-btn-left-icon">ondemand_video</i>    

    <br>Movies</button></div>
                <div class="col-2"><button id="btn-topright-corner" class="btn btn-primary small-btn" type="button">
    <i class="icon ion-ios-basketball small-btn-icon"></i>
    
    <br>Basketball</button><button id="btn-bottomright-corner" class="btn btn-primary small-btn" type="button">
    
    <i class="icon ion-ios-football small-btn-icon"></i>

    
    <br>Football
<br>(No Matches)
</button></div>
            </div>
        </section>
        <section class="navigation2-sec">
            <div class="row">
                <div class="col-5"><button id="btn-bottomleft-corner" class="btn btn-primary big-btn-bottom-left" type="button">
<i class="icon ion-android-bus big-btn-bottom-left-icon"></i> 
   <br>Bus</button></div>
                <div class="col-5"><button id="btn-bottomright-corner" class="btn btn-primary big-btn-bottom-left" type="button">
<i class="fa fa-plane big-btn-bottom-left-icon"></i>    
    <br>Plane</button></div>
            </div>
        </section>
        <section class="button-section">
            <div class="row">
                <div class="col-6"><button class="btn btn-primary" type="button" id="back-btn"><span class="back-btn-icon"><i class="icon ion-arrow-return-left"></i></span>Back</button></div>
                <div class="col-6"><button class="btn btn-primary" type="button" id="home-btn"><span class="back-btn-icon"><i class="icon-home home-btn-icon"></i></span>Home</button></div>
            </div>
        </section>
        <footer id="footer">
            <p><br>© 2020 WideAwareness. All rights reserved.<br><br></p>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Create styles.css file and paste the following code.

You can also modify as you want.

.main-div {
  max-height:1024px;
  max-width:1280px;
  margin:50px;
}
body {
  background-image:url(../../assets/img/kiosk-bg.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  font-family:Arial;
  /*overflow:hidden;*/
}
.logo-img {
  height:50px;
  max-width:250px;
  width:100%;
}
.float-right.searchbox-holder {
  height:100%;
  background-color:#fff;
  min-width:80%;
  border-radius:20px;
  margin:0;
  padding:0;
}
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
  background:none;
  border:none;
  color:rgb(184,184,184);
}
.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
  background:none;
  color:#ccc;
  border:none;
  padding-left:35px;
  padding-top:8px;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  background:none;
  border:none;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  color:#14b0ef;
}
.input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) {
  height:50px;
}
.searchbox-form {
  width:100%;
}
.navigation-sec {
  margin-top:56px;
  max-width:575px;
  margin-left:auto;
  margin-right:auto;
}
.navigation2-sec {
  margin-top:0px;
  max-width:575px;
  margin-left:auto;
  margin-right:auto;
}
.big-btn-left {
  text-align:center;
  color:#5c5c5c;
  font-size:23px;
  height:220px;
  width:250px;
  margin-right:2px;
  font-family:sans-serif;
  background-color:#fff;
  border:none;
  line-height:1em;
}
.big-btn-bottom-left {
  text-align:center;
  color:#5c5c5c;
  font-size:20px;
  height:130px;
  width:250px;
  margin-right:2px;
  font-family:sans-serif;
  background-color:#fff;
  border:none;
  line-height:1em;
}
.big-btn-left-icon {
  font-size:98px;
  margin-bottom:10px;
  margin-top:-20px;
  color:#14b0ef;
}
.big-btn-bottom-left-icon {
  font-size:70px;
  margin-bottom:10px;
  margin-top:0px;
  color:#14b0ef;
}
.small-btn {
  text-align:center;
  color:#fff;
  font-size:14px;
  height:109px;
  width:160px;
  margin-right:2px;
  font-family:sans-serif;
  margin-bottom:2px;
  line-height:1em;
  border:none;
}
.small-btn-bottom-icon {
  font-size:67px;
  margin-top:0px;
  color:#14b0ef;
}
.small-btn-icon {
  font-size:50px;
  margin-top:4px;
  color:#fff;
}
#header-logo-time {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  margin-top:30px;
}
#btn-topleft-corner {
  border-radius:25px 0px 0px 0px;
}
#btn-topright-corner {
  border-radius:0px 25px 0px 0px;
}
#btn-bottomright-corner {
  border-radius:0px 0px 25px 0px;
  box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#btn-bottomleft-corner {
  border-radius:0px 0px 0px 25px;
  box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.button-section {
  max-width:570px;
  margin-left:auto;
  margin-right:auto;
  margin-top:30px;
}
#home-btn {
  float:left;
  padding:8px 43px;
  font-size:20px;
  border-radius:5px;
  color:rgba(255,255,255,0.92);
  font-family:Arial;
  box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#back-btn {
  float:right;
  padding:8px 43px;
  font-size:20px;
  border-radius:5px;
  color:rgba(255,255,255,0.9);
  font-family:Arial;
  box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.home-btn-icon {
  margin-right:7px;
  font-size:18px;
}
.back-btn-icon {
  margin-right:7px;
  font-size:24px;
}
#header-logo {
  margin-top:40px;
  margin-left:40px;
}
#footer {
  margin-bottom:0;
  max-width:800px;
  color:white;
  text-align:left;
  padding:0;
  margin-left:40px;
  font-size:small;
  margin-top:0px;
}
.navigation-clean-search {
  background:#fff;
  padding-top:.75rem;
  padding-bottom:.75rem;
  color:#333;
  border-radius:0;
  box-shadow:none;
  border:none;
  margin-bottom:0;
}
@media (min-width:768px) {
  .navigation-clean-search {
    padding-top:1rem;
    padding-bottom:1rem;
  }
}
.navigation-clean-search .navbar-brand {
  font-weight:bold;
  color:inherit;
}
.navigation-clean-search .navbar-brand:hover {
  color:#222;
}
.navigation-clean-search .navbar-toggler {
  border-color:#ddd;
}
.navigation-clean-search .navbar-toggler:hover, .navigation-clean-search .navbar-toggler:focus {
  background:none;
}
.navigation-clean-search .navbar-toggler {
  color:#888;
}
.navigation-clean-search .navbar-collapse, .navigation-clean-search .form-inline {
  border-top-color:#ddd;
}
.navigation-clean-search .navbar-nav a.active, .navigation-clean-search .navbar-nav > .show > a {
  background:none;
  box-shadow:none;
}
.navigation-clean-search.navbar-light .navbar-nav a.active, .navigation-clean-search.navbar-light .navbar-nav a.active:focus, .navigation-clean-search.navbar-light .navbar-nav a.active:hover {
  color:#8f8f8f;
  box-shadow:none;
  background:none;
  pointer-events:none;
}
.navigation-clean-search.navbar .navbar-nav .nav-link {
  padding-left:18px;
  padding-right:18px;
}
.navigation-clean-search.navbar-light .navbar-nav .nav-link {
  color:#465765;
}
.navigation-clean-search.navbar-light .navbar-nav .nav-link:focus, .navigation-clean-search.navbar-light .navbar-nav .nav-link:hover {
  color:#37434d !important;
  background-color:transparent;
}
.navigation-clean-search .action-button, .navigation-clean-button .action-button:active {
  background:#56c6c6;
  border-radius:20px;
  font-size:inherit;
  color:#fff !important;
  box-shadow:none;
  border:none;
  text-shadow:none;
  padding:8px 20px;
  transition:background-color 0.25s;
}
.navigation-clean-search .action-button:hover, .navigation-clean-search .action-button:focus {
  background:#66d7d7;
}
.navigation-clean-search .form-inline label {
  color:#ccc;
}
.navigation-clean-search .form-inline .search-field {
  background:none;
  border:none;
  border-bottom:1px solid transparent;
  border-radius:0;
  color:#ccc;
  box-shadow:none;
  color:inherit;
  transition:border-bottom-color 0.3s;
}
@media (max-width:767px) {
  .navigation-clean-search .form-inline .search-field {
    display:inline-block;
    width:80%;
  }
}
.navigation-clean-search .form-inline .search-field:focus {
  border-bottom:1px solid #ccc;
}
@media (min-width: 360px) {
  .logo-img {
    max-height:29px;
    max-width:98px;
    width:100%;
  }
}
@media (max-width: 360px) {
  .main-div {
    border:2px solid #ffffff;
    max-height:750px;
    max-width:320px;
    margin:16px;
  }
}

You can modify the design and add more media query based on the device you are going to use.

You can also download the source code from the linked below.

Download Here: https://drive.google.com/file/d/11xlR4JhxwKECVWGdvQE_jvB3DVYwX2Bu/view?usp=sharing

Please follow and like us:

One thought on “HTML & CSS :Kiosk Machine Interface Design”

Leave a Reply

Your email address will not be published. Required fields are marked *