Answer to Question #179648 in Web Development for anna

Question

Answer to Question #179648 in Web Development for anna

Answers>

Programming & Computer Science>

Web Development

Question #179648

You are required to create your personal blog. The blog should contain four (4) main pages

which should reflect the pictures below. With screen shots of each page shown below. Your

content should exactly be aligned as it appears in the pictures. 2. The Main Page – Index

Within your main page, provide the content that defines your blog, discuss what it is about.

3. The Logo Page

Within your Logo page, provide the logo for your company and give its description As to what it reflects.

4. The Gallery Page

Within gallery page, provide the best possible images of your brand.

5. The Contact Us Page

Within your contact us page, please provide the best sign-up form and sign – form where

you will be contacted by your followers.

Expert's answer

Main-page/index:

-------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
  
color: white;
}

#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(to right, red , yellow);
}

</style>

<style>
* {
box-sizing: border-box;
}

.column {
float: left;
width: 33.33%;
padding: 5px;
}

.row::after {
content: "";
clear: both;
display: table;
}
</style>

</head>
<body id="grad1">

<div class="topnav">
<a class="active" href="index.html">Main</a>
<a href="logo.html">Logo</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>

</div>

<div style="padding-left:16px">
<br>
<center>
<img src="img/blog.jpg" alt="school">
</center>
</div>


<div class="row">
<h3>A blog is a type of website, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order.</h3>
</div>
  
</div>

</body>
</html>
--------------------------------------------------

Logo page:

-----------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
  
color: white;
}

#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(to right, red , yellow);
}

</style>

<style>
* {
box-sizing: border-box;
}

.column {
float: left;
width: 33.33%;
padding: 5px;
}

.row::after {
content: "";
clear: both;
display: table;
}
</style>

</head>
<body id="grad1">

<div class="topnav">
<a class="active" href="index.html">Main</a>
<a href="logo.html">Logo</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
<p style="text-align:center"><img src="logo.png" alt="logo"></p>
</div>

<div style="padding-left:16px">
<br>
<center>
<img src="img/image6.jpg" alt="school">&nbsp;&nbsp<img src="img/image7.jpg" alt="school">

<p>A fitness center, additionally known as a gymnasium, is a covered place for athletics. The phrase is derived from the ancient Greek gymnasium. They are typically found in athletic and fitness centers, and as interest and gaining knowledge of areas in educational establishments.</p>
</center>
</div>


</body>
</html>
-------------------------------------

gallery page

----------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
  
color: white;
}

#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(to right, red , yellow);
}

</style>

<style>
* {
box-sizing: border-box;
}

.column {
float: left;
width: 33.33%;
padding: 5px;
}

.row::after {
content: "";
clear: both;
display: table;
}
</style>

</head>
<body id="grad1">

<div class="topnav">
<a class="active" href="index.html">Main</a>
<a href="logo.html">Logo</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>

</div>

<div style="padding-left:16px">
<br>
<center>
<img src="img/image8.jpg" alt="school">&nbsp;&nbsp<img src="img/image9.jpg" alt="school">
   <br>
   <img src="img/image1.jpg" alt="school">&nbsp;&nbsp<img src="img/image2.jpg" alt="school">
   <br>
   <img src="img/image10.jpg" alt="school">&nbsp;&nbsp<img src="img/image11.jpg" alt="school">
</center>
</div>


</body>
</html>
--------------------

contact page

---------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
  
color: white;
}

#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(to right, red , yellow);
}

</style>

<style>
* {
box-sizing: border-box;
}

.column {
float: left;
width: 33.33%;
padding: 5px;
}

.row::after {
content: "";
clear: both;
display: table;
}
</style>

</head>
<body id="grad1">

<div class="topnav">
<a class="active" href="index.html">Main</a>
<a href="logo.html">Logo</a>
<a href="gallery.html">Gallery</a>
<a href="contact.html">Contact</a>
</div>

<div style="padding-left:16px">
<h1>sign-up form</h1>
<br>
<table border="1 px">
<tr>
<td>Enter Full Name: </td>
<td><input type="text" name="fname"/></td>
</tr>
<tr>
<td>Enter Address: </td>
<td><input type="text" name="address"/></td>
</tr>
<tr>
<td>Enter Contact Number: </td>
<td><input type="text" name="phone"/></td>
</tr>
<tr>
<td>Enter Email: </td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>Enter comments: </td>
<td><input type="text" name="comments"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="save"/></td>
</tr>
</table>
  
</center>
</div>


</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #179648 in Web Development for anna

Comments

Leave a comment

Related Questions