如何让页脚在 CSS 中不重叠地停留在页面底部
How do i make my footer stay at the bottom of my page in CSS without overlapping
嗨，我是新手 HTML/CSS，我目前正在努力了解为什么我的页脚与我的网页重叠，我尝试使用 postion: fixed; & bottom:0;将其保留在底部但不起作用，答案对某些人来说可能是显而易见的，我将不胜感激，请参阅下面的 html/css 代码。
网页图片> https://imgur.com/a/GT02Ggx
HTML
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</body>
CSS
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider,.slider ul,.slider ul li
{
height:700px;
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
首先，你的页脚没有像</footer>
这样的结束标签
Second，将 class 添加到页脚，例如 footer class="footer" 或也许将整个内容包装成 div class="footer" 然后在 [=37= 中的页脚前添加一个 .（点） ] 喜欢 .footer {//something here}
然后将 clear: both 属性 添加到 css.
中的任何内容
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
clear: both; // like this
}
清楚的属性告诉元素浮动元素不能浮动在哪一边。
通过使用两个值进行清除。您可以指定任何元素都不能浮动在元素的右侧或左侧。
以防万一：同时尝试清除：两者。如果它不起作用，请将位置更改为相对位置。
问题出在你的CSS之外footer。在选择器 .slider, .slider ul, .slider ul li 中，您有 height: 700px;。因为你有 3 个这样的元素，所以它实际上被拉伸 2100 px! 因为你将 footer 设置为 position: fixed; 它想留在那个位置屏幕，即使那里已经有内容。
这两个选择器应该是这样的：
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>
嗨，我是新手 HTML/CSS，我目前正在努力了解为什么我的页脚与我的网页重叠，我尝试使用 postion: fixed; & bottom:0;将其保留在底部但不起作用，答案对某些人来说可能是显而易见的，我将不胜感激，请参阅下面的 html/css 代码。
网页图片> https://imgur.com/a/GT02Ggx
HTML
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</body>
CSS
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider,.slider ul,.slider ul li
{
height:700px;
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
首先，你的页脚没有像</footer>
Second，将 class 添加到页脚，例如 footer class="footer" 或也许将整个内容包装成 div class="footer" 然后在 [=37= 中的页脚前添加一个 .（点） ] 喜欢 .footer {//something here}
然后将 clear: both 属性 添加到 css.
.footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
position:fixed;
clear: both; // like this
}
清楚的属性告诉元素浮动元素不能浮动在哪一边。
通过使用两个值进行清除。您可以指定任何元素都不能浮动在元素的右侧或左侧。
以防万一：同时尝试清除：两者。如果它不起作用，请将位置更改为相对位置。
问题出在你的CSS之外footer。在选择器 .slider, .slider ul, .slider ul li 中，您有 height: 700px;。因为你有 3 个这样的元素，所以它实际上被拉伸 2100 px! 因为你将 footer 设置为 position: fixed; 它想留在那个位置屏幕，即使那里已经有内容。
这两个选择器应该是这样的：
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
body{
height:100%;
background-color:black !important;
}
/*-------------header-----------*/
header
{
height:110px;
line-height: 110px;
position:fixed;
z-index:1;
width:100%;
}
.secondary{
background-color:darkorange;
box-shadow:0px 0px 15px 0px;
transition:all 0.5s ease-in-out;
}
/*-------------nav-----------*/
ul
{
list-style:none;
}
ul li
{
display:inline-block;
}
header nav
{
float: right;
}
.logo img
{
margin-top:25px;
}
header nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
header nav ul li a:hover
{
text-decoration: none;
color:black;
}
/*-------------slider-----------*/
.img1
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
background-size:100% 100%;
}
.slider, .slider ul, .slider ul li{
width:100%;
color:white;
text-align: center;
padding:0px;
}
.slider h2
{
font-weight: bold;
margin-top:260px;
}
.slider span
{
color:orange;
}
.slider a
{
padding: 10px 40px;
margin-right: 10px;
}
.slider a.btn-half
{
background-color: orange;
color: white;
}
.slider a.btn-half:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.slider a.btn-full
{
background-color: black;
color: white;
}
.slider a.btn-full:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
.img2
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
background-size:100% 100%;
}
.img3
{
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
background-size:100% 100%;
}
.slider i
{
font-size:30px;
margin-right:10px;
}
/*-------------login-----------*/
.login-box
{
width:280px;
position:absolute;
top:1000px;
left:50%;
transform: translate(-50%, -50%);
color:white;
}
.login-box h1
{
width:100px;
font-size:40px;
border-bottom: 6px solid darkorange;
margin-bottom:50px;
padding:13 px 0;
}
.textbox
{
width:100%;
overflow:hidden;
font-size:20px;
padding:8px 0;
margin:8px 0;
border-bottom: 1px solid darkorange;
}
.textbox i
{
width:26px;
float:left;
text-align:center;
}
.textbox input
{
border:none;
outline:none;
background:none;
color:white;
font-size:17px;
width:80%;
float:left;
margin:0 10px;
}
.btn
{
width:100%;
background:none;
border:2px solid darkorange;
color:white;
padding:5px;
font-size:17px;
cursor:pointer;
margin:12px 0;
}
.btn:hover
{
opacity:0.7;
transition:0.5s ease-in;
}
/*-------------footer-----------*/
footer {
width:100%;
background-color: darkorange;
padding:50px 0px;
}
footer nav
{
text-align:center;
}
footer nav ul li a
{
padding-right: 25px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in;
}
footer nav ul li a:hover
{
text-decoration: none;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<section class="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img2">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
<li class="img3">
<h2>Slider<span>Slider</span></h2>
<p>Hello World</p>
<i class="fab fa-apple"></i>
<i class="fab fa-android"></i>
<i class="fab fa-windows"></i>
<p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
</p><br>
<a href="" class="btn btn-half">Get Started</a>
<a href="" class="btn btn-full">Lets Go</a>
</li>
</ul>
<div class="login-box">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="" value="">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input type="text" placeholder="Password" name="" value="">
</div>
<input class="btn" type="button" name="" value="Sign In">
</div>
</section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Log In</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">My Surveys</a></li>
</ul>
</nav>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>