添加了Bootstrap后,我的div之间出现了白线。

huangapple go评论74阅读模式
英文:

After adding bootstrap there is white line between my divs

问题

# 这是我的HTML代码。

在我添加Bootstrap之前,我的项目没有问题。

看起来详情不够,所以我写下这个,请如果您知道任何信息,请纠正我的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="style.css">
        <script src="main.js" defer></script>
        <title>测试首页</title>
    </head>
    <body>
        <div class="hero">
            <video autoplay loop muted plays-inline class="back-video">
                <source src="Wolf.mp4" type="video/mp4">
            </video>
            <nav>
                <img src="Wild logo2.png" class="logo">
                <div class="menu-btn">
                    <div class="menu-btn_lines"></div>
                </div>
                <ul class="menu-items">
                    <li><a href="#">首页</a></li>
                    <li><a href="#mission-id">任务</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">联系</a></li>
                    <li><a type="submit" class="cta" href="#"><button>登录</button></a></li>
                </ul>
            </nav> 
            <div class="content">
                <h1>野生动物专业</h1>
                <a href="#">阅读</a>
            </div>
        </div>
        <div class="banner">
            <h2>
                摄影是生活。
            </h2>
            <br><br><br>
            <p>野生动物摄影是最激动人心的摄影类型之一。但是由于所需的所有设备、技术知识和额外的知识,要成为一名野生动物摄影师可能会很困难。在摄影的早期,由于镜头速度较慢和照片媒体的低灵敏度,很难拍摄野生动物的照片。早期的动物照片通常是关于圈养动物的。这些照片包括1854年在布里斯托尔动物园拍摄的狮子幼崽的照片,以及由Frank Hayes在1864年拍摄的最后一只斑马的照片。随着更快的摄影感光材料和快门在19世纪80年代的出现,野生动物摄影开始受到更多关注。这些发展带来了德国摄影师Ottomar Anschutz在1884年拍摄的第一批野生鸟类的照片。1897年,Delaware Valley鸟类俱乐部的成员在费城地区拍摄了早期的筑巢鸣禽照片。1906年7月,国家地理杂志刊登了它的第一批野生动物照片。这些照片是由来自宾夕法尼亚州的美国代表George Shiras III拍摄的。他的一些照片是用第一台电线触发式相机陷阱拍摄的。</p>
            <div class="custom-shape-divider-bottom-1676808801">
                <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                    <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
                </svg>
            </div> 
        </div>  
        <div id="mission-id" class="mission">
            <h2>
                任务。
            </h2>
            <br>
            <p>
                该网站旨在专注于许多救援任务,为野生动物的美好未来而努力,并从它们的存在中&lt;span&gt;拯救&lt;/span&gt;许多动物。
            </p>
        </div>
    </body>
</html>
/* 这是我的CSS代码 */

CSS代码似乎存在某些位置问题或其他问题

/* 以下是屏幕截图我的项目 */
[进入图像描述](https://i.stack.imgur.com/9x982.png)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
li, a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}
/* 其余CSS样式请参考原始代码 */
英文:

This is my HTML code.

there was no problem with my project until i added bootstrap.

it seems the details is nt enough so iam writing this pls if u know anything pls correct my code.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;main.js&quot; defer&gt;&lt;/script&gt;
&lt;title&gt;test home&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;hero&quot;&gt;
&lt;video autoplay loop muted plays-inline class=&quot;back-video&quot;&gt;
&lt;source src=&quot;Wolf.mp4&quot; type=&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;nav&gt;
&lt;img src=&quot;Wild logo2.png&quot; class=&quot;logo&quot;&gt;
&lt;div class=&quot;menu-btn&quot;&gt;
&lt;div class=&quot;menu-btn_lines&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;ul class=&quot;menu-items&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;HOME&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#mission-id&quot;&gt;MISSIONS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;COURSE&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a type=&quot;submit&quot; class=&quot;cta&quot; href=&quot;#&quot;&gt;&lt;button&gt;LogIn&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt; 
&lt;div class=&quot;content&quot;&gt;
&lt;h1&gt;WILDPRO&lt;/h1&gt;
&lt;a href=&quot;#&quot;&gt;READ&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;banner&quot;&gt;
&lt;h2&gt;
Photography is life.
&lt;/h2&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;p&gt;Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.&lt;/p&gt;
&lt;div class=&quot;custom-shape-divider-bottom-1676808801&quot;&gt;
&lt;svg data-name=&quot;Layer 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1200 120&quot; preserveAspectRatio=&quot;none&quot;&gt;
&lt;path d=&quot;M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z&quot; class=&quot;shape-fill&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/div&gt; 
&lt;/div&gt;  
&lt;div id=&quot;mission-id&quot; class=&quot;mission&quot;&gt;
&lt;h2&gt;
Missions.
&lt;/h2&gt;
&lt;br&gt;
&lt;p&gt;
The website intends on to focus on many rescue missions,for a bright future for the wild animals and &lt;span&gt;SAVE&lt;/span&gt; many animals from their existition.
&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

This is my CSS code

the css code seem to have some position problem or something

this is a screenshot of my project

enter image description here

@import url(&#39;https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&amp;display=swap&#39;);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: &#39;Poppins&#39;, sans-serif;
}
li, a, button{
font-family: &quot;Montserrat&quot;, sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: &quot;&quot;;
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px; 
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
@media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: &quot;Montserrat&quot;, sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%; 
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: &quot;Montserrat&quot;, sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%; 
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}

答案1

得分: 1

尝试将div.banner内的p标签添加class="m-0",像这样:

<div class="banner">
    <h2>
        摄影是生活。
    </h2>
    <br><br><br>
    <p class="m-0">野生动物摄影是最令人兴奋的摄影类型之一。但由于所需的所有设备、技术知识和额外的知识,初学者很难成为野生动物摄影师。在摄影早期,由于镜头速度慢和摄影介质的低灵敏度,很难拍摄野生动物的照片。早期的动物照片通常是关在围栏中的动物,包括1854年在布里斯托动物园拍摄的狮子幼崽的照片,以及弗兰克·海斯在1864年拍摄的最后一只夸加动物的照片。野生动物摄影在1880年代出现了更快的摄影感光胶片和更快的快门。这些发展导致了德国摄影师奥托马尔·安斯丘兹于1884年拍摄的鸟类的第一批活动照片。费城地拉华山鸟类俱乐部(DVOC)的成员于1897年在费城地区拍摄了早期的筑巢鸟类照片。1906年7月,国家地理杂志首次刊登了野生动物照片。这些照片由宾夕法尼亚州的美国国会代表乔治·希拉斯三世拍摄。他的一些照片是用第一台电线触发式照相机陷阱拍摄的。</p>
    <!-- 此处省略部分代码 -->
</div>

上述代码是将p标签内的内容添加class="m-0",以确保段落文本没有上下外边距。

英文:

Try adding class="m-0" to the p tag inside div.banner like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

@import url(&#39;https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&amp;display=swap&#39;);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: &#39;Poppins&#39;, sans-serif;
}
li, a, button{
font-family: &quot;Montserrat&quot;, sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: &quot;&quot;;
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px; 
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
@media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: &quot;Montserrat&quot;, sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%; 
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: &quot;Montserrat&quot;, sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%; 
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}

<!-- language: lang-html -->

&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;main.js&quot; defer&gt;&lt;/script&gt;
&lt;title&gt;test home&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;hero&quot;&gt;
&lt;video autoplay loop muted plays-inline class=&quot;back-video&quot;&gt;
&lt;source src=&quot;Wolf.mp4&quot; type=&quot;video/mp4&quot;&gt;
&lt;/video&gt;
&lt;nav&gt;
&lt;img src=&quot;Wild logo2.png&quot; class=&quot;logo&quot;&gt;
&lt;div class=&quot;menu-btn&quot;&gt;
&lt;div class=&quot;menu-btn_lines&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;ul class=&quot;menu-items&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;HOME&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#mission-id&quot;&gt;MISSIONS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;COURSE&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a type=&quot;submit&quot; class=&quot;cta&quot; href=&quot;#&quot;&gt;&lt;button&gt;LogIn&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt; 
&lt;div class=&quot;content&quot;&gt;
&lt;h1&gt;WILDPRO&lt;/h1&gt;
&lt;a href=&quot;#&quot;&gt;READ&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;banner&quot;&gt;
&lt;h2&gt;
Photography is life.
&lt;/h2&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;p class=&quot;m-0&quot;&gt;Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.&lt;/p&gt;
&lt;div class=&quot;custom-shape-divider-bottom-1676808801&quot;&gt;
&lt;svg data-name=&quot;Layer 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1200 120&quot; preserveAspectRatio=&quot;none&quot;&gt;
&lt;path d=&quot;M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z&quot; class=&quot;shape-fill&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/div&gt; 
&lt;/div&gt;  
&lt;div id=&quot;mission-id&quot; class=&quot;mission&quot;&gt;
&lt;h2&gt;
Missions.
&lt;/h2&gt;
&lt;br&gt;
&lt;p&gt;
The website intends on to focus on many rescue missions,for a bright future for the wild animals and &lt;span&gt;SAVE&lt;/span&gt; many animals from their existition.
&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月20日 00:31:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75501638.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定