Skip to main content

Single Page Website Design | Rustcode

by Rustcode
Single-page-website-design-rustcode
If you are in a web development domain, then you know that for a great user interface, web pages must be very clear and easy to use. You can develop that kind of website which is easy to access from mobile and desktop. 

In this article, we will learn how to design a single-page website with a mobile-first approach. If you want to create a mobile application for these kinds of websites, you don't need to write long code for these websites because They are easy to access for mobile. 

Mobile-First Approach: A “mobile-first” approach involves designing a desktop site starting with the mobile version, which is then adapted to larger screens (contrary to the traditional approach of starting with a desktop site and then adapting it to smaller screens). Generally speaking, a mobile-first approach means building your website with your mobile users in mind, with the main goal of improving these mobile users’ experience on your site.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
	<title>Single Page Website Design | Rustcode</title>	
	<link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


2. FONT-AWESOME PLUGIN

The basic HTML structure is ready for us, now let's include the font-awesome plugin in this HTML document. You can download this plugin from here. 

<!DOCTYPE html>
<html>
<head>
 <title>Single Page Website Design | Rustcode</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="style.css">
</head>

<body>

  main content.

</body>
</html>




3. CONTENT

<body>
   <nav>
      <a href="#home"><i class="fa fa-home"></i><br>HOME</a>
      <a href="#price"><i class="fa fa-briefcase"></i><br>PRICE</a>
      <a href="#about"><i class="fa fa-file"></i><br>ABOUT</a>
      <a href="#login"><i class="fa fa-user"></i><br>LOGIN</a>
   </nav>
   <div class="container">
      <section id="home">
         <h1>Homepage Section</h1>
      </section>
      <section id="price">
         <h1>Price Section</h1>
      </section>
      <section id="about">
         <h1>About Section</h1>
      </section>
      <section id="login">
         <h1>Login Section</h1>
      </section>
   </div>
</body>


4. NORMAL CSS

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'roboto', 'noto', sans-serif;
font-weight: bold;
}

.container{
background: #111;
height: 100vh;
}

#home{
background: #6184D8;
}

#price{
background: #E85D75;
}

#about{
background: #09BC8A;
}

#login{
background: #F4AC45;
}

nav{
position: fixed;
bottom: 0px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
background: #4F359B;
z-index: 50;
}

nav a{
font-size: 12px;
color: #FFF;
text-decoration: none;
padding: 20px;
text-align: center;
}

nav .fa{
font-size: 20px;
margin-bottom: 10px;
}

nav a:hover{
opacity: 0.9;
}

section{
position: absolute;
top: 0px;
height: 100vh;
width: 0px;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
}

section h1{
color: #FFF;
opacity: 0;
font-family: 'Arial', sans-serif;
}

section:target{
position: absolute;
left: 0px;
width: 100%;
height: 100%;
opacity: 1;
z-index: 10;
}

section:target h1{
opacity: 0;
animation: 2s fade forwards 0.3s;
}


5. ANIMATION CSS

@keyframes fade {
 100%{
  opacity: 1;
 }
}


6. RESPONSIVE CSS

@media screen and (min-width: 650px) {
nav{
 left: 0px;
 height: 100vh;
 flex-direction: column;
 width: auto;
 background: black;
}

nav a{
 font-size: 14px;
}

nav .fa{
 font-size: 24px;
}
}


7. YOUTUBE VIDEO

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


8. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.




RELATED POST:

Comments

Post a Comment