<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tytuł</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<section class="content">
<secton class="rectengle_note">
</secton>
<secton class="rectengle_calendar">
</secton>
<secton class="rectengle_pictures">
</secton>
<secton class="rectengle_other">
</secton>
</section>
<!-- Site footer -->
<footer>
<div class="logo_container">
<img src="img/logo.png" alt="website logo"/>
</div>
<section class="info">
<h2>About Us</h2>
</section>
<secion class="focials">
<h2>Social</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</secion>
<section class="contacts">
<h2>Contacts</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="copywrite">
© 2022 AlphaMind. All Rights Reserved.
<a href="#">Terms& Conditions</a>
<a href="#">Privacy Policy</a>
</section>
</footer>
</body>
</html>
:root{
--green:#17EAD0;
--pink:#0076EA;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
list-style: none;
text-decoration: none;
}
html{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
body{
background: linear-gradient(to left top, var(--pink),var(--green));
width:100vw;
height: 100vh;
display: relative;
justify-content: center;
align-items: center;
overflow: hidden;
}
.content{
width:76%;
height: 76%;
background: linear-gradient(to left top, rgba(0,0,0,0.75), rgba(0,0,0,0.25));
border-radius:20px;
box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
position: relative;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
footer{
width:100%;
height: auto;
position:fixed;
bottom:0;
left:0;
overflow: hidden;
padding: 30px 20px 0px 30px;
background: linear-gradient(to left top, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
box-shadow: 0 0 9px black;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.logo_container{
width: 25%;
height: 100%;
display: block;
float:left;
}
.logo_container img{
width: 150px;
height: 100%;
}
.info{
width: 25%;
height:100%;
float:left;
}
.focials{
width:25%;
height: 100%;
float:left;
}
.contacts{
width:25%;
height: 100%;
float:left;
}
.copywrite{
width:100%;
clear:both;
text-align: center;
padding-top:20px;
}
.copywrite a{
color: white;
}
Cześć
Wiem, że mój kod nie jest responsywny i chciałbym go dlatego zmienić oraz dlatego, że stopka najeżdża mi na content.
Szczerze nie wiem czego zastosować, czy grid czy flexbox, co o tym sądzicie?
Chciałbym nauczyć się tych technik, dlatego również jeżeli macie dobry film który to wyjaśnia na jakimś większym przykładzie chętnie poproszę o taki!
Ustawiając wszystko w grid-template-areas wszystko ładnie się układa, ale nie wiem czy przejrzyste jest dzielenie strony na około 8x8 i rozpisywanie wszędzie area, w dodatku gdy to już poukładam nie wiem jak prawidłowo ułożyć elementy w środku... Czy do wielkości layautu użyć grida, a do ustawienia elementów wewnątrz flexa?