Scribd
Upload
9 views23 pages

Search

The document is an HTML template for a website titled 'MatteMagic Creation', featuring a logo, navigation menu, and a login modal. It includes a tagline promoting lip tints and a slider showcasing various product images. The layout is styled with CSS for a visually appealing presentation, including hover effects and responsive design elements.

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
9 views23 pages

Search

The document is an HTML template for a website titled 'MatteMagic Creation', featuring a logo, navigation menu, and a login modal. It includes a tagline promoting lip tints and a slider showcasing various product images. The layout is styled with CSS for a visually appealing presentation, including hover effects and responsive design elements.

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/ 23

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>MatteMagic Creation</title>

<link rel="stylesheet" href="style.css">

</head>

<style>

body {

margin: 0px;

padding: 0px;

font-weight: 400;

font-style: inherit;

gap: 2px;

.nav-menus {

background-color: #ffc0cb;
padding: 1px;

text-align: center;

.nav-menus a {

margin: 0 1rem;

text-decoration: none;

color: #333;

a:hover {

color: red;

.logo-container {

display: flex;

background-color: black;

align-items: center;

justify-content: flex-start;

align-items: center;
}

.logo {

width: 50px;

height: 50px;

border-radius: 50%;

margin-right: 10px;

align-items: center;

margin-left: 550px;

h1 {

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

text-decoration: none;

color: #ffc0cb;

font-size: 24px;

text-align: center;

margin-left: 5px;
}

.content {

display: flex;

justify-content: space-between;

align-items: center;

height: 520px;

.tagline-container {

width: 40%;

.tagline {

font-size: 30px;

font-weight: 600;

font-family: fantasy;

color: #333;

text-align: left;
padding: 5px;

.note {

margin-top: 0%;

font-size: 15px;

font-weight: bold;

font-family: monospace;

color: #333;

text-align: left;

padding: 5px;

text-align: justify;

font-style: italic;

#outerbox {

width: 60%;

overflow: hidden;

position: relative;

margin-top: 0px;
height: 400px;

border-top: 1px;

border-bottom: 1px;

align-content: center;

#sliderbox {

position: relative;

display: flex;

animation-name: slider;

animation-duration: 30s;

#sliderbox img {

margin-top: 0;

float: left;

height: 350px;

width: 450px;

}
.footer {

background-color: #ffc0cb;

Text-align: center;

height: 48px;

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;

10% {

left: -1000px;

15% {

left: -1000px;

}
23% {

left: -2000px;

34% {

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: 30px;

margin-right: 60px;

.slide2 {

margin-left: 170px;

margin-right: 60px;

}
.slide3 {

margin-left: 200px;

margin-right: 60px;

.slide4 {

margin-left: 200px;

margin-right: 60px;

.slide5 {

margin-left: 200px;

margin-right: 60px;

.slide6 {

margin-left: 200px;

margin-right: 60px;

}
.slide7 {

margin-left: 190px;

margin-right: 60px;

.slide8 {

margin-left: 190px;

margin-right: 60px;

.slide9 {

margin-left: 190px;

margin-right: 60px;

.slide10 {

margin-left: 190px;

margin-right: 60px;

}
.open-modal {

padding: 10px 5px;

background-color: aquamarine;

color: white;

text-align: center;

border: none;

cursor: pointer;

border-radius: 5px;

display: inline-block;

text-decoration: none;

.open-modal:hover {

background-color: blueviolet;

.modal {

display: none;
position: fixed;

z-index: 1;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: blanchedalmond;

.modal-toggle {

display: none;

.modal-toggle:checked+.modal {

display: block;

.modal-content {

background-color: blanchedalmond;
margin: 15% auto;

padding: 20px;

border: 1px solid #888;

width: 300px;

border-radius: 5px;

position: relative;

.close{

color:#aaa;

float: right;

font-size: 28px;

font-weight: bold;

cursor: pointer ;

.close:hover{

color: black;

}
form{

display: flex;

flex-direction: column;

label{

margin: 10px 0 5px;

input[type="text"]

input[type="password"]{

padding:10px;

margin-bottom: 15px;

border: 1px solid;

border-radius: 4px;

button[type="submit"]{

background-color: antiquewhite;

border:none;

padding: 10px;

color: white;
border-radius: 5px;

cursor: pointer;

button[type="submit"]:hover{

background-color: #212121;

</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>
<label for="modal-toggle" class="open-modal">Login</label>

<input type="checkbox" id="modal-toggle" class="modal-toggle">

<div class="modals">

<div class=" modal-content">

<label for="modal-toggle" class="close">&times;</label>

<h2>Login</h2>

<form>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<button type="submit">Submit</button>
</form>

</div>

</div>

</div>

<div class="content">

<div class="tagline-container">

<p class="tagline">Tint, Tone, and Slay with MatteMagic's Touch.</p>

<p clas="note"> Unleash your inner diva with MatteMagic's stunning lip tints because fabolous lips deserve

gaical moments</p>

</div>

<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="y1.5.png"></a>

</div>

<div class="slide3">

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


</div>

<div class="slide4">

<a href="#"><img id="image4" src="y1.4.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="v3.png"></a>

</div>

<div class="slide9">

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

</div>

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

</div>

</div>

</div>

</div>

<div class="footer">

<p>@All Rights Reserved</p>

</div>

</body>

</html>

You might also like