Wireframe Design Header 960 X 130 Need To Decrease Size Bord
Wireframe Design 1header 960 X 130 Need To Decrease Sizeborder 1p
Wireframe Design 1 header - 960 x 130 (need to decrease size) Border – 1px solid, color #FF7A4D Background – color #000000 Nav – color #FF7A4D, Arial, Bold 14 John Doe – color #FFFFFF, Copper Black 20 Photography Hobbyist – color #FFFFFF, Arial 14 Color bar - color #00D9A3 Main Heading Content – color #000000 Photography – Arial 36 definition – Arial 12 Subheading – Arial 24, 18 Enter – background color #000000, Arial Bold 24 Footer – background color #000000, border #FF7A4D, font color - #FF7A4D Please complete website for Dreamweaver CS6. Please document and include on a separate Word document all HTML and CSS coding. Thanks.
Paper For Above instruction
/ Reset default styles /
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/ Styles for the header /
header {
width: 960px;
height: 130px; / Decreased size as per instruction /
border: 1px solid #FF7A4D;
background-color: #000000;
margin: 20px auto; / Center the header horizontally /
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
/ Navigation styles /
nav {
width: 100%;
background-color: #FF7A4D;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
padding: 5px 10px;
}
/ Branding section styling /
.brand {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 10px;
}
.company-name {
color: #FFFFFF;
font-family: "Copper Black", serif;
font-size: 20px;
}
.photography-hobbyist {
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 14px;
}
/ Color bar styling /
.color-bar {
width: 100%;
height: 5px;
background-color: #00D9A3;
margin-top: 8px;
}
/ Main heading styles /
.main-heading {
width: 100%;
text-align: center;
color: #000000;
font-family: Arial, sans-serif;
font-size: 36px;
margin-top: 10px;
}
/ Definition paragraph styles /
.definition {
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 8px;
}
/ Subheading styles /
.subheading {
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
font-size: 24px;
margin-top: 10px;
color: #000000;
}
/ Enter button styles /
.enter-button {
display: inline-block;
background-color: #000000;
color: #FFFFFF;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 24px;
padding: 12px 30px;
text-align: center;
text-decoration: none;
margin-top: 20px;
cursor: pointer;
border: none;
}
/ Footer styles /
footer {
width: 100%;
background-color: #000000;
border-top: 1px solid #FF7A4D;
color: #FF7A4D;
text-align: center;
padding: 15px 0;
font-family: Arial, sans-serif;
}
Navigation Menu
Main Heading Content
Photography
Definition
© 2024 Your Website. All rights reserved.