Question

In: Computer Science

Our third project focuses on styling portions of your website. You should focus on your navigation,...

Our third project focuses on styling portions of your website. You should focus on your navigation, footer, text font, and general color scheme. Your navigation can be a traditional menu, drop down menu, “hamburger” menu, or a unique menu of your choosing. It must, however, be functional and relevant to your website if you choose to do something unique. Your footer must have a copyright for 2020 and at least few relevant links of your choosing. Your footer must be stylized and stuck to the bottom of your page, not floating around your screen as you scroll. We’ll view examples in class.

            Feel free to use any colors, any readable font, images, etc. for your navigation and footer. Please limit color schemes to 5 colors or less (I’d prefer 3 or less personally) as to keep your website coherent and uniform. Make sure all text is readable and has high contrast with your background color choices. I look forward to seeing what color themes you choose in your website and how you utilize them! Your background color choices do not have to remain the same throughout the next CSS project - I know that things will change and develop over time, but I want to see your color theme on your site.

Your final submission should include: your project folder with the appropriate files as a zip file on blackboard. Assignments turned in late, via email, etc. will not be accepted. Do not wait until class to submit an assignment. Assignments are due BEFORE class. If you are experiencing technical difficulties email me and let me know so we can work them out in a timely fashion.

This is the main question, I also have some HTML that I need fixed from the previous project

Solutions

Expert Solution

This code contains both html and css. As per requirement I have created only header and footer.

<!-- ! IMPORTANT
  please connect to internet to open this page as bootstrap is use in the page
 -->

<html>

<head>
    <title>This is webpage</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            font-family: Geneva;
        }

        .navbar {
            width: 100%;
            text-align: center;
            background-color: #4b2786;
            color: white;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            grid-template-columns: repeat(5, 1fr);
            display: grid;
        }

        .heading {
            grid-column: 1/3;
            margin-right: 80px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .navitems {
            grid-column: 3/6;
        }

        .navitems div {

            padding: 3px;
            display: inline-block;
            margin-right: 80px;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            border-radius: 20px;
            padding-inline-start: 0px;
            margin-block-start: 0.2em;
            position: absolute;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 5px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
            border-radius: 20px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .navitems div:hover {
            border-bottom: 1px solid red;
        }

        .footer {
            position: fixed;
            left: 0;
            text-align: center;
            bottom: 0;
            width: 100%;
            background-color: #4b2786;
            color: white;
            margin-top: 20px
        }

        .icons {
            padding-top: 10px;
            text-align: center;
        }

        .icons div {
            display: inline-block;
            width: 40px;
            height: 30px;
            background-color: black;
            text-align: center;
        }

        .icons div {
            display: inline-block;
        }

        .icons div:nth-child(2) {
            font-size: 30px;
            color: red;
        }

        .one div {
            display: inline-block;
            padding: 5px;
        }

        .copyright {
            color: grey;
            font-size: 0.8em;
            padding-bottom: 10px;
        }
        .footerlink a{
            text-decoration: none;
            color:white;
        }
    </style>
</head>

<body>
    <div class="navbar">
        <div class="heading">
            <span style="font-size:25px">&#8486;</span>
            WELCOME YOU ALL
        </div>
        <div class="navitems">
            <div class="dropdown">HAMBURGER
                <ul class="dropdown-content">
                    <a href="#">ITEM 1</a>
                    <a href="#">ITEM 2</a>
                    <a href="#">ITEM 3</a>
                    <a href="#">ITEM 4</a>
                    <a href="#">ITEM 5</a>
                    <a href="#">ITEM 6</a>
                </ul>
            </div>
            <div>PIZZA</div>
            <div>CONTACT</div>
            <div>REPORT</div>

        </div>
    </div>
    <div id="container">

    </div>

    <div class="footer">
        <div>
            <div class="icons">
                <div>we</div>
                <div>&hearts;</div>
                <div>you</div>
            </div>
            <div class="gridfoot">
                <div class="footerlink">
                    <div class="one">
                        <div><a href="#">Home</a></div>
                        <div><a href="#">Support</a></div>
                        <div><a href="#">Security</a></div>
                    </div>
                    <div class="two">
                        <div><a href="#">Terms of usage</a></div>
                    </div>


                </div>
                <div class="copyright">Copyright &copy; 2020 IS448-TEST</div>


            </div>
        </div>


    </div>
</body>

</html>

venereology answered 10 months ago
Next > < Previous

Related Solutions

A project manager and the project team should not focus on ‘project firefighting ‘but should allocate...
A project manager and the project team should not focus on ‘project firefighting ‘but should allocate sufficient time and resources to preventing problems throughout the life of the project. Project Risk management is one way of preventing problems that can negatively affect the project objectives of cost, schedule, scope, and quality. Effective risk management is directed at eliminating threats and increasing opportunities to ensure project success. (1) Examine a project that you have worked on or know about and discuss...
A project manager and the project team should not focus on ‘project firefighting ‘but should allocate...
A project manager and the project team should not focus on ‘project firefighting ‘but should allocate sufficient time and resources to preventing problems throughout the life of the project. Project Risk management is one way of preventing problems that can negatively affect the project objectives of cost, schedule, scope, and quality. Effective risk management is directed at eliminating threats and increasing opportunities to ensure project success. (1) Examine a project that you have worked on or know about and discuss...
You are heading a project to move your corporate website to the cloud. You insist that...
You are heading a project to move your corporate website to the cloud. You insist that a project charter be created. Your project sponsor thinks this is a waste of time. Explain to your project sponsor the importance of this activity and what could go wrong if you skip this step.
Decide on the natural or man made event that you will focus on for your project...
Decide on the natural or man made event that you will focus on for your project and at least 4 vulnerable populations that will need particular care during and after the event. You may choose a local or national event that has actually occurred OR you may create your own event. Write details of the event history – what happened, when, other circumstances of the event that are important. Identify four vulnerable groups – be specific about what groups (must...
Define about the control and evaluation of any project . The focus should be on quality,...
Define about the control and evaluation of any project . The focus should be on quality, risk , control and BCWS of the project.
Describe your approach to tracking a project. What kinds of issues would you focus on if...
Describe your approach to tracking a project. What kinds of issues would you focus on if you were a project manager? Why?
You should aim for a list of 5-10 questions that focus on your thesis area. Thesis...
You should aim for a list of 5-10 questions that focus on your thesis area. Thesis statement: Although there is controversy on the morality and ethic toward living organisms, businesses should be granted patents to modify genes and organisms because it will increase investment, encourage innovation, and foster accountability. Please help me come up with a questionnaire based on the above thesis statement.
You will be expected to complete a website of your choice. This website must incorporate a...
You will be expected to complete a website of your choice. This website must incorporate a PHP component, in this case, a form that we will be working on in class. When in doubt, carry out research to see what you could add. There are videos in the required resources section to assist anyone who is not familiar with building a website. Be sure to consult your instructor if additional support is needed. The first task is to have your...
You will be expected to complete a website of your choice. This website must incorporate a...
You will be expected to complete a website of your choice. This website must incorporate a PHP component, in this case, a form that we will be working on in class. When in doubt, carry out research to see what you could add. There are videos in the required resources section to assist anyone who is not familiar with building a website. Be sure to consult your instructor if additional support is needed. The first task is to have your...
You will design and create your own GUI application for the Bank project. This project should...
You will design and create your own GUI application for the Bank project. This project should be designed and written by Java programming. The requirements of the program: 1. The program will be best implemented as a multi-file program for each class. 2. The parameters and return types of each function and class member should be decided in advance. You may need to add more member variables and functions to the classes than those listed below. Also, you can throws...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT