Hello everyone, I will give you all free code, in learning "Create A Website With Animated Image Using HTML and CSS". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
this is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
the best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. 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>WEB animated image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav>
<img src="image/logo.png" class="logo">
<ul>
<a href="#" class="btn">Log in</a>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Preview</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="row">
<div class="col-2">
<h1>Hello ... <br><span>HTML</span> Elements Basic</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero sint suscipit accusantium eius, saepe quis, voluptatem minima maxime incidunt magnam repellat eos vitae natus doloremque.</p>
<a href="#" class="btn">Learn More</a>
</div>
<div class="col-1">
<img src="image/bg.png" alt="">
<img src="image/img.svg" alt="" class="elements">
</div>
</div>
</div>
</body>
</html>
2. CSS
* {
margin: 0; padding: 0;
font-family: 'nunito', sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(45deg, #2C3639, #3F4E4F);
padding-left: 8%;
padding-right: 8%;
color: #fff;
}
nav {
display: flex;
align-items: center;
padding: 30px 0;
}
nav .logo {
width: 100px;
transition: 1s;
cursor: pointer;
}
nav .logo:hover {
transform: scale(1.1);
}
nav ul {
flex: 1;
text-align: right;
}
nav ul li {
display: inline-block;
margin: 0 15px;
}
nav ul li a {
color: #fff;
}
nav ul li a:hover {
color: #D2D79F;
}
.btn {
border: 2px solid #fff;
padding: 6px 25px;
border-radius: 30px;
margin-left: 30px;
color: #fff;
}
.btn:hover {
background: #D2D79F;
color: #E38B29;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
justify-content: space-between;
}
.col-1 {
flex-basis: 40%;
min-width: 300px;
margin-bottom: 10px;
position: relative;
}
.col-2 {
flex-basis: 55%;
min-width: 300px;
margin-bottom: 20px;
}
.col-1 img {
width: 100%;
}
.col-2 h1 {
font-size: 62px;
font-weight: 600;
}
.col-2 p {
font-size: 15px;
text-align: justify;
}
span {
color: #E38B29;
font-weight: bold;
}
.col-2 p {
margin: 10px 0 30px;
}
.col-2 .btn {
margin-left: 0;
margin-right: 30px;
background: #fff;
color: #42855B;
font-weight: 500;
transition: .5s;
}
.col-2 .btn:hover {
background: transparent;
color: #fff;
}
.elements {
position: absolute;
left: 0;
right: 0;
animation: move 2.5s linear infinite;
}
@keyframes move {
0%{
transform: translate(-15px, 0px);
}
50%{
transform: translate(0px, -15px);
}
100%{
transform: translate(-15px, 0px);
}
}
margin: 0; padding: 0;
font-family: 'nunito', sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.hero {
width: 100%;
min-height: 100vh;
background: linear-gradient(45deg, #2C3639, #3F4E4F);
padding-left: 8%;
padding-right: 8%;
color: #fff;
}
nav {
display: flex;
align-items: center;
padding: 30px 0;
}
nav .logo {
width: 100px;
transition: 1s;
cursor: pointer;
}
nav .logo:hover {
transform: scale(1.1);
}
nav ul {
flex: 1;
text-align: right;
}
nav ul li {
display: inline-block;
margin: 0 15px;
}
nav ul li a {
color: #fff;
}
nav ul li a:hover {
color: #D2D79F;
}
.btn {
border: 2px solid #fff;
padding: 6px 25px;
border-radius: 30px;
margin-left: 30px;
color: #fff;
}
.btn:hover {
background: #D2D79F;
color: #E38B29;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
justify-content: space-between;
}
.col-1 {
flex-basis: 40%;
min-width: 300px;
margin-bottom: 10px;
position: relative;
}
.col-2 {
flex-basis: 55%;
min-width: 300px;
margin-bottom: 20px;
}
.col-1 img {
width: 100%;
}
.col-2 h1 {
font-size: 62px;
font-weight: 600;
}
.col-2 p {
font-size: 15px;
text-align: justify;
}
span {
color: #E38B29;
font-weight: bold;
}
.col-2 p {
margin: 10px 0 30px;
}
.col-2 .btn {
margin-left: 0;
margin-right: 30px;
background: #fff;
color: #42855B;
font-weight: 500;
transition: .5s;
}
.col-2 .btn:hover {
background: transparent;
color: #fff;
}
.elements {
position: absolute;
left: 0;
right: 0;
animation: move 2.5s linear infinite;
}
@keyframes move {
0%{
transform: translate(-15px, 0px);
}
50%{
transform: translate(0px, -15px);
}
100%{
transform: translate(-15px, 0px);
}
}
For more details, you can see the Video tutorial and Click link Channel below :
https://youtu.be/ystmSA5U8i0
support my channel by comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "Create A Website With Animated Image Using HTML and CSS"
Post a Comment