[php] titl

Viewer

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.  
  8.   <title>About</title>
  9.  
  10.   <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
  11.   <link rel="stylesheet" type="text/css" href="./css/style.css" />
  12.  
  13.   <!-- font awsome for icons -->
  14.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  15.  
  16.   <style>
  17.     .welcome {
  18.       height: max-content;
  19.       margin: 5rem 0;
  20.       padding: 0 3rem;
  21.       display: flex;
  22.       flex-direction: row;
  23.       justify-content: space-between;
  24.     }
  25.  
  26.     .photo {
  27.       /* background-color: #8de5eb; */
  28.       width: 50%;
  29.     }
  30.  
  31.     .photo img {
  32.       object-fit: cover;
  33.       object-position: center;
  34.       width: 100%;
  35.       height: 95%;
  36.       border-radius: 50%;
  37.       outline-color: #fddfae;
  38.       outline-width: 2px;
  39.       outline-style: solid;
  40.       outline-offset: 15px;
  41.     }
  42.  
  43.     .content {
  44.       width: 45%;
  45.       margin-left: 3rem;
  46.     }
  47.  
  48.     .content ul {
  49.       padding-left: 0;
  50.       list-style-position: inside;
  51.       margin-bottom: 2rem;
  52.       line-height: 30px;
  53.     }
  54.  
  55.     section {
  56.       background-color: #FEF5EB;
  57.       display: flex;
  58.       flex-direction: row;
  59.       justify-content: space-between;
  60.       align-items: flex-start;
  61.       padding: 6rem 8rem;
  62.     }
  63.  
  64.     .square {
  65.       width: 30rem;
  66.       height: 20rem;
  67.       padding: 50px 40px;
  68.       background-color: #e9a537;
  69.       text-align: center;
  70.     }
  71.  
  72.     .square h1 {
  73.       font-size: 60px;
  74.       margin: 0;
  75.       color: whitesmoke;
  76.     }
  77.  
  78.     .square h1#number {
  79.       font-size: 120px;
  80.       text-shadow: 5px 2px 0 #cf9943;
  81.       margin-bottom: 1rem;
  82.     }
  83.  
  84.     .content.second {
  85.       width: 90%;
  86.     }
  87.  
  88.  
  89.     /* Medium devices (tablets, 820px and down) */
  90.     @media (max-width: 820px) {
  91.       .welcome {
  92.         padding: 0 0;
  93.         flex-direction: column;
  94.         height: max-content;
  95.       }
  96.  
  97.       .photo {
  98.         width: 100%;
  99.         display: flex;
  100.         justify-content: center;
  101.         align-items: center;
  102.       }
  103.  
  104.       .photo img {
  105.         height: 545px;
  106.         width: 545px;
  107.       }
  108.  
  109.       .content {
  110.         width: 100%;
  111.         margin-left: 0;
  112.         margin-top: 3rem;
  113.       }
  114.  
  115.       section {
  116.         padding: 6rem 2rem;
  117.       }
  118.  
  119.       .square {
  120.         width: 15rem;
  121.       }
  122.  
  123.       .content.second {
  124.         margin-left: 1rem;
  125.         margin-top: 0;
  126.       }
  127.  
  128.       .square h1 {
  129.         font-size: 45px;
  130.       }
  131.  
  132.       .square h1#number {
  133.         font-size: 100px;
  134.         text-shadow: 5px 2px 0 #cf9943;
  135.       }
  136.     }
  137.  
  138.     /* Small devices (phones, 576px and down) */
  139.     @media (max-width: 576px) {
  140.       .photo img {
  141.         height: 280px;
  142.         width: 280px;
  143.       }
  144.  
  145.       section {
  146.         flex-direction: column;
  147.       }
  148.  
  149.       .square {
  150.         height: 15rem;
  151.       }
  152.  
  153.       .square h1 {
  154.         font-size: 40px;
  155.       }
  156.  
  157.       .content.second {
  158.         width: 100%;
  159.         margin-left: 0;
  160.       }
  161.  
  162.  
  163.     }
  164.   </style>
  165. </head>
  166.  
  167. <body>
  168.   <!-- HEADER -->
  169.   <header>
  170.     <div id="menuIcon">
  171.       <i class="fas fa-bars fa-lg"></i>
  172.     </div>
  173.     <nav>
  174.       <img src="./images/Logo_black.png" alt="Logo">
  175.  
  176.       <ul id="sideNav">
  177.         <a href="./index.html">
  178.           <li>Home</li>
  179.         </a>
  180.         <a href="./about.html">
  181.           <li id="active-page">About</li>
  182.         </a>
  183.         <a href="./services.html">
  184.           <li>Services</li>
  185.         </a>
  186.         <a href="./instructors.html">
  187.           <li>Instructors</li>
  188.         </a>
  189.         <a href="./contact.html">
  190.           <li>Contact</li>
  191.         </a>
  192.         <a href="./team.html">
  193.           <li>Team</li>
  194.         </a>
  195.       </ul>
  196.     </nav>
  197.   </header>
  198.  
  199.   <!-- SECTION -->
  200.   <section id="banner">
  201.     <h1>About</h1>
  202.     <h3>Equestrian Elite // <span> About</span></h3>
  203.   </section>
  204.  
  205.   <div class="container">
  206.     <div class="welcome">
  207.       <div class="photo">
  208.         <img src="./images/about.jpeg" alt="">
  209.       </div>
  210.       <div class="content">
  211.         <h3 class="subTitle">// Welcome To Equestrian Elite</h3>
  212.         <h1 class="title">If You Need Training For Horse Riding.</h1>
  213.         <p> Our modern and fully equipped equestrian centre is happy to offer everything from polo and show-jumping to horse riding trips across the hills and mountains. Energise your mind, body and soul with a visit to our spacious & accommodating center. At our centre you will acquire new riding skills or simply will have a chance to relax in a good atmosphere.</p>
  214.  
  215.         <p>The program is taught by experienced staff and caters to all riding abilities, from beginners to advanced.
  216.         </p>
  217.  
  218.         <ul>
  219.           <li>Professional Trainers</li>
  220.           <li>Healthy and charming horse</li>
  221.         </ul>
  222.  
  223.         <a class="btn" href="./services.html">Our Services</a>
  224.  
  225.       </div>
  226.     </div>
  227.   </div>
  228.  
  229.   <section>
  230.     <div class="square">
  231.       <h1 id="number">25 +</h1>
  232.       <h1>Years Of experience</h1>
  233.     </div>
  234.  
  235.     <div class="content second">
  236.       <h3 class="subTitle">// WORK WITH US</h3>
  237.       <h1 class="title">Why Choose Us?</h1>
  238.       <p> At Equestrian Elite, we are passionate about horses and the equestrian lifestyle. We offer a range of services
  239.         and products to help you and your horse achieve your goals and enjoy the ride.</p>
  240.  
  241.       <p>We have over 25 years of experience in the Morgan breed, and we are experts in equine training and lessons. We
  242.         can help you improve your riding skills, learn new disciplines, and prepare for competitions.
  243.       </p>
  244.  
  245.       <p>If you are looking for a place where you can pursue your passion for horses, look no further than Equestrian
  246.         Elite. Contact us today to schedule your first ride and join our equestrian community. We look forward to
  247.         hearing from you!</p>
  248.  
  249.     </div>
  250.   </section>
  251.  
  252.   <!-- FOOTER -->
  253.   <footer>     
  254.       <div class="social-media">
  255.         <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a>
  256.         <a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
  257.         <a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
  258.       </div>
  259.       <p>© Equestrian Elite 2023 | All Right Reserved</p>
  260.   </footer>
  261.  
  262.   <script src="./js/mobileSideNav.js"></script>
  263. </body>
  264.  
  265. </html>

Editor

You can edit this paste and save as new:


File Description
  • titl
  • Paste Code
  • 02 May-2024
  • 6.46 Kb
You can Share it: