HomeworkLib
Question
Final Project can be of any website. basically create any website using custom CSS theme that extends Bootstrap and its componenets.

Implement a functional version of the application/ website of your final project using a custom CSS theme that extends Bootst
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

1)Screenshot of the code:

This project contain the dumy data .You can modify that data according to your requirement .

Bootstrap.html - Notepad File Edit Format View Help <I doctype html> <html lang=en> <head> <meta charset=utf-8> <meta nam

Bootstrap.html - Notepad File Edit Format View Help o * .site-header a:hover { color: #fff; text-decoration: none; body { ani

Bootstrap.html - Notepad File Edit Format View Help background: #9FB1BC; 60% { background: #D3DOCB; 80% { background: #E2C044

Bootstrap.html - Notepad File Edit Format View Help font-weight: lighter; font-size: 20px; </style> </head> <body> <div class

Bootstrap.html - Notepad File Edit Format View Help maiores aut inventore, dolores at earum qui repellat fugiat quia providen

Bootstrap.html - Notepad File Edit Format View Help </nav> <div class=position-relative overflow-hidden P-3 P-md-5 m-md-3 te

Bootstrap.html - Notepad File Edit Format View Help doloremque vitae unde voluptas quaerat minima alias!</p> </div> <div clas

Bootstrap.html - Notepad File Edit Format View Help dy=.3em>Thumbnail</text> </svg> <div class=card-body> <p class=card-

Bootstrap.html - Notepad File Edit Format View Help dy=.3em>Thumbnail</text> </svg> <div class=card-body> <p class=card-

Bootstrap.html - Notepad File Edit Format View Help </svg> <div class=card-body> <p class=card-text>Lorem ipsum dolor, si

Bootstrap.html - Notepad File Edit Format View Help <div class=col-sm-10> <input type=text class=form-control id=fullN

2)Screenshot of the output:

File Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any W X Bootstrap x + O file:///C:/Users/srishti/AppData

File Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any We X Bootstrap O file:///C:/Users/srishti/AppData/lo

File Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any W X Bootstrap x + O file:///C:/Users/srishti/AppDataFile Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any We X Bootstrap + O file:///C:/Users/srishti/AppData/File Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any We X Bootstrap x + O file:///C:/Users/srishti/AppDatFile Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any W X Bootstrap + O file:///C:/Users/srishti/AppData/lFile Edit View History Bookmarks Tools Help Crinal Project Can Be Of Any W X Bootstrap X + O file:///C:/Users/srishti/AppData

3)CODE:
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <style>
        .site-header {
            background-color: rgba(0, 0, 0, .85);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
        }

        .site-header a {
            color: #999;
            transition: ease-in-out color .15s;
        }

        .site-header a:hover {
            color: #fff;
            text-decoration: none;
        }

        body {
            animation: anim 15s infinite;

        }

        .data-text {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
            width: 40%;
            text-align: justify;
            margin: 150px auto;

        }

        @keyframes anim {
            0% {
                background: #2E5266;
            }

            20% {
                background: #6E8898;
            }

            40% {
                background: #9FB1BC;
            }

            60% {
                background: #D3D0CB;
            }

            80% {
                background: #E2C044;
            }

            100% {
                background: #0CA98A;
            }
        }

        .skew {
            margin-top: -200px;
            padding: 200px 0;
            transform: skew(0deg, -10deg);
            background: #6d1d1d;
        }

        .content {
            text-align: center;
            transform: skew(0deg, 10deg);
            padding-top: 100px;
            padding-bottom: 100px;
        }

        h1 {
            font-weight: lighter;
            font-size: 40px;
        }

        p {
            font-weight: lighter;
            font-size: 20px;
        }
    </style>
</head>

<body>

    <div class="skew">
        <div class="content">
            <h1 class="text-white">Skewed background</h1>
            <p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quis voluptatem
                eligendi assumenda
                labore illum molestiae id mollitia architecto incidunt, repellendus nihil quasi ipsa, nemo
                quaerat. Incidunt delectus odit doloribus.</p>

        </div>
    </div>

    <section role="main" class="text-white footer p-5">
        <div class="pb-5">
            <div class="py-5">
                <div class="py-5">
                    <div class="py-5">
                        <div class="py-5">
                            <h1 class="cover-heading">Cover Headline</h1>
                            <p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam adipisci
                                maiores aut inventore, dolores at earum qui repellat fugiat quia provident debitis?
                                Corporis velit assumenda quis quidem quo deserunt quasi.</p>
                            <p class="lead">
                                <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </section>


    <nav class="site-header sticky-top py-1">
        <div class="container d-flex flex-column flex-md-row justify-content-between">
            <a class="py-2" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img"
                    viewBox="0 0 24 24" focusable="false">
                    <title></title>
                    <circle cx="12" cy="12" r="10" />
                    <path
                        d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
                </svg>
            </a>
            <a class="py-2 d-none d-md-inline-block" href="#">Logo</a>
        </div>
    </nav>

    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
        <div class="col-md-5 p-lg-5 mx-auto my-5">
            <h1 class="display-4 font-weight-normal">Second Headline</h1>
            <p class="lead font-weight-normal">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
                magni delectus autem enim praesentium, maxime unde voluptatum.</p>
            <a class="btn btn-outline-secondary" href="#">Coming soon</a>
        </div>
        <div class="product-device shadow-sm d-none d-md-block"></div>
        <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
    </div>

    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
        <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
            <div class="my-3 py-3">
                <h2 class="display-5">Headline</h2>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi cumque nam, explicabo
                    doloremque vitae unde voluptas quaerat minima alias!</p>
            </div>
            <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
            </div>
        </div>
        <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
            <div class="my-3 py-3">
                <h2 class="display-5">Headline</h2>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi cumque nam, explicabo
                    doloremque vitae unde voluptas quaerat minima alias!</p>
            </div>
            <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
            </div>
        </div>
    </div>
    <section class="jumbotron text-center">
        <div class="container">
            <h1 class="jumbotron-heading">Content</h1>
            <p class="lead text-muted">
                eligendi sed et in laudantium provident, accusamus com cupiditate tenetur dicta facilis, quidem, ipsum
                rem velit eos quos quas?</p>
            <p>
                <a href="#" class="btn btn-primary my-2">Call</a>
                <a href="#" class="btn btn-secondary my-2">Mail</a>
            </p>
        </div>
    </section>

    <div class="album py-5 bg-light">
        <div class="container">

            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                            xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                            role="img" aria-label="Placeholder: Thumbnail">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
                                dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
                                quaerat, ullam deserunt amet unde omnis delectus dolorem adipisci, dolor deleniti
                                doloremque reiciendis saepe placeat nobis corrupti alias laboriosam? Voluptatum,
                                accusamus.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                            xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                            role="img" aria-label="Placeholder: Thumbnail">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
                                dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit quidem
                                voluptates ut numquam libero eum, eveniet nisi iure vel sint soluta facilis sunt
                                excepturi saepe sapiente, qui molestias earum dolor.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                            xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"
                            role="img" aria-label="Placeholder: Thumbnail">
                            <title>Placeholder</title>
                            <rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
                                dy=".3em">Thumbnail</text>
                        </svg>
                        <div class="card-body">
                            <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut porro
                                magni modi deserunt cupiditate dignissimos, possimus nostrum consequatur. Laudantium
                                atione architecto laboriosam odio quos quae blanditiis quo quaerat voluptatibus ullam..
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container m-5 p-5">
                    <form>
                        <div class="form-group row">
                            <label for="fullname" class="col-sm-2 col-form-label">Full Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="fullName" placeholder="Full Name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="message" class="col-sm-2 col-form-label">Message</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="message" rows="5"></textarea>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>

                <footer>

                    Copyright (c) Footer Content Here..
                </footer>
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
                    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                    crossorigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                    crossorigin="anonymous"></script>

</body>

</html>

* Please refer to the screenshot of the code for understanding the indentation of the code and plz rate the answer.

0 0
Add a comment
Know the answer?
Add Answer to:
Final Project can be of any website. basically create any website using custom CSS theme that...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Can you create a basic website using HTML or CSS that doesn’t require a web server...

    Can you create a basic website using HTML or CSS that doesn’t require a web server to run. Couldn't you just store the html or css doc in File/Window Explorer? Would it only need to be stored on a web server if I wanted to view it through the Internet?

  • I need a small website that to where I need to interlink a CSS file into...

    I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with the CSS attributes show up in the browser when I do click the "open with" after I click on the saved HTML file. Basically when I copy files from the internet, to see if the HTML and CSS would interlink and run, the HTML would run...

  • i want to create a website for my project . all 48% 2:02 a Expert Q&A...

    i want to create a website for my project . all 48% 2:02 a Expert Q&A course, you should make a personal website for yourself The completod website should have a minimem of 4 pages. You con decide abour the content and organiration of the pages as you like .The overall design of your webeite will be evalusted (inclading olor schems, creativity, layout, originality, etc) The visual appearance of your website is important All papes should pass validation The website...

  • Can someone plz help me??? I would like a website that has to do with guitars...

    Can someone plz help me??? I would like a website that has to do with guitars or something to do with music, someone asked me what kind of website I would like to have and that would be awesome. The attributes to be included, are below. I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with...

  • Could you create a website based on html and css? Details in the below: Note: You...

    Could you create a website based on html and css? Details in the below: Note: You can put link that I can download that folder Based on Project 2-1, do the necessary changes to have a webpage structure of a header, main, and footer sections. Then: •Set the width of the page to 700px •Use the font family starting with Verdana •Move one of the images from your Project 2-1 to the header. •Set the width of the header image...

  • help please Perform the following steps: a) Using NetBeans, Create a New Java Application Project with...

    help please Perform the following steps: a) Using NetBeans, Create a New Java Application Project with Project Name BasePlusCommission Employee Test with Create Main Class check box selected. Create comments to form a descriptive header that has the course name, your name, the assignment title, and a pledge that you have neither received nor provided help to any person. Assignments submitted without this pledge will not be graded. When you have completed the steps (b) and (c) below, you will...

  • Do the following using JAVA language. a) Create an Error. (You can create any error.) b)...

    Do the following using JAVA language. a) Create an Error. (You can create any error.) b) Handle the error. c) Create a custom exception which will give a kind message. d) Handle both of the errors by using only one try-catch block.

  • in java : Create Java Application you are to create a project using our designated IDE...

    in java : Create Java Application you are to create a project using our designated IDE (which you must download to your laptop). Create the code to fulfill the requirements below. Demonstrate as stipulated below. Create a Main Application Class called AddressBookApplication (a counsole application / command line application). It should Contain a Class called Menu that contains the following methods which print out to standard output a corresponding prompt asking for related information which will be used to update...

  • This week, you will start a course project. For this project, you will design and develop...

    This week, you will start a course project. For this project, you will design and develop a small website for a travel company. You will develop this website across the span of the course, building new project components each week, until you have a live, hosted website at the end of the course. This project is designed to replicate real-life situations where the clients provide only a few of their requirements and expect a prototype to be developed. Scenario Express...

  • I need to built this website using only CSS GRID for the placement of the stuff....

    I need to built this website using only CSS GRID for the placement of the stuff. Im having some trouble so i would like some help. Preferably built on codepen but you can also develop it locally. The pizza picture you can use any pizza picture you can find on the internet. Joe's Pizza Co. Home About News Menu Locations New York's Best Pizza joe's pepperoni special Welcome to Joe's Pizza Co. Special Offers We pride ourselves on serving up...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT