How To Make a Website Using HTML CSS
Today In this article, we’ll show you how to create Auto Typing Text Effect Website Design Using HTML & CSS. I have already designed many types of websites. This kind of CSS Website Design looks attractive on the website.
You easily create these Website Design With Auto Typing Text Effect Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS & JS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Website Design
In this Website Design, On the home page of this site, there is navigation bar with a logo on the left side, navigation links are on the middle side and the right side has some social link. Next Step, On the left side of this site, there are texts which are about the author’s name, description, with two-button labeled as ‘Contact Me’ and ‘Download CV’. And the right side has author’s image with beautiful background shape. The main part of this website author’s name and profession will be work auto typing.
Watch the video tutorial to create CSS Website Design
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these CSS Website Design step by step completely beautifully. So you can learn how to make a website in 10 minutes. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this CSS Website Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- CSS Animated Button With Hover Effects
- Responsive Popup Modal using HTML, CSS & JS
- E-commerce Product Card Design Using Bootstrap
CSS Website Design | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
In this website to create an auto typing text effect, we took Typed.js help to make it. I have used a ‘typed.js‘ CDN link to connect here. The CDN link I have to provide before body tag as you can see on the HTML file. Some javaScript Code writes for work HTML file before body tag.
CDN Link:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use.
HTML CODE:
<!DOCTYPE html>
<!-- Created By Codecary -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Typing Website</title>
<!---Custom CSS Link-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<nav>
<img src="image/logo1.svg" class="logo">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="social-link">
<a href="#"><img src="image/Dribbble.svg"></a>
<a href="#"><img src="image/Instagram.svg"></a>
<a href="#"><img src="image/Twitter.svg"></a>
<a href="#"><img src="image/Facebook.svg"></a>
</div>
</nav>
<div class="text-box">
<h1>I'm <span class="auto-input">Jhon Smith</span></h1>
<p>Hi, I'm Jason a freelance web designer from San-Francisco.<br> I help brands turn their ideas into high quality products.</p>
<a href="#">Contact Me</a>
<a href="#" class="btn">Download CV</a>
</div>
<div class="hero">
<img src="image/user.png" class="user-img">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var typed = new Typed('.auto-input',{
strings: ["Jhon Smith", "Web Developer", "UI Designer"],
typeSpeed: 100,
backSpeed: 100,
loop: true
})
</script>
</body>
</html>After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.header{
width: 100%;
height: 100vh;
background: #fff;
color: #fff;
padding: 0 8.5%;
position: relative;
}
nav{
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
padding: 30px 0 10px;
}
.logo{
width: 45px;
cursor: pointer;
}
nav ul{
flex: 1;
text-align: right;
padding-right: 90px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: #130f49;
text-decoration: none;
letter-spacing: 1px;
font-size: 17px;
}
nav ul li a:hover{
color: #34a1cd;
}
.social-link a img{
width: 25px;
margin-right: 30px;
transition: .3s;
}
.social-link a img:hover{
transform: translate(0px, -2px);
}
.text-box{
margin-top: 10%;
font-size: 17px;
letter-spacing: 1px;
line-height: 26px;
}
.text-box h1{
font-size: 60px;
line-height: 160px;
color: #55527c;
}
.text-box h1 span.auto-input{
color: #34a1cd;
}
.text-box p{
color: #55527c;
}
.text-box a{
margin-top: 30px;
display: inline-block;
border-radius: 6px;
border: 2px solid #34a1cd;
color: #34a1cd;
padding: 10px 30px;
text-decoration: none;
}
.text-box .btn{
background: #34a1cd;
color: #fff;
margin-left: 30px;
font-weight: 600;
}
.hero{
display: inline-block;
position: absolute;
right: 8%;
bottom: 5%;
overflow: hidden;
border-radius: 100% 0px 100% 100%;
background-color: #d9f4ff;
width: 500px;
height: 500px;
}
.user-img{
width: 510px;
position: absolute;
right: -2%;
bottom: -1%;
}now you’ve successfully created these Website Design. If your code does not work or facing any error/problem to comment down or contact us through the contact page. or you can download images and source codes below the download button.
