Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
5 views2 pages

Flexbox Program

This document is an HTML template for a webpage titled 'Challenge 1'. It includes a header, navigation bar, two styled boxes, and a footer with an image and text. The CSS styles define the layout, colors, and hover effects for various elements on the page.

Uploaded by

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

Flexbox Program

This document is an HTML template for a webpage titled 'Challenge 1'. It includes a header, navigation bar, two styled boxes, and a footer with an image and text. The CSS styles define the layout, colors, and hover effects for various elements on the page.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Challenge 1</title>
<style>
h1{
background-color: rgb(4, 4, 71);
color: aliceblue;
text-align: center;
margin: 0;
padding: 50px;
font-weight: bold;
font-size: 60px;

}
nav{
background-color:rgb(13, 68, 110) ;
padding: 20px;
position: sticky;
top:0;

font-size: 25px;

}
a{
color: aliceblue;
text-decoration: none;
margin: 140px;

}
a:hover{
background-color: rgb(108, 15, 108);
border-radius: 5px;
padding: 5px;

}
.container{
background-color: plum;
justify-content: space-around;
display: flex;
padding: 50px;

}
.box1{
background-color: rgb(19, 162, 98);
margin: 50px;
padding: 50px;
border: 5px solid rgb(13, 13, 2);
width: 500px;
height: 300px;

}
.box2{
background-color: rgb(27, 202, 211);
margin: 50px;
padding: 50px;
border: 5px solid rgb(18, 18, 1);
width: 500px;
height: 300px;

}
p{
background-color: rgb(14, 2, 24);
margin: 0;
color: white;
text-align: center;
border: 2px solid white;
padding: 25px;
height: 10px;
width:1455px;
}
img{
position: fixed;

}
footer{
background-color: bisque;
}

</style>
</head>
<body>
<main>
<h1>Iconic</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</main>
<footer>
<p>Sigma Web devlopment </p>
<img src="./Images/sun.jpg" alt="" style="border-radius: 50%;
height: 70px; width: 70px;">

</footer>
</body>
</html>

You might also like