Tvorba webových stránek pro obchod a následuje tradiční šablonu pomocí záhlaví, obsah a zápatí a použila jsem mřížku na to většinou. A funguje to v pohodě, dokud jsem se snažit, aby přidat příliš mnoho textu, což potřebuju, protože tohle je článek, ale pak odstavec přeteče do zápatí, jak to mohu opravit?
<!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">
<link rel="stylesheet" href="styles.css">
<link rel = "icon" href = "images/logo.png" type = "image/x-icon">
<title>Kitsune</title>
</head>
<body>
<div class="container-1">
<div class="header">
<!-- input logo here -->
<ul class="logo">
<li class="header_logo"><a href="#"><img src="images/logo.png" alt="logo" width="40px" height="40px" ></a></li>
<li class="header_logo"><a href="#"><p>Kitsune</p></a></li>
</ul>
<nav>
<ul class="header_nav">
<li class="header_nav-item"><a href="#">Know the Facts</a></li>
<li class="header_nav-item"><a href="#">What We Do</a></li>
<li class="header_nav-item"><a href="#">How We Can Help</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Hotline</button></a>
</div>
</div>
<div class="hero">
<div class="hero-img">
<div class="hero-text">
<h1>The path to recovery starts here</h1>
</div>
</div>
</div>
<div class="container">
<div class="content-large">
<h1>Lorem ipsum dolor sit amet.</h1>
<br>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat quasi iure necessitatibus labore, earum, omnis harum soluta numquam consequatur quos eveniet quod praesentium dicta, nobis debitis deleniti quam tempore voluptatibus. Provident hic impedit quasi ipsa nam optio quo similique cum blanditiis recusandae voluptas doloribus numquam, nulla, amet dolore velit placeat aperiam sapiente, libero deserunt excepturi nesciunt suscipit ea! Hic ex aut earum veniam qui necessitatibus odio consectetur fuga a blanditiis neque, deleniti cumque. Aliquam, delectus autem. Ipsa repellendus quidem numquam, similique aperiam doloribus temporibus deserunt iste vel ut? Beatae at perferendis dolorum ullam maiores voluptate, officiis corrupti repellendus inventore harum quod dignissimos minus aut aliquid porro necessitatibus consequuntur unde molestias rem. Et, odio iste. Consequatur earum, eaque excepturi qui rerum asperiores at quod corrupti expedita! Ab ratione similique voluptatem odit quisquam aliquam consequuntur rerum accusamus ducimus rem minima ipsa, quam corporis, quia cupiditate! Doloremque ullam laborum eum nisi ducimus explicabo, dolor accusantium fugit possimus? Libero, laudantium quos vitae veritatis quis explicabo provident voluptatibus itaque optio magni minus excepturi odit, veniam voluptatum dignissimos ipsam earum maiores dolor qui fugit sunt corrupti neque. Aut nostrum unde ut aliquam dolor natus soluta voluptatem voluptates repellendus. Officiis vel laboriosam porro saepe assumenda alias cumque maxime, numquam ea, fugit expedita veritatis nam sint, commodi quod ipsa. Hic temporibus ad asperiores suscipit tempore adipisci quidem nam. Beatae soluta assumenda ipsam illum, necessitatibus quas, harum reprehenderit, ducimus repellendus aspernatur excepturi libero? Magni dolores animi consectetur distinctio tempore ut pariatur maxime aperiam unde, ipsam doloremque fugit, quia, impedit perferendis cupiditate asperiores laudantium sint optio totam saepe sit facilis ducimus ea vel? Ut facere distinctio asperiores dolorum nobis ab, odio reprehenderit est odit, maiores facilis saepe nemo dolore fuga qui, voluptatem obcaecati doloremque aliquam. Molestias, accusamus accusantium. Quas, hic aspernatur sed voluptate fugit quidem voluptatibus ratione. Iure, molestiae fugit facilis possimus culpa fuga? Corporis amet quas officia unde, minima rem voluptatibus minus! Asperiores sunt at voluptates repellendus vero quasi eaque est necessitatibus nobis? Cupiditate asperiores atque molestiae eligendi dolorem est sed nisi modi nam inventore facere quod autem quaerat quia ullam vero, odit pariatur corrupti aspernatur odio reiciendis reprehenderit, obcaecati suscipit corporis! Similique sint rem debitis voluptas incidunt commodi error animi at nam! Praesentium cupiditate minus odit commodi in sint cumque voluptatum quod, illum unde soluta minima reiciendis. Beatae quibusdam incidunt iste ipsa. Hic architecto maxime ipsa, ratione quis aut placeat, cumque facere sit possimus ducimus laborum unde. Quas earum possimus odio magnam velit, ullam magni et voluptate iure in? Doloremque consectetur debitis totam. Deserunt quo id eaque, facilis distinctio quas, quis natus explicabo labore quidem quasi praesentium illo! Molestiae cum consectetur minima adipisci excepturi ipsam accusamus, corrupti quam! Accusantium incidunt animi, deserunt excepturi temporibus numquam ullam vel distinctio et odio in sit tenetur, facilis, quaerat voluptas magnam expedita eos! Aperiam sit, molestias magnam eos repudiandae esse dicta delectus earum fuga cumque dolor minima totam culpa porro rem! Corrupti voluptates quasi ducimus, eaque consequuntur cumque mollitia. Nostrum labore temporibus voluptatum repellendus iusto quia veritatis laboriosam, aliquam tempore culpa sequi magni ipsum ipsa nobis reprehenderit, praesentium velit similique delectus iste omnis error impedit, pariatur molestiae corporis! Ea magnam inventore numquam ipsam deleniti unde aut reiciendis excepturi, necessitatibus ipsum delectus neque placeat deserunt recusandae iusto consectetur voluptatum impedit. Quis soluta eligendi eius repellat labore atque excepturi distinctio saepe neque maiores sunt aspernatur enim, ea omnis ex cupiditate culpa perspiciatis deleniti necessitatibus? Aut natus atque nobis, accusantium, asperiores aliquid sint laborum deleniti repellat dolores corporis. Cum, quod eligendi! Dolorum voluptate ipsum numquam impedit assumenda perferendis rem consequatur aliquid rerum hic, ex delectus, accusamus nesciunt accusantium eveniet! Modi facilis quibusdam numquam ex nisi. At nam atque laudantium! Necessitatibus reprehenderit quaerat in nemo nesciunt recusandae asperiores illo eligendi eum pariatur quo accusamus dolor temporibus aspernatur fuga, placeat distinctio neque accusantium soluta cumque perspiciatis porro nam ipsum deleniti! Vel vero quas, minima temporibus illum officia ad cumque necessitatibus voluptatem autem deserunt eius facilis natus at reprehenderit unde voluptas, repudiandae inventore, error adipisci? Ipsa enim nisi eligendi, sequi eveniet vel illum alias quo reiciendis consectetur animi! Dolore pariatur corrupti reprehenderit, quibusdam ab quos quod voluptatem explicabo vel sed molestiae esse et est unde aliquid impedit itaque hic temporibus aut aperiam neque qui architecto placeat. Corrupti, et quod accusantium saepe veniam doloribus est, magni fugit voluptates, autem esse laborum excepturi nesciunt ipsa ipsum repellendus dignissimos pariatur fuga quis? Laborum odit est molestias repudiandae doloremque! Minima quos quo nisi! Unde vitae ratione atque repudiandae? Nisi hic ipsum non necessitatibus, cupiditate aliquam. Obcaecati quod dicta magni recusandae illo aperiam.
</p>
</div>
<div class="content-small">Content #1b</div>
<div class="footer">Footer</div>
</div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button{
font-family: 'Outfit', sans-serif;
font-weight: 400;
font-size: 16px;
text-decoration: none;
}
body{
margin: 0;
overflow-x:hidden;
}
.container{
width: 100vw;
height: 200vh;
font-family: 'Quicksand', sans-serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr;/* repeat(3, fr); size of columns. fr(fraction) */
grid-template-rows: 50px repeat(3, 1fr) 180px;/* size of rows*/
gap: 10px;/* gap between grid blocks */
padding: 10px;
box-sizing: border-box;/* to contain the padding */
}
.container div{
text-align: justify;
text-justify: inter-word;
padding:none;
border: 1px solid black;
}
.container-1{
width: 100vw;
font-family: 'Quicksand', sans-serif;
gap: 10px;/* gap between grid blocks */
padding: 10px;
box-sizing: border-box;/* to contain the padding */
}
.container-1 div{
text-align: justify;
text-justify: inter-word;
padding: 10px;
/* border: 1px solid black; */
}
.hero{
grid-column-start: 1;
grid-column-end: 4;
}
.hero-img{
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("images/hero.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.hero-text{
color: rgb(255, 255, 255);
font-family: 'Quicksand', sans-serif;
/* -webkit-text-stroke: 1px rgb(255, 255, 255); */
}
.header{
display: flex;
justify-content: space-between;/* push left and right content to edges and align everything else */
align-items: center;
padding: 30px 10%;
grid-column-start: 1;
grid-column-end: 4;/* Change this to see what it does */
}
.header_nav-item{
display: inline-block;
list-style: none;
padding: 0px 100px;/* 0px on the top 20px on the right */
}
.header_nav-item li{
display: inline-block;
padding: 0px 30px;/* 0px on the top 20px on the right */
}
.header_nav-item li a{
transition: all 0.3s, ease 0s;
}
.header_nav-item li a:hover{
color: #0088a9;
}
.header_logo{
display: inline-block;
list-style: none;
}
.header_logo img{
box-sizing: border-box;
margin-top: 7px;
}
.header_logo-text{
box-sizing: border-box;
margin-top: 7px;
}
.header_logo p{
font-size: x-large;
}
button{
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;/* makes it rounded */
cursor: pointer;
transition: all 0.3s, ease 0s;
}
button:hover{
background-color: rgba(0, 136, 169, 0.8);
}
.content-large{
padding: 50px;
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 3;/* span two lines, alt 4 */
}
.content-small{
grid-column-start: 3;
grid-column-end: span 1;
grid-row-start: 1;
grid-row-end: span 3;/* span two lines, alt 4 */
}
.footer{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end:span 1;/* span two lines, alt 4 */
}