How To Create User Interface (UI) Website Using HTML

byPosted at
User Interface (UI) Website Design in HTML

User Interface (UI) Website

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.

HostGator Web Hosting

How To Make User Interface (UI) Website Using HTML, CSS and jQuery.

  1. 0.0 - 1.30 min : Intro
  2. 1.30 - 35.0 min: Building User Interface (UI) Website Using HTML, CSS, and jQuery.


About This Tutorial

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.

Follow These Steps:-

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.

HTML 

<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Website HTML</title>
	<link rel="shortcut icon" href="images/favicon.png"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--using-font-awesome-------->
	<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

<body>
	<!--main-section-------------->
	<section id="main">
	<!--navigation---------->
	<nav>
	<!--logo-------->
	<a href="#" class="logo"><img alt="logo" src="images/logo.png"></a>
	<!--menu-bar-icon---------->
	<div class="menu-icon"></div>
	<!--menu--------->
	<ul class="menu">
	<li><a href="#">Home</a></li>	
	<li><a href="#">About</a></li>	
	<li><a href="#">Contact</a></li>	
	<li><a href="#">Team</a></li>	
	</ul>
	</nav>
	<!--box---------------->
	<div class="main-box">
	<!--text---------->
	<div class="text">
		<span><font>We Do </font>What You Want</span>
		<h2>User Interface</h2>
		<p>Minimal And Beautiful User Interface For Your Upcoming Projects.</p>
		<!--btn--------->
	<a href="#" class="btn">Our Work</a>
	</div>
	<!--img------------->
	<div class="img">
	<img alt="interface" src="images/interface.png">	
	</div>
	</div>
	<!--footer----------->
	<footer>
	<!--social-------->
	<div class="social">
	<a href="#"><i class="fab fa-facebook-f"></i></a>	
	<a href="#"><i class="fab fa-twitter"></i></a>	
	<a href="#"><i class="fab fa-youtube"></i></a>	
	</div>
	<!--copyright---------->
	<div class="copyright">Copyright 2020 - GoingToInternet</div>
	</footer>
	<!--arrow----------->
	<div class="arrow"></div>
	</section>
	<!--subscribe-section----------->
	<section class="subscribe">
	<!--img------->
	<img alt="designs" src="images/designs1.png"/>
	<h2>Subscribe For Posts Notifications</h2>
	<!--input----------------->
	<div class="search">
	<input type="text" placeholder="Example@gmail.com"/>
	<a href="#">Send</a>
	</div>
	<!--copyright----->
	<div class="right">Copyright 2020 - GoingToInternet</div>
	</section>
	
	<!--JQuery--------------->
	<script type="text/javascript" src="js/Jquery.js"></script>

</body>
</html>

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


How To Dowload Files


Share
2 comments Labels,

Comments

  1. PortfolioSeptember 29, 2020 at 10:35 PM

    i can't download, shown webpage blocked

    ReplyDelete
    Replies
    1. Going-To InternetSeptember 30, 2020 at 9:36 AM

      Click 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

Archive

Contact Form

Send