hi guys welcome back to another video
today in this video we are going to
create an animated website design that
you can see on my computer screen here i
have added this navigation bar with logo
some links and one download button after
that you can see
main title and description and one
button and in the right side you can see
this feature image and in the background
also we have added one image if i
refresh this website you can see some
animation the main title description and
buttons are moving up with some time
interval and the featured image is also
moving up
so we will create this website design
with animation using html and css step
by step so let's start this video
here in this folder i have added
index.html file and style.css file i
have another folder called images and in
this one you can see some images there's
a logo you can find all these images
download link in the video description
now let me open this code file with my
code editor which is visual studio code
so this is the html file where i have
added the basic html structures
and this one is the css file where i
have added margin padding box sizing and
font family these css properties will be
applicable for all the html elements in
this html file i have added this title
and after that we have added
link tag with the hdf style.css so it
will connect the html and css file
next we will add the code in the body
tag so here let's create one div
and
let's add a class name hero
now we will add the css for this div so
write this class name in the css file
and here we will add width and height
for this div
then we will add
background
image
url and file path so it is in images
folder
and the file name is back image
dot png
let's add the background position
and background size
we will add some padding
10 pixel from top and bottom
and 10 percent from left and right side
so we'll get 10 percent space from the
left side and right side and
overflow will be hidden
after adding this let's come back to the
folder
and open this html file with any web
browser
so you can see this image
in the background
now let me close this browser and i will
open the browser with the
visual studio code extension called live
server so that it will refresh the web
page automatically whenever we will add
any changes in the code
so you can see the same web page
let me come back to the html file and
within this div we will add the
navigation bar so here we will add nav
tag and in this one there will be a logo
so right img tag
file path of the logo
and
one class name for this logo
after that there will be some
links
so we will add ulli and a so that it
will be a clickable link
and here we will add the link text
duplicate this one and change the text
after this link there will be another
link and one button in the right side so
here we will add a div and within this
div
within this div we will add
one link with the a tag
and the link text is
login
duplicate this one and in the second one
we will add the text
download app
after that again refresh the website and
now you can see we have some space in
the left side there is a logo some links
so let's add the css for the nav tags
just copy this now write it here in the
css file
and
for this one we will add
badging
10 pixel from top and bottom left right
0 after that we will add display display
will be flex and align item center and
justify content will be space between
after that
we will add the css for this logo just
copy this one write it here
for this logo we will add the width
width will be 140 pixel
after that we have the
links in ul and li so here we will add
nav uli
so here we will add the display display
will be inline block
and lister style will be none
and after that we will add some margin
and
in this li we have added the a tag
so for this a tag we will add the text
decoration none
then we will add the color that will be
the link text color
after that we will add the
font weight
and if i refresh the website you can see
the size for this logo is perfect then
you can see
these three links in the center and we
have two links in the right side
now we will design the links which is in
the right side let's come back and here
in the login link we will add a class
name
login
btn
and in this download app we will add the
class name
vtn
that's it
after adding this let's copy this class
name login btn and write it here in the
css file and here we will add the
text decoration
none
then
color
color will be this one
and
margin from the right side
it will be
15 pixel
and
font weight will be 400.
you can see this login link here next we
will design this link which is download
app and we will design it as a button so
let's come back and copy this class name
btn
paste it here
with a dot now for this button we will
add display display will be inline block
then we will add the text decoration
none
and
some padding
14 pixel and 40 pixel
then color it will be button text color
then we will add the background of this
button so we will add background image
linear gradient and here we will add
45 degree
then first color code
then second color code
after that we will add the font size for
the text inside the button so font size
will be
14 pixel
border radius will be
30 pixel
and
border
top right radius it will be zero
after that again refresh the website now
you can see the right side button looks
good
next we will add some title description
and a button on this page so let's come
back and come to the html file
after closing of the snap tag we will
add another div with the class name
content
and in this one we will add one title in
h1
and here we will add br so
it will change the line
after that we will add description in p
tag
so this is the description and after
this description there will be another
link
so write a tag
and here also we will add a class name
btn
and the button text will be
join now
after adding this let's refresh the
website again and here you can see this
title description and a button
so let's come back and copy this class
name content write it here in the css
file and for this content we need some
space from the top so we will add
margin top
it will be
10
then we will add the maximum width for
this
div it will be
600 pixel
now we have some space from the top
and the width is maximum 600 pixel
let's come back and again write this
class name and in this one we have added
the title with h1 tag so for this h1 we
will add the font size
font size will be very large
70 pixel and
then we will change the color
and after that we will add the css for
the
paragraph text that is inside this div
so for this paragraph text we will add
the
margin
it will be 10 pixel from top 0 from left
and right
30 pixel from bottom
then we will change the color
and
after that again refresh the website you
can see the increased font size for this
title
the size for this
description is also good next we will
increase the size for this button
so let's come back and here we will add
dot content
dot btn
so
for this button we will increase the
padding so we will add the padding
15 pixel and
80 pixel
then we will add the
font size it will be 16 pixel
now you can see the increased size for
this button which is joined now next we
will add the hover effect on these
buttons so let's come back and here we
will add dot btn
and
hover
so whenever we will take cursor over
this button the border of the top right
side
will be round so here we will add
border
top right radius
30 pixel and
within this vtn
here we will add
transition 0.5 seconds
now you can see if i take cursor the top
right corner of this button becomes
round when i take cursor over it
you can see the same effect in
navigation bar button also which is
download app
after that we will add the featured
image in the right side so let's come
back and come to the html file
just after closing of this tip which is
content here we will add one image tag
file path of the image
and a class name
so we will add the class name
feature img
you can see this image at the bottom so
let's come back and
here we will add this class name
feature img
first we will add the width for this
image
width will be
530 pixel
and after that we will add the position
position will be
absolute and
bottom bottom will be 0 and after that
right
right will be 10
here we are adding position
absolute so in this hero we will add the
position
relative you can see the perfect size
and position for this picture which is
feature image
now we have added all the contents on
this webpage next we have to add the
animations so that all the contents will
move up and it will be displayed with
some time interval
for that let's come back and here in
this html file
we have added the title description and
this link so in all of this we will add
a class name
a name nm
ending sort for animation
let's add this class name in this
p also
and in this
link also so here we have added the
class name btn so a space and then write
a name for animation so we have added
the same class name in this title
description and this link
and we need the same class name in this
image also which is featured image so
here also we will add one space and
write
a name
after that we have to add the css for
this anim write this classroom in the
css file
here we will add the opacity opacity
will be zero initially then we will add
the
transform
translate by
30 pixels so it will move
down by 30 pixel
and after that we will add the
animation
move up
0.5 seconds linear
forwards next we have to add the
keyframes for this one so here we will
add
keyframes
move up
100
percent
then
we have to change this opacity and this
transform translate y so here we will
add the opacity of one
and copy this one
paste it here transform translate y will
be zero
after adding this let's come back to the
website here you can see if i refresh
this website
all the contents are animated at the
same time
it is moving up by 30 pixel and the
opacity is also changing from 0 to 1
but we have to add the animation with
some delay
first this text should display and after
that this description will be displayed
and after that this button and after
that this featured image so we will add
the
delay in this description this button
and this featured image so for this
description we will add
css here in this content p in this one
we will add
animation delay
it will be 0.5 seconds
copy this one
and we will add this delay in this
button also
content dot btn and in this one we will
add the animation delay of one second
now we will add the delay in this
feature image so just copy this featured
image
and here we will add dot
a n i m
there is no space between this class
name
so here we will add the animation delay
1.5 seconds after that again refresh the
website
now you can see the main title is
displaying first after that this
description then button and then
featured image let me refresh the
website again
so you can see
some delay in all the animation so
finally we have created this animated
website design using html and css i hope
this video will be helpful for you if
you have any question you can ask me in
the comment section please like and
share this video and also subscribe my
channel easy tutorials to watch more
videos like this one thank you so much
for watching this video