- 掃描 ID：
- e549b556-cc70-4472-b409-2584c5d41930已完成
- 已提交的 URL：
- https://ppc-overwatch.com/
- 報告完成時間：
連結 · 找到 1 個
從頁面中識別的傳出連結
| 連結 | Text |
|---|---|
| https://firmbee.com/solutions/free-invoicing-app-billing-software | Firmbee.com |
JavaScript 變數 · 找到 17 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| $ | function |
| jQuery | function |
| uidEvent | number |
| bootstrap | object |
| Popper | function |
| jQueryBridget | function |
| EvEmitter | function |
主控台記錄訊息 · 找到 7 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| log | javascript |
|
| error | network |
|
HTML
頁面的原始 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.0">
<meta name="author" content="Firmbee.com - Free Project Management Platform for remote teams">
<title>Name of company</title>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<nav id="navbar" class="navbar navbar-expand-lg position-fixed top-0 w-100 py-5 line-bg">
<div class="container">
<a class="navbar-brand" href="#">
<span class="highlighted">Ca</span>therine <span class="highlighted">Sm</span>ith <span class="highlighted">/</span> Graphic Designer
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-list"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-item nav-link px-4 active" href="#home">Home</a>
<a class="nav-item nav-link px-4" href="#portfolio">Portfolio</a>
<a class="nav-item nav-link px-4" href="#expertize">Work</a>
<a class="nav-item nav-link px-4" href="#about">About</a>
<a class="nav-item nav-link px-4" href="#contact">Contact</a>
</div>
</div>
</div>
</nav>
<header id="home">
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>
<span class="highlighted">Wo</span>rks <br>
Creatively
</h1>
<a href="#portfolio"> <i class="bi bi-arrow-down"></i> </a>
</div>
</div>
</header>
<main>
<section id="portfolio">
<div class="portfolio bg-white py-5">
<div class="container">
<div class="row justify-content-between align-items-center menu">
<div class="col-4">
<h1><span class="highlighted">My</span> portfolio</h1>
</div>
<div class="col-lg-6 text-center">
<div id="filters" class="row">
<div class="col">
<button class="btn-portfolio active" data-filter="*">All</button>
</div>
<div class="col">
<button class="btn-portfolio" data-filter=".c1">Web design</button>
</div>
<div class="col">
<button class="btn-portfolio" data-filter=".c2">Brand</button>
</div>
<div class="col">
<button class="btn-portfolio" data-filter=".c3">Social</button>
</div>
</div>
</div>
</div>
<div class="underline-dark"></div>
<div class="row grid gallery" style="position: relative; height: 369.859px;">
<div class="col-sm-3 all c2" style="position: absolute; left: 0%; top: 0px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-1.jpg" alt="Gallery image 1" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Book cover design</h3>
<p>Brand</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c1" style="position: absolute; left: 25%; top: 0px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-2.jpg" alt="Gallery image 2" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2" style="position: absolute; left: 50%; top: 0px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-3.jpg" alt="Gallery image 3" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c3" style="position: absolute; left: 75%; top: 0px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-4.jpg" alt="Gallery image 4" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2" style="position: absolute; left: 25%; top: 119.859px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-5.jpg" alt="Gallery image 5" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2" style="position: absolute; left: 75%; top: 120.359px;">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-6.jpg" alt="Gallery image 6" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2" style="position: absolute; left: 75%; top: 160.359px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(0px, -2.84217e-14px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-7.jpg" alt="Gallery image 7" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c3" style="position: absolute; left: 75%; top: 200.359px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(0px, -2.84217e-14px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-8.jpg" alt="Gallery image 8" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2 hidden" style="position: absolute; left: 75%; top: 240.359px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(0px, -2.84217e-14px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-9.jpg" alt="Gallery image 9" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c3 hidden" style="position: absolute; left: 50%; top: 250px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(180px, -9.641px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-10.jpg" alt="Gallery image 10" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2 hidden" style="position: absolute; left: 75%; top: 280.359px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(0px, -40px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-11.jpg" alt="Gallery image 11" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c3 hidden" style="position: absolute; left: 0%; top: 281.906px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(540px, -41.547px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-12.jpg" alt="Gallery image 12" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2 hidden" style="position: absolute; left: 50%; top: 290px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(180px, -49.641px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-13.jpg" alt="Gallery image 13" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
<div class="col-sm-3 all c2 hidden" style="position: absolute; left: 75%; top: 320.359px; transition-property: opacity, transform; transition-duration: 0.5s; transition-delay: 0ms; transform: translate3d(0px, -80px, 0px);">
<a href="./portfolio.html#portfolio">
<figure class="gallery__item">
<img src="img/portfolio/img-14.jpg" alt="Gallery image 14" class="gallery__img">
<div class="overlay">
<div class="text">
<div class="row">
<div class="col-7 offset-1">
<h3>Project name</h3>
<p>Category</p>
</div>
<div class="col-3"><i class="bi bi-arrow-up"></i></div>
</div>
</div>
</div>
</figure>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-3 text-center">
<button id="load-more"><i class="bi bi-arrow-down display-4"></i>
<p>Show more</p>
</button>
</div>
</div>
</section>
<section id="expertize">
<div class="expertize">
<div class="container">
<div class="row item" data-text="web-design">
<div class="col-12 col-sm-4">
<h1><span class="highlighted">We</span>b design</h1>
</div>
<div class="col-8 col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="dots">...</span>
<span class="more" style="display: none;">
Non quod repellendus sint distinctio temporibus
facere cum totam qui voluptatibus? Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Blanditiis aspernatur, corporis voluptates nulla accusamus debitis sequi
repellendus eum officiis quam aut, rem aliquam aliquid aperiam illum eius fugit vel?
Sunt ea laudantium, modi recusandae necessitatibus labore ab optio aspernatur
aperiam
quis odit qui itaque eligendi, deserunt consequuntur saepe voluptas, atque delectus.
Sit
repudiandae repellat dolore debitis?
</span>
</p>
</div>
<div class="col-3 col-sm-2 text-center">
<button class="plus" onclick="readMore('web-design')"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
<div class="underline-light"></div>
<div class="row item" data-text="brand">
<div class="col-12 col-sm-4">
<h1><span class="highlighted">Br</span>and</h1>
</div>
<div class="col-8 col-sm-6">
<p>
Aspernatur cupiditate architecto voluptatibus totam dolore distinctio.
<span class="dots">...</span>
<span class="more" style="display: none;">
Non quod repellendus sint distinctio temporibus
facere cum totam qui voluptatibus? Aspernatur cupiditate architecto voluptatibus
totam dolore distinctio veritatis earum tenetur at vero, error esse molestias
possimus fugit ad harum tempora? In.
</span>
</p>
</div>
<div class="col-3 col-sm-2 text-center">
<button class="plus" onclick="readMore('brand')"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
<div class="underline-light"></div>
<div class="row item" data-text="social-media">
<div class="col-12 col-sm-4">
<h1><span class="highlighted">So</span>cial media</h1>
</div>
<div class="col-8 col-sm-6">
<p>
Non quod repellendus sint distinctio.
<span class="dots">...</span>
<span class="more" style="display: none;">
Aspernatur cupiditate architecto voluptatibus
totam dolore distinctio veritatis earum tenetur at vero, error esse molestias
possimus fugit ad harum tempora? In.
</span>
</p>
</div>
<div class="col-3 col-sm-2 text-center">
<button class="plus" onclick="readMore('social-media')"><i class="bi bi-plus-lg"></i></button>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="about">
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-md-8">
<h1>
<span class="highlighted">My</span> name <br> is Catherine
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ab ad facilis quia nobis
possimus odit architecto animi in non fugiat debitis quod error quas placeat temporibus
porro totam dolorem consequuntur sint, modi quibusdam perspiciatis? Natus ut,
repellendus
quae incidunt eveniet laborum aut minus reprehenderit beatae amet cumque totam magni.
</p>
</div>
<div class="col-12 col-md-3">
<img class="img-fluid" src="img/me.jpg" alt="Team Work">
</div>
<div class="underline-dark"></div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="contact">
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<h1>Contact</h1>
</div>
<div class="col">
<p>
Contact me via mail<br>
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="col">
<p>
My phone <br>
<a href="tel:+32-504-444-123">+00 000 00 00</a>
</p>
</div>
</div>
<div class="contact-form col-12">
<form action="mailto:[email protected]" method="post" class="needs-validation" novalidate="">
<div class="form-group mt-5">
<label class="col-12">Full name</label>
<input class="col-12" type="text" id="fname" placeholder="Full name" name="fname" required="" xxxautofocusxxx="">
<div class="invalid-feedback">Please write a full name.</div>
</div>
<div class="form-group mt-5">
<label class="col-12">E-mail</label>
<input class="col-12" type="email" id="email" placeholder="E-mail" name="email" required="" xxxautofocusxxx="">
<div class="invalid-feedback">Please write a correct e-mail.</div>
</div>
<div class="form-group mt-5">
<label class="col-12">Message</label>
<input class="col-12" type="text" id="message" placeholder="Message" name="message" required="" xxxautofocusxxx="">
<div class="invalid-feedback">Please write a message.</div>
</div>
<div class="row justify-content-end">
<div class="col-12 col-lg-3 mb-5 text-end">
<button type="submit" name="submit" class="main-button">Send message
<img src="img/icons/arrow-right.svg" alt="arrow-right" style="width: 40px; margin-left: 12px;">
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="row justify-content-start align-items-end">
<div class="col-1">
<img src="img/icons/firmbee.svg" alt="firmbee">
</div>
<div class="col-5">
<span>© 2022-23 YOUR-DOMAIN | Created by <a href="https://firmbee.com/solutions/free-invoicing-app-billing-software" title="Firmbee - Free Invoicing App" target="_blank">Firmbee.com</a></span>
</div>
</div>
</div>
</footer>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Isotope gallery -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<!-- Custom JS codes -->
<script src="js/scroll.js"></script>
<script src="js/validation.js"></script>
<script src="js/gallery.js"></script>
<script src="js/snippets.js"></script>
<!--
This template is licenced under Attribution 3.0 (CC BY 3.0 PL),
You are free to: Share and Adapt. You must give appropriate credit, you may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
-->
</body></html>