To Be Search
To Be Search
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body {
margin: 0px;
padding: 0px;
font-weight: 400;
font-style: inherit;
margin-left: 0;
margin-right: 0;
margin-bottom: 0px;
height: 620px;
}
.nav-menus {
Margin: 0;
height: 3%;
Text-align: center;
background-color: #ffc0cb;
padding: 1px;
.nav-menus a {
Margin: 0 1rem;
Text-decoration: none;
Color: #333;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-decoration: black;
a:hover {
color: red;
.logo-container {
display:flex;
background-color: black;
align-items: center;
justify-content: flex-start;
text-align: center;
.logo{
width:50px;
height:50px;
border-radius: 50%;
margin-left: 37%;
}
h1 {
text-decoration: none;
color: #ffc0cb;
text-align: center;
.content {
height: 500px;
.slide1{
height: 8px;
width: 5px;
.slide2{
height: 8px;
width: 5px;
.slide3{
height: 8px;
width: 5px;
.slide4{
height: 8px;
width: 5px;
.slide5{
height: 8px;
width: 5px;
.slide6{
height: 8px;
width: 5px;
.slide7{
height: 8px;
width: 5px;
.slide8{
height: 8px;
width: 5px;
.slide9{
height: 8px;
width: 5px;
.slide10{
height: 8px;
width: 5px;
#outerbox {
overflow: hidden;
position: relative;
margin-top: 0px;
height: 519px;
border-top: 1px;
border-bottom: 1px;
align-content: center;
#sliderbox {
position: relative;
display: flex;
size: 30px;
animation-name: slider;
animation-duration: 40s;
animation-iteration-count: infinite;
padding-top: 50px;
padding-bottom: 400px;
align-content: center;
#sliderbox img {
margin-top: 0;
float: left;
height: 400px;
width: 400px;
.footer {
background-color:#ffc0cb;
Text-align: center;
height: 30px;
padding: 2px;
.footer p {
display: flex;
justify-content: center;
color: black;
margin-top: 10px;
padding: 1px;
@keyframes slider {
0% {
left: 0px;
5% {
left: 0px;
12% {
left: -1000px;
}
22% {
left: -1000px;
25% {
left: -2000px;
35% {
left: -2000px;
37% {
left: -3000px;
40% {
left: -3000px;
42% {
left: -4000px;
45% {
left: -4000px;
50% {
left: -5000px;
55% {
left: -5000px;
60% {
left: -6000px;
62% {
left: -6000px;
65% {
left: -7000px;
72% {
left: -7000px;
75% {
left: -8000px;
85% {
left: -8000px;
87% {
left: -9000px;
97% {
left: -9000px;
100% {
left: -10000px;
.slide1 {
margin-left: 470px;
margin-right: 400px;
}
.slide2 {
margin-left: 600px;
margin-right: 400px;
.slide3 {
margin-left: 590px;
margin-right:390px;
.slide4 {
margin-left: 605px;
margin-right: 410px;
.slide5 {
margin-left: 580px;
margin-right: 400px;
}
.slide6 {
margin-left: 600px;
margin-right: 500px;
.slide7 {
margin-left: 510px;
margin-right: 440px;
.slide8 {
margin-left: 530px;
margin-right: 450px;
.slide9 {
margin-left: 550px;
margin-right: 440px;
}
.slide10 {
margin-left: 550px;
margin-right: 0px;
</style>
<body background="bg3.jpg">
<div class="logo-container">
<h1>MatteMagic Creation</h1>
</div>
<div class="nav-menus">
<a href="#">HOME</a>
<a href="thisweb.html">PRODUCT</a>
<a href="#">ABOUT</a>
<a href="#">SERVICES</a>
<a href="#">CONTACT</a>
</B>
</div>
<div class="content">
<div id="outerbox">
<div id="sliderbox">
<div class="slide1">
</div>
<div class="slide2">
</div>
<div class="slide3">
</div>
<div class="slide4">
</div>
<div class="slide5">
</div>
<div class="slide6">
<div class="slide7">
</div>
<div class="slide8">
</div>
<div class="slide9">
</div>
<div class="slide10">
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>