Advertisement
Guest User

Untitled

a guest
Jan 9th, 2023
261
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.05 KB | None | 0 0
  1. Provide a full webpage based on Bootstrap 5 framework:
  2.  
  3. A page about bird photography. I live in Newfoundland where there are many birds species you don’t see anywhere else. I like to photograph birds by the ocean, in the hills, downtown, and in my backyard. I’ve been shooting with the same analog camera for over 30 years and I just love the grain it adds to my photos, and the rich colors in shadows that you just don’t get with digital. I want a section to be about my camera.
  4. I sell some of my work on canvas for $50 dollars including shipping and want a section in my webpage where people can buy my highlighted works.
  5.  
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <title>Bird Photography</title>
  10.     <meta charset="utf-8">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
  13.     <style type="text/css">
  14.     body {
  15.         font-family: sans-serif;
  16.         margin: 0;
  17.         padding: 0;
  18.     }
  19.     .hero {
  20.         background-image: url("hero.jpg");
  21.         background-size: cover;
  22.         background-position: center;
  23.         height: 400px;
  24.     }
  25.     .about {
  26.         padding: 50px 0;
  27.     }
  28.     .about-content {
  29.         max-width: 500px;
  30.         margin: 0 auto;
  31.     }
  32.     .gallery {
  33.         padding: 50px 0;
  34.     }
  35.     .gallery-item {
  36.         background-color: #f5f5f5;
  37.         padding: 10px;
  38.     }
  39.     .gallery-item img {
  40.         max-width: 100%;
  41.     }
  42.     .camera {
  43.         padding: 50px 0;
  44.     }
  45.     .camera-item {
  46.         background-color: #f5f5f5;
  47.         padding: 10px;
  48.     }
  49.     .contact {
  50.         background-color: #f5f5f5;
  51.         padding: 50px 0;
  52.     }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="hero"></div>
  57.  
  58.     <div class="about">
  59.         <div class="container">
  60.             <div class="row">
  61.                 <div class="col-md-12">
  62.                     <h1 class="text-center">Welcome to Bird Photography</h1>
  63.                     <div class="about-content">
  64.                         <p>I live in Newfoundland where there are many birds species you don’t see anywhere else. I like to photograph birds by the ocean, in the hills, downtown, and in my backyard. I’ve been shooting with the same analog camera for over 30 years and I just love the grain it adds to my photos, and the rich colors in shadows that you just don’t get with digital.</p>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.     </div>
  70.  
  71.     <div class="gallery">
  72.         <div class="container">
  73.             <div class="row">
  74.                 <div class="col-md-3">
  75.                     <div class="gallery-item">
  76.                         <img src="image1.jpg" alt="">
  77.                     </div>
  78.                 </div>
  79.                 <div class="col-md-3">
  80.                     <div class="gallery-item">
  81.                         <img src="image2.jpg" alt="">
  82.                     </div>
  83.                 </div>
  84.                 <div class="col-md-3">
  85.                     <div class="gallery-item">
  86.                         <img src="image3.jpg" alt="">
  87.                     </div>
  88.                 </div>
  89.                 <div class="col-md-3">
  90.                     <div class="gallery-item">
  91.                         <img src="image4.jpg" alt="">
  92.                     </div>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.     </div>
  97.  
  98.     <div class="camera">
  99.         <div class="container">
  100.             <div class="row">
  101.                 <div class="col-md-12">
  102.                     <h1 class="text-center">My Camera</h1>
  103.                     <div class="camera-item">
  104.                         <p>I shoot with a Canon T70 camera and an old 50mm 1.4 lens. The camera is from the 1980’s and has a unique look and feel to it. I love the grain and the contrast of the photos and the way the lens renders the light. I’ve been using this camera for over 30 years and it’s still going strong.</p>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110.  
  111.     <div class="contact">
  112.         <div class="container">
  113.             <div class="row">
  114.                 <div class="col-md-12">
  115.                     <h1 class="text-center">Buy My Work</h1>
  116.                     <div class="contact-content">
  117.                         <p>I sell some of my work on canvas for $50 dollars including shipping. If you would like to purchase any of my work, please fill out the contact form below and I will get back to you as soon as possible.</p>
  118.                     </div>
  119.                     <form>
  120.                         <div class="form-group">
  121.                             <label for="name">Name:</label>
  122.                             <input type="text" name="name" class="form-control" placeholder="Enter your name">
  123.                         </div>
  124.                         <div class="form-group">
  125.                             <label for="email">Email:</label>
  126.                             <input type="email" name="email" class="form-control" placeholder="Enter your email">
  127.                         </div>
  128.                         <div class="form-group">
  129.                             <label for="message">Message:</label>
  130.                             <textarea name="message" class="form-control" rows="5" placeholder="Enter your message"></textarea>
  131.                         </div>
  132.                         <button type="submit" class="btn btn-primary">Submit</button>
  133.                     </form>
  134.                 </div>
  135.             </div>
  136.         </div>
  137.     </div>
  138.  
  139.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  140.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  141. </body>
  142. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement