HTML & CSS_Project_Excursion

1.In the main section, just before the content container div, add a <video> element that uses this video.

Search online for what the video element is and how to use it. Check out the autoplay and loop attributes as well.
            <video autoplay muted loop>
                <source src="https://s3.amazonaws.com/codecademy-content/projects/excursion/bg.mp4" type="video/mp4">
            </video> 

2.In the main section, inside the content container div, add text for the heading and for a button. Use CSS to style the button.

                <h1>Discover hidden places in the world around you</h1>
                <p><a class="btn" href="#">Download Excursion</a></p>

         .btn{
                background-color:#4386fc;
                color:#fff;
                font-size:16px;
                font-weight:300;
                padding:16px 26px;
                text-decoration:none
            }

           .video-section .section-content{
                position:absolute;
                top:200px;
                width:100%;
                text-align:center;
                color:#fff;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
            .video-section h1{
                color:#fff;
                font-size:50px;
                margin-top:0;
                margin-bottom:50px;
                text-shadow:0 2px 3px rgba(0,0,0,.4);
                padding: 0 40px;
            }

3.In the first supporting div, add text for the heading and paragraph.

                <h2>Your personal travel guide</h2>
                <p>Excursion remembers places you like, and recommends new points of interest around you.</p>

            .text-section{
                margin-top:100px;
                text-align:center;
                margin-bottom:130px
            }
            .text-section h2{
                font-size:48px;
                font-weight:300;
                margin-top:40px;
                margin-bottom:40px
            }
            .text-section p{
                color:#333;
                font-size:21px;
                padding: 0 30px;
            }

4.Change the background image of the feature section. Here's the image we used.

             .feature-section{
                background:url("https://s3.amazonaws.com/codecademy-content/projects/excursion/camp.png") no-repeat center center;
                background-size:cover;
                height:500px;

              }

5.In the second supporting div, add an image for binoculars, text for the subheading, and a link that says Download Excursion.

                 <p>
                    <img class="app" src="https://s3.amazonaws.com/codecademy-content/projects/excursion/binoculars.png">
                </p>
                <h2>Available for iPhone and Android</h2>
                <a class="btn" href="#">Download Excursion</a>

 

6.In the footer, add text for the copyright and color the background #eeeeee.

           <div class="container">
            <p>&copy; Excursion</p>
            </div>

           .footer{
                background-color:#eee;
                font-size:11px;
                padding:5px 0
            }