Thiết kế website giá rẻ

Question

How do I keep person on right side but not flow off to right?
I’ve tried a few different things but I can’t get it to stop flowing off the right hand side…

I’d also like to have it zoomed in on the head area all the time without having to edit the image.

I can’t submit this without adding some more text, so I’m hoping that I don’t have to do a lot more to submit this…

<head>

<title>Bootstrap demo</title>

</head>

<body>

<div

class="masthead1"

style="background-image: url('./images/GirlWithPhone.jpg');"

>

<div

class="color-overlay d-flex justify-content-center align-items-center">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</code>

<code> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="custom.css" rel="stylesheet"> </head> <body> <div class="masthead1" style="background-image: url('./images/GirlWithPhone.jpg');" > <div class="color-overlay d-flex justify-content-center align-items-center"> <h1>Test-04</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-8">col-sm-8</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> </div> <script src="{% static 'main/js/bootstrap.min.js' %}"></script> </div> </body> </code>

    <!doctype html>
    <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Bootstrap demo</title>
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
            <link href="custom.css" rel="stylesheet">
          </head>
    
    <body>
    
<div 
  class="masthead1"
  style="background-image: url('./images/GirlWithPhone.jpg');"
>
  <div 
    class="color-overlay d-flex justify-content-center align-items-center">
    <h1>Test-04</h1>  
  </div>
</div>












<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>


</div>

<script src="{% static 'main/js/bootstrap.min.js' %}"></script>  
</div>
</body>

Danh mục