How To Create User Interface (UI) Website Using HTML
Learn how to make User Interface(UI) Website Design Using HTML, CSS, and JavaScript. Easy way to create a Responsive UI website Using HTML, CSS, and JS. You will make this UI website by following my video tutorial or by following the steps, Which I have given below.
How To Make User Interface (UI) Website Using HTML, CSS and jQuery.
- 0.0 - 1.30 min : Intro
- 1.30 - 35.0 min: Building User Interface (UI) Website Using HTML, CSS, and jQuery.
In this tutorial, I will teach you how to make a User Interface(UI) website design using HTML, CSS, and JavaScript(Js). The site is fully responsive and supports all browsers. In the tutorial first, I will show you the design which I will create in this tutorial. After, I will start to make this design. I will make the structure of the site using HTML. I Design the site using CSS. I use jQuery To make blur the background when the menu is visible. I hope you like this tutorial. If you have any questions or any problems, contact me.
1) Open any text editor.
2) Create HTML, CSS, And Javascript files. I recommended you to create separate folders for CSS File And JS File.
3) Link the CSS and JS File With HTML File.
4) Copy the HTML code, which I gave below, and paste in the HTML which you create.
Awesome Website HTML We Do What You WantUser Interface
Minimal And Beautiful User Interface For Your Upcoming Projects.
Our Work![]()
![]()
Subscribe For Posts Notifications
Copyright 2020 - GoingToInternet
5) Copy the CSS code, which I gave below, and paste in the CSS which you create.
CSS@charset "utf-8"; /* CSS Document */ body{ margin:0px; padding:0px; font-family: calibri; } a{ text-decoration:none; } ul{ list-style:none; } *{ box-sizing:border-box; } #main{ width:100%; height:100vh; background-image:url("../images/bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; } nav{ display: flex; justify-content: space-between; align-items: center; padding: 40px 60px 20px 60px; } .logo img{ height:33px; } .menu-icon:before{ content: '\f0c9'; font-family: fontAwesome; line-height: 30px; color:#FFFFFF; font-size: 1.4rem; } .menu-icon.active:before{ content: '\f00d'; } .menu-icon{ position: fixed; right:60px; top: 40px; z-index: 3; } .menu{ width:100%; height: 100%; position:fixed; left:0px; top:0px; background-color:rgba(22,22,27,0.9); z-index: 2; flex-direction: column; display: none; justify-content: center; align-items: center; margin: 0px; } .menu li{ margin:20px; } .menu li a{ color:#FFFFFF; font-size: 2rem; letter-spacing: 5px; text-transform: uppercase; background:linear-gradient(45deg,#5734ca 20%,#a178f8); padding: 10px 20px; } .menu li:hover{ transform: scale(1.1); } .menu.active{ display: flex; } .main-box.active, footer.active, .logo.active, .subscribe.active{ filter: blur(4px); } .main-box{ display: flex; justify-content: space-between; align-items: center; margin: 60px 10%; } .text{ width:400px; } .text span{ font-weight: 700; color:#FFFFFF; letter-spacing: 1px; font-size: 1.1rem; } .text h2{ color:#FFFFFF; font-size: 6rem; letter-spacing: 1px; font-weight: 700; margin:0px 0px 30px 0px; line-height: 83px; } .text p{ color:#595659; font-weight: 400; margin: 0px; font-size: 1.2rem; } .btn{ width:150px; height: 40px; display: flex; justify-content: center; align-items: center; background:linear-gradient(45deg,#5734ca 20%,#a178f8); color:#FFFFFF; font-weight: 600; font-size: 1rem; margin-top: 20px; box-shadow: 2px 2px 30px rgba(161,120,248,0.1); } .btn:active{ transform: scale(1.1); } .text span font{ border-top: 3px solid #a178f8; } footer{ display:flex; justify-content: space-between; align-items: center; position: absolute; width:100%; left: 0px; bottom: 50px; padding: 0px 10%; } .social { display: flex; z-index: 1; } .social a{ width:40px; height: 40px; border-radius: 50%; color:rgba(252,252,252,0.80); display: flex; justify-content: center; align-items: center; margin: 0px 7px; } .social a:hover{ background: linear-gradient(45deg,#5734ca 20%,#a178f8); box-shadow: 2px 2px 30px rgba(161,120,248,0.1); color: #FFFFFF; transition: all ease 0.3s; } .copyright{ color:#FFFFFF; } .arrow{ align-self: end; width:50%; border-right:1px solid white; height:16%; margin-bottom: 3.5em; position: absolute; bottom: 5px; } .arrow::after{ content: ''; position: absolute; width:0px; height: 0px; border-style: solid; border-width: 11px 11px 0px 11px; border-color: white transparent transparent transparent; right: -0.7em; bottom: -2px; } .subscribe{ width:100%; height: 100vh; background-image: url("../images/bg2.png"); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } .subscribe img{ width:80%; } .subscribe h2{ color:#FFFFFF; letter-spacing: 1px; font-size: 2rem; } .search{ width: 400px; height: 50px; background-color: #1a191c; display: flex; justify-content: center; border-radius: 50px; } .search input{ width:100%; background-color: transparent; border:none; outline: none; text-align: center; color:#FFFFFF; } .search a{ width:140px; height: 35px; background-color: #5734ca; color:#FFFFFF; display: flex; justify-content: center; align-items: center; margin: auto 10px; border-radius: 20px; font-weight: 700; } .search a:hover{ background-color: #FFFFFF; color:#000000; transition: all ease 0.3s; } .right{ text-align: center; padding: 10px; position: absolute; left: 0px; bottom: 0px; width:100%; color:#FFFFFF; background-color:#1a191c; } @media(max-width:930px){ nav{ padding:40px 10px 20px 30px; } .img img{ height:300px; } .main-box{ padding:20px 0%; } .text h2{ font-size:4rem; line-height:60px; } } @media(max-width:630px){ .img{ display: none; } .text{ width:100%; margin-top: auto; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); padding: 40px; } .arrow{ display: none; } footer{ bottom: 20px; padding: 5px 10px; } .copyright{ margin:0px; padding: 5px 10px; } .search{ width:90%; } .subscribe h2{ width:90%; text-align: center; } }
6) Copy the JS code, which I give you below of this, and paste this code in the CSS which you create.
JavaScript$(document).ready(function(){ $('.menu-icon').click(function(){ $('.menu-icon,.menu,.main-box,footer,.logo,.subscribe').toggleClass('active') }) })
7) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
i can't download, shown webpage blocked
ReplyDeleteClick on block button which show in the URL of your browser , and allow to always continue downloading. After doing this Retry to download. You see the blue color text (images.rar, website.rar) this is the download link.
Delete