Question

In: Computer Science

Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...

Task 1: HTML and CSS

Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious.

Part 1: Content (HTML)

After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The content is placed in the HTML files, and the layout and style will be defined using CSS (see part 2). Your website must include (at least):

  • 3 html pages:
    • index.html: this is the landing page (must be named index.html). The landing page is the first page a visitor will see when visiting your website.
    • another html page (any name)
    • yet another html page (any name)
  • a typical layout using semantic tags (header, nav, footer, article...)
  • page titles for each html page (titles show on the title bar/tabs)
  • different size headings
  • images:
    • at least 5 images in one html page,
    • the other pages may have any number of images (or none).
    • make sure all image paths are relative (not absolute)
  • internal links:
    • links from index.html to the other html pages you created
    • links from all the other pages back to index.html
    • make sure all internal links are relative links (not absolute)
  • external links:
    • at least two links to external websites (pages that you did not create).
    • external links should open in a new tab/window.
  • a list (ordered or unordered)
  • a table (with some relevant data)
  • your copyright info at the footer (with the © symbol).
  • classes and id's as needed (for styling with css)

Do not forget to make your pages accessible. You should double-check your code to make sure you are not missing closing tags, etc. and test it using different browsers. Focus on making your pages syntactically and semantically correct.

Part 2: Style (CSS)

You'll create an external stylesheet (css) to style the html pages you created in part 1. Name this file main.css.

All html pages should link to the same main.css file. You must use a variety of selectors and properties presented in chapters 4 and 5, including:

  • font family, size, color, background color of text and headings, font color for links (make sure visited and unvisited links are displayed in different colors)
  • positioning elements
  • special effects or animations
  • a navigation menu

Part 3: An alternate style (CSS)

You'll create a different CSS file, with different style and layout rules, to make your HTML pages look completely different (without making any changes to the HTML files).

  • Name this css file alternate.css.
  • Do not create new html files. You may change the name of the css linked in the html <head> section back and forth (while testing).
  • Before submitting, make sure all html files link to main.css (we'll change it when testing).

Solutions

Expert Solution

I am pasting the codes and images here according their file names i have used

Make sure to use the correct file names and paste all the files in the same folder.

I am also attaching the output (screenshots) of the pages.

in the footer i added social links which i couldnt upload it here for some issues so Change the link in the footer ex:-change face-book.com to facebook.com

name : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <ul>
                    <div>
                        <li id="icon"><a href="index.html">Save Trees Save Lives</a></li>
                    </div>
                    <div class="nav-links">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </div>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="content">
            <div class="quotes">
                <div class="container">
                    <article>Excess carbon dioxide (CO2) is building up in our atmosphere, contributing to climate change. Trees absorb CO2, removing and storing the carbon while releasing oxygen back into the air. In one year, an acre of mature trees absorbs the same amount of CO2 produced when you drive your car 26,000 miles.</article>
                </div>
               
            </div>
            <section class="articles">
                <div class="card">
                    <div class="img-box">
                        <img src="./1.jpg">
                    </div>
                    <div class="text-box">
                        <article>Deforestation is the biggest issue that affects the whole system of life a big question. Cutting down of forests in great numbers can lead to great consequences that cannot bring back life to normal. We should avoid Deforestation as much as possible. We should eliminate unnecessary cutting down of Trees. Saving Trees is the best way to Save Life.</article>
                    </div>
                </div>
                <div class="card">
                    <div class="img-box">
                        <img src="./2.jpg">
                    </div>
                    <div class="text-box">
                        <article>Are Major parts of Survival on Earth
                            Provide food for many living organisms on Earth
                            Provide Shelter for many living things which will lead to extinction of such organisms without trees</article>
                    </div>
                </div>
                <div class="card">
                    <div class="img-box">
                        <img src="./3.jpg">
                    </div>
                    <div class="text-box">
                        <article>Give away oxygen that is necessary for us to live
                            Absorb pollutants like Carbon Monoxide and Sulphur Di oxide
                            control noise pollution and reduce flash flooding.
                            Prevent soil from Eroding</article>
                    </div>
                </div>
                <div class="card">
                    <div class="img-box">
                        <img src="./4.jpg">
                    </div>
                    <div class="text-box">
                        <article>Control temperature of the environment and keeps it cool and breezy
                            There are much more uses Trees serve but people who do not realize the importance of trees keep cutting trees on and on. Trees are called the “Green Gold” on Earth so that humans can understand the Significance of Trees in life. Without trees cleaning and refreshing air that is totally polluted will not be possible. Harmful gases keep ruining the environment. People suffer from respiratory disorders and breathing problems.</article>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <footer>
        <h3>Copyright &copy; Save Trees Save Lives</h3>
        <div class="row social-links">
            <p>Follow Us on : </p>
            <a href="https://www.face-book.com">Facebook</a>
            <a href="https://www.twit-ter.com">Twitter</a>
            <a href="https://www.ins-tagram.com">Instagram</a>
            <a href="https://www.you-tube.com">Linkedin</a>
        </div>
    </footer>
</body>
</html>

gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <ul>
                    <div>
                        <li id="icon"><a href="index.html">Save Trees Save Lives</a></li>
                    </div>
                    <div class="row">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </div>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="content">
            <div class="container gallery">
                <article>Trees can mask concrete walls or parking lots, and unsightly views. They muffle sound from nearby streets and freeways, and create an eye-soothing canopy of green. Trees absorb dust and wind and reduce glare</article>
                <article>Sycamore and oak are among the many urban species that provide excellent urban homes for birds, bees, possums and squirrels.</article>
                <article>Trees as landmarks can give a neighborhood a new identity and encourage civic pride.</article>
                <div class="image-gallery">
                    <img src="./1.jpg" >
                    <img src="./2.jpg" >
                    <img src="./3.jpg" >
                    <img src="./4.jpg" >
                    <img src="./5.jpg" >
                    <img src="./6.jpg" >
                    <img src="./7.jpg" >
                </div>
            </div>
        </div>
    </main>
    <footer>
        <h3>Copyright &copy; Save Trees Save Lives</h3>
        <div class="row social-links">
            <p>Follow Us on : </p>
            <a href="https://www.face-book.com">Facebook</a>
            <a href="https://www.twit-ter.com">Twitter</a>
            <a href="https://www.ins-tagram.com">Instagram</a>
            <a href="https://www.you-tube.com">Linkedin</a>
        </div>
    </footer>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <ul>
                    <div>
                        <li id="icon"><a href="index.html">Save Trees Save Lives</a></li>
                    </div>
                    <div class="row">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                    </div>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="content">
            <h3 class="contact-header">Contact Us</h3>
            <div class="contact-form-container">
                <div class="col contact-images">
                    <img src="./7.jpg" >
                    <img src="./6.jpg" >
                    <img src="./5.jpg" >
                    <img src="./4.jpg" >
                </div>
                <form>
                    <div class="form-control">
                        <label>Name</label>
                        <input type="text">
                    </div>
                    <div class="form-control">
                        <label>Email</label>
                        <input type="email">
                    </div>
                    <div class="form-control">
                        <label>Message</label>
                        <textarea></textarea>
                    </div>
                    <div class="form-control">
                        <button type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
    <footer>
        <h3>Copyright &copy; Save Trees Save Lives</h3>
        <div class="row social-links">
            <p>Follow Us on : </p>
            <a href="https://www.face-book.com">Facebook</a>
            <a href="https://www.twit-ter.com">Twitter</a>
            <a href="https://www.ins-tagram.com">Instagram</a>
            <a href="https://www.you-tube.com">Linkedin</a>
        </div>
    </footer>
</body>
</html>

main.css

*{
    margin: 0;
    padding: 0;
}
header{
    background-color: aquamarine;
    color: black;
    width: 100%;
}
nav ul{
    display: flex;
    justify-content: space-between;
}
nav ul li{
    margin: 20px;
    list-style: none;
}
nav ul li a{
    text-decoration: none;
    color: black;
    font-size: 20px;
    letter-spacing: 3px;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.row{
    display: flex;
}
#icon a{
    font-size: 30px!important;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: .5em;
}

footer{
    width: 100%;
    background-color: darkgreen;
    color: white;
    padding: 15px 30px;
    font-family: 'Times New Roman', Times, serif;
}
footer .social-links{
    margin-top: 15px;
}
footer .social-links a{
    margin-left: 15px;
    color: rgb(45, 228, 241);
    text-transform: uppercase;
    text-decoration: none;
}
.image-gallery{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.image-gallery img{
    width: 300px;
    height: 300px;
    margin: 10px;
}
.gallery article{
    text-align: center;
    margin:20px;
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.card{
    width: 600px;
    height: 300px;
    display: flex;
    flex-direction: row;
    background-color: rgb(208, 231, 224);
    border-radius: 50px;
    margin: 30px;
}
.card .img-box,.text-box{
    width: 50%;
    height: 100%;
}
.card .img-box img{
    width: 100%;
    height: 100%;
}
.card .text-box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.crad .img-box{
    overflow: hidden;
}
section.articles{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.quotes article{
    text-align: center;
    margin:20px;
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.col{
    display: flex;
    flex-direction: column;
}
.images img{
    width: 500px;
    height: 300px;
}
.contact-form-container{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.contact-images{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contact-images img{
    width: 300px;
}
form{
    width: 50%;
    padding: 50px;
}
label{
    font-size: 25px;
}
.form-control{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.contact-header{
    margin: 30px;
    text-align: center;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}
textarea{
    height: 300px;
}
button{
    padding: 10px;
    font-size: 25px;
    background-color: aquamarine;
    color: black;
    border: none;
    text-transform: uppercase;
    transition: .75s all ease;
    border-radius: 15px;
}
button:hover{
    background-color: darkgreen;
    color: white;
}
input{
    height: 40px;
    padding: 5px 15px;
}
.nav-links{
    display: flex;
    flex-direction: row;
}

alternative.css

*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url('./bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
header{
    background-color: rgb(59, 119, 231);
    color: white;
    width: 100%;
}
nav ul{
    display: flex;
    justify-content: space-between;
}
nav ul li{
    margin: 20px;
    list-style: none;
}
nav ul li a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    letter-spacing: 3px;
}
.container{
    width: 80%;
    margin: 0 auto;
}
.row{
    display: flex;
}
#icon a{
    font-size: 30px!important;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: .5em;
}

footer{
    width: 100%;
    background-color: black;
    color: white;
    padding: 15px 30px;
    font-family: 'Times New Roman', Times, serif;
}
footer .social-links{
    margin-top: 15px;
}
footer .social-links a{
    margin-left: 15px;
    color: rgb(45, 228, 241);
    text-transform: uppercase;
    text-decoration: none;
}
.image-gallery{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.image-gallery img{
    width: 300px;
    height: 300px;
    margin: 10px;
}
.gallery article{
    text-align: center;
    margin:20px;
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.card{
    width: 300px;
    height: 600px;
    display: flex;
    flex-direction: column-reverse;
    background-color: rgb(208, 231, 224);
    border-radius: 50px;
    margin: 30px;
    transition: .5s all ease;
}
.card:hover{
    flex-direction: column;
    transform: scale(1.1);
}
.card .img-box,.text-box{
    width: 100%;
    height: 50%;
}
.card .img-box img{
    width: 100%;
    height: 100%;
}
.card .text-box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.crad .img-box{
    overflow: hidden;
}
section.articles{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.quotes article{
    text-align: center;
    margin:20px;
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.col{
    display: flex;
    flex-direction: column;
}
.images img{
    width: 500px;
    height: 300px;
}
.contact-form-container{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.contact-images{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.contact-images img{
    width: 300px;
    height: 300px;
    margin: 10px;
}
form{
    width: 100%;
    padding: 50px;
}
label{
    font-size: 25px;
}
.form-control{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.contact-header{
    margin: 30px;
    text-align: center;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
}
textarea{
    height: 300px;
}
button{
    padding: 10px;
    font-size: 25px;
    background-color: rgb(76, 127, 168);
    color: black;
    border: none;
    text-transform: uppercase;
    transition: .75s all ease;
    border-radius: 15px;
}
button:hover{
    background-color: rgb(65, 55, 211);
    color: white;
}
input{
    height: 40px;
    padding: 5px 15px;
}
.nav-links{
    display: flex;
    flex-direction: row;
}

I am pasting 7 pictures name them 1.jpg, 2.jpg, 3.jpg like this

bg.jpg>

venereology answered 6 months ago
Next > < Previous

Related Solutions

Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The...
Write a log-in log-out session using PHP, CSS, and HTML only. NO MYSQL and JavaScript allowed....
Write a log-in log-out session using PHP, CSS, and HTML only. NO MYSQL and JavaScript allowed. 1. Need an HTML form and a login form; separate file. 2. need a CSS file to make it look good 3. Must store visitors' info in a .txt file and validate from there if the user exists before granting access to the dashboard. If the user does not exist, render the form to signup. If the user exists take them to their dashboard....
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
Build an application using HTML, CSS, javascript, json. It is not necessary for backend to be...
Build an application using HTML, CSS, javascript, json. It is not necessary for backend to be working but the frontend should be good. App should to simple and useful in our day to day life. For eg- grocery shopping list or alarm or weather forecast or reminder.
HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email...
HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email Address (Email) > Desired Username (Text box) > Password (Password) > Family name (Text box) > Middle Name/Initial (Text box) > First name (Text box) > Gender (Radio Button - Male or Female only!) > ID Number (Text box) > Mobile Number (Text box) > Landline Number (Text box) > Permanent Home Address (Text box) > Degree/Course (Text box) > Year Level (Drop down...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I...
JS Bin / Tax Calculator / using HTML | CSS | JavaScript ------------------------------------------------------------------------------------------- How can I edit the JavaScript below so that when the calculate button is clicked the total price only shows two decimal places by using the toFixed() method? ----------------------------------------------------------------------------------------------------------- JavaScript: // Variables var tax = "tax"; // Tax percentage var taxRate = document.getElementById('tax'); // Selecting tax element // On the time of loading the DOM we are setting the tax rate window.addEventListener('DOMContentLoaded', (event) => { taxRate.value =...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT