Skip to content

Commit 00c83ac

Browse files
RuvalpreetRuvalpreet
authored
Lab 5
0 parents  commit 00c83ac

4 files changed

Lines changed: 149 additions & 0 deletions

File tree

‎contact.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="styles/styles.css" rel="stylesheet">
8+
<title>Contact page</title>
9+
</head>
10+
<body>
11+
<header>
12+
<div class="logo">
13+
<a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"><img src="images\Pizza.jpg" alt="Site logo"></a>
14+
<h1>Pizza King</h1>
15+
</div>
16+
<nav>
17+
<a href="index.html">Home Page</a>
18+
<a href="contact.html" id="contact">Contact us</a>
19+
</nav>
20+
</header>
21+
<main class="main">
22+
<form>
23+
<div class="name">
24+
<label for="your_name">Your Name
25+
<input type="text" id="your_name" required placeholder="Harry Quastle">
26+
</label>
27+
</div>
28+
<div class="email">
29+
<label for="your_email">Your Email<input type="email" required id="your_email" placeholder="youremail@email.com"></label>
30+
</div>
31+
<div class="message">
32+
<label for="your_message">Your Message
33+
<textarea id="your_message" placeholder="Your Message"></textarea>
34+
</label>
35+
</div>
36+
<div class="button">
37+
<button id="submit" type="submit" onclick="alert('We Got Your Informaton!')">Submit</button>
38+
</div>
39+
</form>
40+
</main>
41+
<footer>
42+
<address>Created by Ruvalpreet</address>
43+
<address>Follow us on <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"> Click Here</a> </address>
44+
</footer>
45+
46+
</body>
47+
</html>

‎images/Pizza.jpg‎

104 KB
Loading

‎index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Home Page</title>
8+
<link href="styles/styles.css" rel="stylesheet">
9+
</head>
10+
<body class="page_contact">
11+
<header>
12+
<section class="logo">
13+
<a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank"><img src="images\Pizza.jpg" alt="Site logo"></a>
14+
<h1>Pizza King</h1>
15+
</section>
16+
<nav>
17+
<a href="index.html" id="index">Home Page</a>
18+
<a href="contact.html">Contact us</a>
19+
</nav>
20+
</header>
21+
<main>
22+
<h2>Our Story</h2>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
24+
<h2>Our Products</h2>
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
26+
</main>
27+
<footer>
28+
<address>Created by Ruvalpreet</address>
29+
<address>Follow us on <a href="https://pixabay.com/photos/cheese-pizza-olives-mushrooms-1869708/" target="_blank">Click Here</a></address>
30+
</footer>
31+
32+
</body>
33+
</html>

‎styles/styles.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
header img{
2+
width: 50px;
3+
height: 50px;
4+
}
5+
header img:hover{
6+
filter: brightness(50%);
7+
transition: all 1s ease;
8+
}
9+
.logo{
10+
display: flex;
11+
flex-direction: row;
12+
gap: 30px;
13+
}
14+
15+
.main {
16+
margin: auto;
17+
width: 30%;
18+
}
19+
.main label{
20+
display: flex;
21+
margin: 20px;
22+
}
23+
input, textarea{
24+
width: 250px;
25+
margin-left: 10px;
26+
}
27+
28+
#submit:hover{
29+
background-color: aqua;
30+
}
31+
footer{
32+
margin-top: 20px;
33+
text-align: center;
34+
}
35+
.button {
36+
text-align: center;
37+
}
38+
nav{
39+
display: flex;
40+
flex-direction: column;
41+
border: solid black 2px;
42+
width: 10%;
43+
}
44+
nav a{
45+
text-decoration: none;
46+
width: auto;
47+
}
48+
49+
nav a:hover{
50+
background-color: pink;
51+
transition: all 5s ease;
52+
}
53+
54+
#contact, #index{
55+
background-color: lightblue;
56+
}
57+
.email,.name{
58+
margin-left: 19px;
59+
}
60+
body{
61+
padding: 30px;
62+
}
63+
input:active, textarea:active{
64+
background-color: rgb(228, 14, 14);
65+
transition: all 0.1s ease;
66+
}
67+
h1{
68+
font-size: 30px;
69+
}

0 commit comments

Comments
 (0)