Scribd
Upload
12 views19 pages

To Be Search

The document is an HTML template for a website titled 'MatteMagic Creation'. It includes a logo, navigation menu, image slider, and footer, with styles defined for various elements. The slider is animated to display multiple images in a continuous loop.

Uploaded by

felipeangelica070405
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views19 pages

To Be Search

The document is an HTML template for a website titled 'MatteMagic Creation'. It includes a logo, navigation menu, image slider, and footer, with styles defined for various elements. The slider is animated to display multiple images in a continuous loop.

Uploaded by

felipeangelica070405
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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 {

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

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;

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

@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">

<img src="received_1086812769709841.jpeg" alt="Logo" class="logo">

<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">

<a href="#"><img id="image1" src="y1.1.png"></a>

</div>

<div class="slide2">

<a href="#"><img id="image2" src="y2.png"></a>

</div>

<div class="slide3">

<a href="#"><img id="image3" src="n5.png"></a>

</div>

<div class="slide4">

<a href="#"><img id="image4" src="v2.png"></a>

</div>

<div class="slide5">

<a href="#"><img id="image5" src="g2.png"></a>

</div>

<div class="slide6">

<a href="#"><img id="image6" src="n2.png"></a>


</div>

<div class="slide7">

<a href="#"><img id="image7" src="g1.png"></a>

</div>

<div class="slide8">

<a href="#"><img id="image8" src="g2.png"></a>

</div>

<div class="slide9">

<a href="#"><img id="image9" src="y3.png"></a>

</div>

<div class="slide10">

<a href="#"><img id="image10" src="v1.png"></a>

</div>

</div>

</div>

<div class="footer">

<p>@All Rights Reserved</p>

</div>

</div>
</body>

</html>

You might also like