API.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="API.css">
    <title>pexel/api/</title>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-item">
            <img src="pexel.png" alt="pexel logo" class="pexel-logo">

            <div class="input-box">
                <div class="dropdownPart">
                    <img src="picture_logo.svg" alt="pic_logo">
            <select name="input-box" >
                <option>photos</option>
                <option>videos</option>
            </select>
                </div>
            <input class="input" placeholder="search for free photos">
            
        </div>

            <div class="nav_container">
                <select name="explore" id="Explore">
                    <option value="#">Discover Photos</option>
                    <option value="#">Leaderboard</option>
                    <option value="#">Challenges</option>
                    <option value="#">Free Videos</option>
                    <option value="#">Pexel blog</option>
                </select>
                <h1>License</h1>
                <img src="Ellipsis.svg" alt="icon">
                <img src="Bell.svg" alt="Notifications">
                <img style="height: 10%; width: 10%; padding: 0; margin: 0; border: none;" class="user" src="user.svg" alt="User">
                <button>Upload</button>
            </div>
        </div>
    </nav>

    <div class="First_container">
        <div class="leftpart">
            <h1 style="font-weight: 450; margin-top: 100px;">Start building with the power of Pexels</h1>
            <p style="font-weight: 400; font-size: 18px;">Give your users access to our entire photo and video library without leaving your app or website. It’s free and seamlessly integrates with just a few lines of code. Get started and immediately receive your unique API key.</p>
            <div class="buttons">
                <button style="padding: 15px 27px;">
                    Your API Key
                </button>
                <button class="Trans_btn">
                    Documentaiton
                </button>
            </div>
            <p style="color: rgb(0, 0, 0, 0.45); margin-top: 40px;">Do you have a high traffic platform? Get in touch with us to unlock unlimited free requests and explore custom builds at <span style="text-decoration: underline dotted;">api@pexels.com </span></p>
        </div>
        <div class="rightpart">
            <video src="Pexel_video1.mp4" autoplay loop muted playsinline></video>
        </div>
        
    </div>

    <div class="toolPics">
        <img src="pic1.svg" alt="pic_logo">
        <img src="Pic2.svg" alt="pic_logo">
        <img src="PIc3.svg" alt="pic_logo">
        <img src="Pic4.svg" alt="pic_logo">
        <img src="pic5.svg" alt="pic_logo">
        <img src="pic6.svg" alt="pic_logo">
        <img src="pic7.svg" alt="pic_logo">
        <img src="pic8.svg" alt="pic_logo">
        <img src="pic9.svg" alt="pic_logo">
        <img src="pic10.svg" alt="pic_logo">
    </div>

    <div class="Sec_container">
        <div class="video">
            <div style="border-radius: 30px; overflow: hidden; display: inline-block;">
            <video src="Pixel_video2.mp4" autoplay loop muted playsinline style="width: 100%;"></video>
            </div>
        </div>
        <div class="rightpart">
            <h1 style="font-size: 40px; font-weight: 500;">Seamless Integration</h1>
            <p>Our API is used by first-time coders to tech giants. Built with developers and users in mind, our API is reliable, easy to integrate and gives your users unlimited creative options without disrupting their workflow.</p>
        </div>
    </div>

    <div class="third_container">
        <div class="sub_container">
            <img src="S_C Pic1.svg" alt="pic">
            <h2>Hand-Selected, Updated Daily</h2>
            <p>All content is selected and tagged by our curation team to ensure quality, freshness and searchability.</p>
        </div>
        <div class="sub_container">
            <img src="S_C Pic2.svg" alt="pic">
            <h2>28 Languages</h2>
            <p>Our visually diverse library is searchable in 28 languages and contributed by photographers across 170 countries.</p>
        </div>
        <div class="sub_container">
            <img src="S_C Pic3.svg" alt="pic">
            <h2>Diverse & Inclusive</h2>
            <p>Words and images matter. Whether searching for love or leadership, our algorithm is consciously designed to produce results that reflect and celebrate the diversity of our world.</p>
        </div>
        <div class="sub_container">
            <img src="S_C Pic4.svg" alt="pic">
            <h2>Unmatched Search</h2>
            <p>Our algorithm has been vetted by 100M+ users and learns with each new search. More than 15B requests are processed by our servers each month with an uptime of over 99.99%.</p>
        </div>
    </div>

    <h1>Most popular API endpoints</h1>

    <div class="containers_3">
        <div  class="sub_container2">
            <img style="width: 20%;" src="E_P pic1.svg" alt="pic">
            <h2>Curated content</h2>
            <p>The most relevant, engaging content each day directly in your app or website. Our feed of curated content is continuously updated, so you’re always in the loop.</p>
        </div>
        <div class="sub_container2">
            <img style="width: 20%;" src="E_P pic2.svg" alt="pic">
            <h2>Image & Video Search</h2>
            <p>Search for a specific term to show the most relevant photos and videos to your user in a fraction of a second. Limit the results to only show what’s relevant like vertical video or horizontal photos.</p>
        </div>
        <div class="sub_container2">
            <img style="width: 20%;" src="E_P pic3.svg" alt="pic">
            <h2>Collections</h2>
            <p>The most relevant, engaging content each day directly in your app or website. Our feed of curated content is continuously updated, so you’re always in the loop.</p>
        </div>
    </div>
    <div class="btn">
    <button class="Trans_btn">See all images & video API endpoints</button>
    </div>

    <div class="forth_container">
        <div class="inner_box">
            <h1 style="margin: 0 0 50px 0; text-align: left; font-weight: 500;">Frequently Asked Questions</h1>
            <div class="Ques">
            <h2>Are there any limits or restrictions on calls?</h2>
            <p>Requesting an API Key has a default limit. If you have a larger application and plan to exceed the default API limits, please contact us at api@pexels.com</p>
            </div>
            <div class="Ques">
                <h2>Do I have to pay for higher limits?</h2>
                <p>Nope! If you’re able to provide and show acceptable attribution to Pexels and our contributors, limits can be lifted free of charge</p>
            </div>
            <div class="Ques">
                <h2>Do we have to include attribution?</h2>
                <p>Please! Always credit our photographers when possible (e.g. "Photo by John Doe on Pexels" with a link to the photo page on Pexels). If you’re unable to include a full link back, please use a text link (e.g. "Photos provided by Pexels")</p>
            </div>
            <div class="Ques">
                <h2>Can I include the Pexels logo in my app or on my site?</h2>
                <p>Yes, we’d be delighted for you to make use of the Pexels logo but please don’t use it as an app icon. You can find our logo here in white or black.</p>
            </div>
            <div class="Ques" style="border: none;">
                <h2>I have a similar marketplace or photo library to Pexels, can I use the API to add your images?</h2>
                <p>We kindly ask that you do not copy the core functionality of Pexels. Please note that wallpaper apps are not supported within our eligibility requirements.</p>
            </div>
            <div class="btn" >
            <button style="margin-top: 35px;" class="Trans_btn">See all FAQs</button>
            </div>
        </div>
    </div>
    <div class="AnimationPart">
    <div class="floating_box">
        <img src="wordpress.svg" alt="pic">
        <img src="typeform2.svg" alt="pic">
        <img src="sketch3.svg" alt="pic">
        <img src="surveymonkey4.svg" alt="pic">
        <img src="canva5.svg" alt="pic">
        <img src="wordpress6.svg" alt="pic">
    </div>
    <div class="Overlay_box">
        <div class="leftPart">
            <h1 style="margin: 0 0 20px 0; text-align: left; font-weight: 500;">Developers Showcase</h1>
            <p style="margin: 0;">From entrepreneurs and educators to writers and developers, our image and video API helps millions of people find that little extra something to bring their ideas to life.</p>

            <div style="margin: 20px 0 0 0;" class="buttons">
                <button style="padding: 15px 27px;">
                    Your API Key
                </button>
                <button class="Trans_btn">
                    Documentaiton
                </button>
            </div>
            <p  style=" margin: 20px 0 0 0; color: rgb(0, 0, 0, 0.45);">Learn more about the possibilities to partner with Pexels  <span style="text-decoration: underline dotted;">here</span></p>
        </div>
        <div class="RightPart">
            <img src="HolePic.png" alt="bg">
        </div>
    </div>
    </div>

<div  class="fifth_container">
    <div class="small_box">
        <img src="F_C pic1.svg" alt="pic">
        <h2>Airtable</h2>
        <p>Airtable uses our API to make it fast (and fun!) to find the perfect photo or video for any project.</p>
    </div>
    <div class="small_box">
        <img src="F_C pic2.svg" alt="pic">
        <h2>Canva</h2>
        <p>Canva users maximized their creative ingredients by embedding the entire Pexels video and image library</p>
    </div>
    <div class="small_box">
        <img src="F_C pic3.svg" alt="pic">
        <h2>Sketch</h2>
        <p>No more wasting time and disrupting your workflow searching for filler images! Sketch uses our API to make light work of image heavy UI projects.</p>
    </div>
    <div class="small_box">
        <img src="F_C pic4.svg" alt="pic">
        <h2>Typeform</h2>
        <p>Typeform uses our video API to give their users more ways to make their surveys beautiful and engaging.  </p>
    </div>
</div>

<div class="sixth_container">
    <div class="leftwalaPart">
        <h1>Where stories come together.</h1>
        <div class="DoButton">
            <button>Download on iOS</button>
            <button>Download on Android</button>
        </div>
        <div class="logos">
            <ion-icon name="logo-instagram"></ion-icon>
            <ion-icon name="at-outline"></ion-icon>
            <ion-icon name="logo-youtube"></ion-icon>
        </div>
    </div>
    <div class="secWalaPart">
        <h5 >PEXELS</h5>
        <p style="margin-top: 0;">Free Stock Photos</p>
        <p>Free Videos</p>
        <p>Popular Searches</p>
        <p>Collections</p>
        <p>Challenges</p>
        <p>Leaderboard</p>
        <p>Other plugins & apps</p>
    </div>
    <div class="ThirdWalaPart">
        <h5>COMPANY</h5>
        <p>About</p>
        <p>Blog</p>
        <p>Help Center</p>
        <p>Report content</p>
        <p>Become a hero</p>
        <p>Partner with pexels</p>
        <p>Image & Video API</p>
    </div>
    <div class="rightwalaPart">

    </div>
</div>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
</body>
</html>