#html #css #footer
Вопрос:
Я создал нижний колонтитул, который хотел бы воспроизвести на своем сайте, после многих тестов здесь получен наилучший результат:
Изображение нижнего колонтитула, которое я хотел бы сделать : https://i.imgur.com/QpmoreU.png
Как я могу сопоставить изображение на моем сайте, пожалуйста? Я перепробовал так много вещей, что даже не понимаю, что я делаю, поэтому, если у вас есть какие-либо объяснения и помощь, я был бы рад…
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700amp;display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<a href="#"><img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html"></a>
<nav>
<div class="middle">
<a href="invite.html">Invite</a>
<a href="commands.html">Commands</a>
<a href="documentation.html">Documentation</a>
<a href="premium.html">Premium</a>
<a href="support.html">Support</a>
<div class="login">
<a href="" class="login_btn">Login<i class="fas fa-sign-in-alt"></i></a>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
<a href="#" class="invite_btn">Invite</a>
<a href="#" class="support_btn">Support</a>
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">amp;#169; Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li><a href="#">Invite</a></li>
<li><a href="#">Commands</a></li>
<li><a href="#">Premium</a></li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Provacy</a></li>
<li><a href="#">Refunds</a></li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="design">
designed with <span style="color: red;">amp;#10084;</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
<a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
</div>
</div>
</body>
</html>
Комментарии:
1. Это выглядит достаточно близко. Не могли бы вы быть более конкретными ? Если вы хотите, чтобы он был в точности похож на изображение, просто добавьте поля и отступы, соответствующие расстоянию.
2. В основном позиционирование не то же самое, текст не центрирован/есть плохая симметрия, и да, я пробовал с заполнением и полями, но, к сожалению, как я уже сказал, у меня ничего не получилось… вот почему также результат изображения и так отличается от рендеринга моего сайта, что могут быть разные проблемы, может быть, я не могу идентифицировать их все, я остаюсь новичком x)
Ответ №1:
Я просто добавляю новый класс as .links и исправляю ваши ресурсы продуктов и бизнес, вы можете проверить его и немного изменить текст с правым нижним краем, указать относительный нижний колонтитул и текст в absoulte справа:0 внизу : 0 и сделать текст меньше. Надежда помогает.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700amp;display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">amp;#169; Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li><a href="#">Invite</a></li>
<li><a href="#">Commands</a></li>
<li><a href="#">Premium</a></li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li><a href="#">Docs</a></li>
<li><a href="#">Provacy</a></li>
<li><a href="#">Refunds</a></li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">amp;#10084;</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
<a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
</div>
</div>
</body>
</html>
Комментарии:
1. Я думаю, что это еще хуже 🙁 i.imgur.com/5Bi4itP.png
2. На самом деле : HTML : bin.readthedocs.fr/erbonf.txt CSS : bin.readthedocs.fr/rankey.txt
3. 🙁 попробуйте вот это. На самом деле я не могу получить то, что ты хочешь.
4. Какую из них я не понял?
Ответ №2:
Как насчет того, чтобы попробовать это? Я сохранил коды, относящиеся только к части нижнего колонтитула.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700amp;display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">amp;#169; Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li><a href="#">Invite</a></li>
<li><a href="#">Commands</a></li>
<li><a href="#">Premium</a></li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Provacy</a></li>
<li><a href="#">Refunds</a></li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="design">
designed with <span style="color: red;">amp;#10084;</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" /></a>
<a href="/"><img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" /></a>
<a href="/"><img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" /></a>
</div>
</div>
</body>
</html>
Надеюсь, это решит вашу проблему!
Комментарии:
1. Все еще не подходит для того, что у меня на экране, это еще хуже, чем раньше, в любом случае спасибо :/