ZuoTi.Pro
Question

Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
   <link href="css/bootstrap-4.0.0.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet" type="text/css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
   <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent1">
       <ul class="navbar-nav mr-auto">
       <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
       <li class="nav-item"> <a class="nav-link" href="#">Rooms</a> </li>
       <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Activities </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Indoor</a> <a class="dropdown-item" href="#">Outdoor</a></div>
   </li>
       <li class="nav-item"> <a class="nav-link" href="#">Dining</a> </li>
   </ul>
   </div>
   </nav>
       <div id="headerContent">
<video autoplay="true" loop>
<source src="assets/br.mp4" type="video/mp4">
</video>
</div>
</header>
  
   <img src = "assets/pool-relaxation.jpg" alt = "relaxation" class = "relaxation" />
   <br>
   <center><a href="#"><button>Book Now For Guest</button></a></center>
  
   <img src ="assets/award.jpg" alt = "rewards" class = "rewards" />
   <center><a href="#"><button>Awards Program</button></a></center>


   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="js/jquery-3.2.1.min.js"></script>

   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
   <footer>
                           <div class = "social">
       be social <br>
       <a href="#" class="fa fa-facebook"></a>
       <a href="#" class="fa fa-twitter"></a>
       <a href="#" class="fa fa-instagram"></a>
       </div>
       <address>

           Contact Us <br>
           72 Lake Blvd, Middletown, NJ 07748 <br>
           <a href="tel:+1732-973-0974"> 732-973-0974</a> <br>
<a href="mailto:[email protected]">[email protected]</a> <br>
       </address>

</footer>
</body>
</html>

style.css

@charset "utf-8";

body header nav li {
   list-style-type: none;
}

.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}

/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}

/* Instagram */
.fa-instagram {
background: #55ACEE;
color: white;
}

#headerContent {
width: 100%;
height: 80%;
overflow: hidden;
position: relative;
}

video {
position: inherit;
min-width: 100%;
overflow: hidden;
z-index: -1;
}

.social {
   float: left;
}

address {
   float: right;
}

footer {
   background-color: rgba(191,191,191,1.00);
}


.navbar.navbar-expand-lg.navbar-light.bg-light {
position: fixed;
width: 100%;
}

button {
   clear: both;
   margin-right: 1000px;
}

.relaxation {
   float: left;
width: 33.33%;
padding: 5px;
}

.rewards {
   float: left;
width: 33.33%;
padding: 5px;
}

Book Now For Guest Awards Program

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<!----
I have organized your site in a well format
i dont know you will like it or not
but your requirments are fullfilled

No change made in style.css file
That file is not used

-->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Lakeside Resort Spot</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Rooms</a></li>
<li><a href="#">Activity</a></li>
       <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Activity
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li><a href="#">Dining</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>


  
  
</header>

<style>
.btn {position:absolute; top:50%;left:25%;}
video {
width: 100%;
height: auto;
}
</style>

<br/>
<br/>
<!----
I have placed all the divs inside container
there is a class row
which holds columns , bootstrap has columns class, if you dont know google them
col-md-12 means cover medium size column with 12 grids..
there are 12 grids in total

Cols are used inside row class.
col-md-6 means , make a column that use 6 grids. that means there can be two colums in a row
becuase one row contains 12 grids
-->
<div class = "container">
   <div class = "row">
       <div class= "col-md-12">
           <video width="400" controls>
           <!-- Add your own video from your system -->
           <source src="" type="video/mp4">
           </video>
       </div>
   </div>
   <br/>
   <div class ="row">
       <div class = "col-md-6">
           <img width="400px" src = "https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "relaxation" />
           <br>
           <a href="#"><button class ="btn btn-success">Book Now For Guest</button></a>
       </div>
      
       <div class = "col-md-6">
           <img width="400px" src ="https://data.whicdn.com/images/72474977/large.jpg" alt = "rewards" />
           <a href="#"><button class="btn btn-success">Awards Program</button></a>
       </div>
   </div>
  
<br/><hr/>

  
<footer>
<div class = "social">
<b>be social</b> <br>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
<address>

Contact Us <br>
72 Lake Blvd, Middletown, NJ 07748 <br>
<a href="tel:+1732-973-0974"> 732-973-0974</a> <br>
<a href="mailto:[email protected]">[email protected]</a> <br>
</address>

</footer>
</div><!-- End of container -->
</body>
</html>

====================================

Output

Lakeside Resort Spot Home Rooms Activity Activity ▼ Dining つLogin Sign Up DE3 0:00 tivate Windows to Settings to activate Win

4) 『」 0:00 Book Now For Guest Awards Program Contact Us 72 Lake Blvd MiddletoWn N4-9WS8 732-973-0974o Settings to activate Wi

Please give thumbs up :)

0 0
Add a comment
Know the answer?
Add Answer to:
Please edit and add all the code needed to make the images side by side and to put the buttons in...
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

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • find what kind of weakness you can find in the flowing code? You can find below...

    find what kind of weakness you can find in the flowing code? You can find below the list of issues: Hardcoded credentials or secrets Information leak Missing security flags Weak password hashing mechanism Cross-Site Scripting No CSRF protection Directory listing Crypto issue Signature bypass Authentication bypass Authorization bypass Remote Code Execution <?php ?> <!-- PentesterLab --> <html> <head> <title>[PentesterLab] Code Review</title> <link rel="stylesheet" media="screen" href="/css/bootstrap.css" /> <link rel="stylesheet" media="screen" href="/css/pentesterlab.css" /> </head> <body> <div class="container-narrow"> <div class="header"> <div class="navbar navbar-fixed-top">...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in...

    This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in code, but they don't work. In HTML, we need to add < link > to display bootstrap, but I don't know what to do in PHP. <?php $servername = "fdb29.awardspace.net"; $username = "3515976_assignment9"; $password = "Becky516."; $database = "3515976_assignment9"; $port = "3306"; // Create connection $dbconn = mysqli_connect($servername, $username, $password, $database, $port); if($dbconn){ }else{ die("Connection Failed: ".mysqli_connect_error()); } $myQuery = "SELECT p_name, p_desc, p_img,...

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

    Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head>     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="style.css">     <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>     <script src="./bootstrap/js/bootstrap.js"></script>     <meta charset="UTF-8">     <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">     <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5>     <nav class="my-2 my-md-0 mr-md-3">         <a class="p-2 text-dark" href="index.html">Home</a>         <a class="p-2 text-dark" href="about.html">About Us</a>         <a class="p-2 text-dark" href="products.html">Products</a>         <a class="p-2 text-dark"...

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

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
ADVERTISEMENT