Answer to Question #287300 in HTML/JavaScript Web Application for Rychiko

Question

Answer to Question #287300 in HTML/JavaScript Web Application for Rychiko

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #287300

1.How will you design the website?Which platform will you use?What colors will you use?What font?

2. Will you include background music? In what format will you upload them?

3. Will you include videos? What kind of videos? What is eating software will you use?

4. Will you include photos? In what format will you upload them? Do you need to edit the photos?

5.what kind of content would encourage or motivate you to participate in a call to action?

Expert's answer

<html>
<style>
    body {
        background-color: #888888;
        margin: 0;
        padding: 0;
    }


    hr {
        margin: 40px auto 30px;
        padding: 0;
        max-width: 512px;
        border: 0;
        border-top: solid 5px #222;
        text-align: center;
    }


    navbar ul {
        z-index: 1;
        position: fixed;
        top: 0;
        width: 100%;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #00B5FF;
        box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.4);
    }


    #navhome {
        float: left;
    }


    navbar li {
        float: right;
    }




    navbar li a {
        display: block;
        color: #111222;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }


    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111222;
        color: #00B5FF;
        text-decoration: none;
    }


    main header {
        display: block;
        background: #bbbccc;
        color: #333222;
        text-align: right;
        padding: 70px 10% 50px;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        -ms-grid-row-align: flex-end;
        align-items: flex-end;
        -webkit-align-content: space-around;
        -ms-flex-line-pack: distribute;
        align-content: space-around;
    }


    main header .intro-text {
        max-width: 675px;
        text-align: center;
        margin-bottom: 10px;
    }


    main header .intro-text p {
        font-size: 20px;
        font-weight: bold;
    }


    main header img {
        border-radius: 50%;
        margin: -200px 0 10px;
        padding: 0;
        max-width: 80%;
        height: auto;
        width: 250px;
    }


    main section {
        background: #eee;
        padding: 40px 0;
    }


    #myCarousel {
        margin: 40px 20px;
    }


    #contact {
        background: #bbbccc;
        margin-bottom: 20px;
    }


    #contact ul {
        display: table;
        list-style-type: none;
    }


    #contact ul li {
        list-style-type: none;
        margin: 20px;
        padding: 0 10px;
        overflow: hidden;
        display: table-cell;
    }


    .carousel-caption h3 a {
        color: #eee;
    }
</style>


<body>
    <a name="top"></a>
    <navbar id="navbar">
        <ul id="linklist">
            <li id="navhome"><a href="#top"><strong>Home</strong></a></li>
            <li><a href="#contact"><strong>Contact</strong></a></li>
            <li><a href="#portfolio"><strong>Portfolio</strong></a></li>
            <li><a href="#about"><strong>About</strong></a></li>
        </ul>
    </navbar>
    <main class="container">
       
        <section id="portfolio">
            <h2 class="text-center">Portfolio</h2>
            <p class="text-center">(More to come as I progress through the course.)</p>
            <hr>
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>


                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="https://i.imgur.com/Nbwoj6w.jpeg" alt="Tribute">
                        <div class="carousel-caption">
                            <p>Simple tribute page made about Nikola Tesla</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="https://i.imgur.com/KOyYah4.jpeg" alt="Random Quote Machine">
                        <div class="carousel-caption">
                            <h3><a href"#" target="_blank">Random Quote Machine</a>
                            </h3>
                            <p>Simple web page that spits out random Chuck Norris jokes and allows you to share them to
                                twitter</p>
                        </div>
                    </div>
                
                </div>


            </div>
        </section>


    </main>
</body>


</html>

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

Comments

No comments. Be the first!

Answer to Question #287300 in HTML/JavaScript Web Application for Rychiko

Comments

Leave a comment

Related Questions