Description

Hello Friends! How Do All In this video, you will learn how to make a Text Slider Website Using HTML and CSS | Text Animation Website, In This Website, I am Using Some Easy Steps For Only Png's (images). This Site Have One Logo, One Navbar, Given to Upside You will understand In Tutorial Video Available In YouTube Channel Of Coding Karunadu. Hope this video will be helpful.

Thank You For Wisting My Website

Source Codes

HTML Code:

<!DOCTYPE html>
<html lang="en">
<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> Sliding Text Website Using HTML and CSS Only | Coding KArunadu</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="banner">
        <div class="navbar">
            <img src="logo.png" alt="" class="logo">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">New</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Full Web</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <img src="back-png.png" alt="" class="png">
        <div class="content">
            <div class="title">Make Website
            <div class="slider">
                <div>Now</div>
                <div>Tody</div>
                <div>Free</div>
            </div>
        </div>
               


        <p>Subscribe My Channel For Website Source Code</p>
        <button type="button">Create To Using New</button>
    </div>
    </div>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins',sans-serif;
}

.banner{
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85));
}

.png{
  width: 42%;
}

.navbar{
  width: 85%;
  margin: auto;
  padding: 35px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  width: 170px;
  cursor: pointer;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a{
  text-decoration: none;
  color: #fff;
}

.navbar ul li a:hover{
  color: #0751ff;
}

.navbar ul li::after{
  content: '';
  height: 2px;
  width: 0;
  background: #0751ff;
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: 0.5s;
}

.navbar ul li:hover::after{
  width: 100%;
}

.content{
  width: 65%;
  position: absolute;
  top: 60%;
  left: 35%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

.title{
  font-size: 70px;
  line-height: 100px;
  font-weight: bold;
  height: 100px;
  display: flex;
  justify-content: center;
  text-align: left;
  align-items: center;
  overflow: hidden;
}

.content p{
  font-size: 25px;
  font-weight: 100;
  line-height: 25px;
}

button{
  padding: 15px 25px;
  margin: 20px;
  font-size: 16px;
  letter-spacing: 2px;
  border: 1px solid #fff;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to left, transparent 50%, #0751ff 50%);
  background-size: 200%;
  background-position: right;
  transition: background-position 0.5s;
}

button:hover{
  background-position: left;
}

.slider{
  color: #0751ff;
  margin-left: 12px;
  box-sizing: border-box;
  animation: slider 6s linear infinite;
}

@keyframes slider{
  0%{margin-top: -200px;}
  30%{margin-top: -200px;}
  35%{margin-top: 0px;}
  65%{margin-top: 0px;}
  70%{margin-top: 200px;}
  100%{margin-top: 200px;}
}

You have to wait 40 seconds.

Text Slider Website Using HTML and CSS | Text Animation Website | Coding Karunadu

Description

Coffee Website Using HTML and CSS

Create A website Using HTML and CSS | Shoes Website

Sticky Navigation Bar in HTML CSS and JavaScript

Make a Website Design Your House Using HTML and CSS

Calendar Card UI Design | Glassmorphism - HTML, CSS & Javascrip

Thank You For Wisting My Website

Source Codes

نموذج الاتصال