Scribd
Upload
0 views

web 5 first

The document consists of multiple HTML files (home.html, animation.html, transition.html) that create a simple website with navigation links and sections for home, animation, and transition content. Each HTML file includes a header with a navigation menu and a section for displaying content, with the animation.html and transition.html files containing div elements for visual effects. The accompanying CSS file (style.css) styles the layout, navigation, and animations for the elements on the pages.

Uploaded by

abirsarkar867
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

web 5 first

The document consists of multiple HTML files (home.html, animation.html, transition.html) that create a simple website with navigation links and sections for home, animation, and transition content. Each HTML file includes a header with a navigation menu and a section for displaying content, with the animation.html and transition.html files containing div elements for visual effects. The accompanying CSS file (style.css) styles the layout, navigation, and animations for the elements on the pages.

Uploaded by

abirsarkar867
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

home.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul>
</nav>
</header>
<section><div class="home"><h2>CSS HOME Page</h2></div></section>
</div>
</body>
</html>

animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header><nav>
<ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul>
</nav>
</header>
<section>
<div class="animation">
<div id="f1"></div><div id="f2"></div>
<div id="f3"></div><div id="f4"></div>
</div>
</section>
</div>
</body>
</html>
transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><header><nav><ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul></nav>
</header>
<section><div class="transition">
<div id="f5"></div><div id="f6"></div>
<div id="f7"></div><div id="f8"></div></div>
</section></div>
</body>
</html>

style.css

* {margin: 0;padding: 0;font-family: sans-serif;box-sizing: border-box;}


body {height: 100vh;width: 100vw;}
nav {
display: flex; align-items: center; justify-content: center;
height: 60px; background: lightblue;}
ul {display: flex; gap: 20px;}
li {list-style-type: none;}
h2 {font-size: 28px; font-weight: bold; color: lightseagreen;}
a { text-decoration: none; color: black; font-size: 20px;}
section {display: flex; justify-content: center; margin-top: 60px;}
.animation {padding: 30px;display: flex;gap: 30px;}
#f1,#f2,#f3,#f4 {
height: 200px; width: 200px;background: white; border-radius: 30px; border: 2px solid white);}
#f1 {animation-name: example 1s infinite;}
@keyframes example {
0% {background-color: red;}25% {background-color: yellow;}
50% {background-color: blue;}100% {background-color: green;}}
#f2 { animation: rotate 2s infinite forwards;}
@keyframes rotate {
0% {rotate: 90deg;background: red;}
100% {rotate: 360deg;background: yellow;}}
#f3 { animation: zoom 2s infinite alternate;}
@keyframes zoom {
0% {transform: scaleX(.5) scaleY(.5);}
100% {transform: scaleX(1) scaleY(1);}}
#f4 {animation: move 2s 2s infinite alternate;}
@keyframes move {
0% {transform: translateX(1px);}
100% {transform: translateX(-700px);}}
.transition {padding: 30px;display: flex;gap: 30px;}
#f5,#f6,#f7,#f8 {
height: 200px;width: 200px;border: 2px solid black;
background: #000;border-radius: 30px;transition: all .8s ease;}
#f5 {background: blue;}
#f6 {background: rgb(55, 155, 236);}
#f7 {background: rgb(232, 97, 13);}
#f8 {background: rgb(212, 255, 0);}

You might also like