Question

In: Computer Science

Your first project is to build your own home page. The page should be some sort...

Your first project is to build your own home page. The page should be some sort of introduction to you, and include more than a single page.

Other than that, there are no rigid guidelines as to what these pages should contain.

If you're looking for ideas of what to put into your personal pages, here are some starters:

  • Information about you
  • Information about your occupation and your job
  • Friends and Family
  • Pets
  • Spouse/SO/Partner
  • Your most recent vacation
  • Favorite TV shows (Tip: Link to the show's/movie's site or to its page on imdb.com
  • Where and with whom you live
  • What you do with your spare time (if you have any)
  • Any organizations to which you belong or sponsor
  • You can include some opinions or articles you may have written.

These are just ideas, though. What you put on your home site is entirely up to you.

You might want to consider your audience a specific group, such as classmates and the instructor--in which case you might want to include information such why you're taking this class, what kind of computer and 'net connection you're using, etc. Or, you may want to make your audience anyone who might be interested in or you know

Solutions

Expert Solution

*****This requires a lot of effort so please give a thumbs up if you are satisfied with the solution and please go through the comments in code for better understanding*******

Most of the content text in Html code is example text so feel free to change the text to your liking....

so this website has three files

  1. HomePage.html
  2. HomePage.css
  3. ContactMe.html

HomePage.html:

<html>

    <head>

        <!-- change the content in the title tag to your name -->

        <title>Your Name</title>

        <link href="HomePage.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Be+Vietnam&display=swap" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

    </head>

    <body>

        <div class="main-div">

            <!-- change contnent of below tag to your name -->

            <span style="font-size: 50px;">Your Name</span>

            <!-- change the content of below tag to your occupation or your job -->

            <span style="font-size: 30px;">Your occupation or job</span>

            <!-- place all files in same folder for second page to work -->

            <span class="contact-me"><a href="contactMe.html" style="text-decoration: none;color:black;" target="_blank">Contact Me</a></span>

        </div>    

        <div class="about-me">

            <section>

                <article style="margin:0 15px;">

                    <p style="font-family: 'Open Sans';font-size:20px;text-align: center;">About me</p>

                    <!-- Some random text so replace it with the text you want -->

                    <p style="font-size:15px;font-family:'Open Sans';">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

                    <hr>

                    <p style="font-family: 'Open Sans';font-size:20px;">Address</p>

                    <p style="font-size:15px;font-family:'Open Sans';">

                            Street Address  :   1094 Ocala Street<br>

                            City            :   Oviedo<br>

                            State Full      :   Florida<br>

                            Zipcode         :   32765

                            Telephone Number:   407-365-134<br>

                            Mobile Number   :   904-759-4948<br>  

                    </p>

                    <hr>

                </article>

                <div class="f-f">

                    <div class="ff">

                        <p>Father       :       John Wick</p>

                        <p>Mother       :       Emma Stone</p>

                        <p>Brother      :       Keanu Reeves</p>

                        <p>Sister       :       Someone</p>

                        <h2>Friends</h2>

                        <ul>

                            <li>Zyan</li>

                            <li>Reshma</li>

                            <li>Manu</li>

                            <li>Jaya</li>

                        </ul>

                    </div>

                    <img src="https://www.bandt.com.au/information/uploads/2018/11/Diverse-team-1260x840.jpg" style="width:50%;height:auto;float:right;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.616);">

                </div>

                <hr>

                <div class="f-f">                        

                        <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/326/326253/corgi-and-terrier-running.jpg" style="width:50%;height:auto;float:right;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.616);">

                        <div class="ff">

                            <h2>Martin</h2>

                            <!-- Some description about your dog or cat -->

                            <p style="margin:10px;">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

                        </div>

                    </div>

                <div class="vacation">

                    <img src="https://www.incimages.com/uploaded_files/image/970x450/getty_672425798_399101.jpg" style="width:100%;height:auto;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.616);">

                    <h2>Recent Vacation</h2>

                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

                    <h2>Favourate Movies</h2>

                    <ul>

                        <li><a href="https://www.imdb.com/title/tt0816692/?ref_=fn_al_tt_1" target="_blank">Interstellar</a></li>

                        <li><a href="https://www.imdb.com/title/tt3659388/?ref_=fn_al_tt_1" target="_blank">The Martian</a></li>

                        <li><a href="https://www.imdb.com/title/tt2872732/?ref_=nv_sr_6?ref_=nv_sr_6" target="_blank">Lucy</a></li>

                        <li><a href="https://www.imdb.com/title/tt0816711/?ref_=nv_sr_1?ref_=nv_sr_1" target="_blank">World War Z</a></li>

                    </ul>

                </div>

            </section>

        </div>

    </body>

</html>

HomePage.css:

.main-div{

    width:100%;

    height:100vh;

    background: linear-gradient(45deg, rgb(243, 111, 111),rgb(218, 23, 23));

    border-radius: 0.5%;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.616);

    display:flex;

    flex-direction: column;

    color: rgba(255, 255, 255, 0.945);

    font-family: 'Be Vietnam', sans-serif;

    align-items: center;

    justify-content: center;

    text-shadow:0 3px 5px rgba(0, 0, 0, 0.705);

}

.about-me{

    width:100%;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.616);

    border-radius:0.5%;

}

.f-f{

    display: flex;

    flex-direction: row;

    margin:10px;

    font-family: 'Open Sans';

}

.ff{

    width:50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.vacation{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

li a{

    text-decoration: none;

    color:black;

    font-size:30px;

}

.contact-me{

    background: whitesmoke;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.616);

    text-shadow: none;

    color:Black;

    width: 100px;

    padding:5px;

    text-align: center;

    margin:10px;

    font-family: 'Open Sans';

}

.contact-me:hover{

    cursor:pointer;

}

ContactMe.html:

<html>

    <head>

            <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

            <style>

                body{

                    display: flex;

                    flex-direction: column;

                    align-items: center;

                    justify-content: center;

                }

            </style>

    </head>

    <body>

        <h1>Your Message</h1>

        <textarea placeholder="..."></textarea>

        <button>Send</button>

    </body>

</html>

FirstPage: (HomePage)

Second Page:(ContactMe Page)

venereology answered 7 months ago
Next > < Previous

Related Solutions

Java program to implement the merge sort your own and test it to sort a list...
Java program to implement the merge sort your own and test it to sort a list of names based on the frequency.
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...
Take some time to build your own "Personal Balanced Scorecard." Rather than a Scorecard for a...
Take some time to build your own "Personal Balanced Scorecard." Rather than a Scorecard for a company, this scorecard will be about your own personal goals, and how you can measure your progress towards them. Think of each of the traditional four perspectives in a way that can apply to your own life: Internal (health) perspective: This perspective is about the physical and mental well-being of an individual. Measures from this perspective should emphasize how someone can improve or maintain...
The project is to "Design and build an experiment to verify the first law of thermodynamics...
The project is to "Design and build an experiment to verify the first law of thermodynamics by stirring air with an electric motor powered paddle, in a well-insulated container." We are planning on finding the work of the motor and seeing if it equal to the change in internal energy of the container. The only problem is that we are confused on how to find the internal energy. What would be the best/easiest way to solve this? Also since the...
Create an outline of your project (1 page). The outline should only contain topic headings and...
Create an outline of your project (1 page). The outline should only contain topic headings and a brief description of what it will cover. See the link below for an APA formatted outline. Remember that your outline will be a guide as you write your paper to keep you on topic and organized. Required paragraph topics include but are not limited to: the role nutrition plays in the prevention of the disease, etiology, progression, treatment, recommended diets, nursing assessment, nursing...
A project model of some sort is implied by any conscious decision, including the selection of...
A project model of some sort is implied by any conscious decision, including the selection of projects. The choice between two or more alternative projects requires reference to some objective. Determine the nature of project selection models
Scenario: You are the project manager assigned to build and decorate a model home. What might...
Scenario: You are the project manager assigned to build and decorate a model home. What might be an example of a lead you encounter when scheduling work activities? Also, what might be an example of a lag?
Consider a project to build an amusement park. What are some of theresource constraints that...
Consider a project to build an amusement park. What are some of the resource constraints that would make this project challenging? What could you do, as a project manager, to help manage the constraints and project scheduling?
This week, your team is to create a document to show sort priorities. Your summary should...
This week, your team is to create a document to show sort priorities. Your summary should explain sort priorities and where the likely targets of best allocation of software time can be spent. Create a 1-page summary of best options to sort and search through a University's library catalogs, lists, and databases. Include the following in your summary: List of the character sort strings and numerical data searches Arrays, subarrays, and where normalization database links may need to be revised...
You have secured a loan from your bank for two years to build your home. The...
You have secured a loan from your bank for two years to build your home. The terms of the loan are that you will borrow $155,000 now and an additional $105,000 in one year. Interest of 10 percent APR will be charged on the balance monthly. Since no payments will be made during the 2-year loan, the balance will grow. At the end of the two years, the balance will be converted to a traditional 20-year mortgage at a 8...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT