<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Website Layout</title>
<style>
body {
margin: 0;
padding: 0;
background-color: cornflowerblue;
/* z-index: -1; */
}
/* #container {
width: 1000px;
border: 1px solid black;
margin: 0 auto;
background-color: white;
} */
#header {
background-color: crimson;
padding: 45px;
text-align: center;
font-size: xx-large;
color: whitesmoke;
font-weight: bold;
letter-spacing: 10px;
clear: both;
}
#nav-bar {
background-color: teal;
}
div h2 {
background-color: steelblue;
/* vertical-align: text-top; */
}
#nav-bar ul {
padding: 0;
margin: 0;
}
#nav-bar li {
display: inline-block;
}
#nav-bar li:hover {
background-color: crimson;
}
#nav-bar li a {
display: block;
padding:10px 10px ;
text-decoration: none;
color: black;
}
#main-content {
background-color: darkturquoise;
/* width: 600px; */
/* border: 2px solid gold; */
width: 50%;
height: 553px;
float: left;
margin: 0;
padding: 10px;
overflow: auto;
box-sizing: border-box;
position: relative;
}
#main-content h1 {
position: sticky;
top: 0;
background-color: gold;
}
#main-content h2 {
position: sticky;
top: 0;
background-color: seagreen;
font-size: 2em;
}
.left-side-bar {
min-height: 553px;
/* min-width: 200px; */
width: 25%;
float: left;
text-align: center;
}
.right-side-bar {
float: left;
/* width: 200px; */
width: 25%;
min-height: 553px;
text-align: center;
margin: 0;
}
.left-side-bar,.right-side-bar {
background-color: lightgray;
}
.left-side-bar ul,.right-side-bar ul {
list-style-type: none;
}
.left-side-bar li:hover ,.right-side-bar li:hover {
background-color: lightblue;
}
.left-side-bar li a ,.right-side-bar li a{
text-decoration: none;
color: black;
text-shadow: 2px 2px cyan;
font-style: italic;
}
#footer {
background-color: crimson;
padding: 45px;
text-align: center;
font-size: xx-large;
clear: both;
color: whitesmoke;
font-weight: bold;
letter-spacing: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="nav-bar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">MORE</a></li>
</ul>
</div>
<div class="left-side-bar">
<div class="left-heading">
<h2>Left Side Bar</h2>
</div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">MORE</a></li>
</ul>
</div>
<div id="main-content">
<h1>Content </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius labore accusantium ipsa! Praesentium dicta nemo error veniam eligendi adipisci ut, maiores, temporibus cupiditate voluptates eaque dolor dignissimos totam voluptatibus, accusantium molestiae doloribus eveniet enim exercitationem esse facilis assumenda tempora? Iure, necessitatibus quas dolorem exercitationem, voluptatibus aliquid atque non commodi est aperiam, corporis nulla ea tenetur voluptate sequi sit! Aliquam suscipit facilis quos aspernatur obcaecati hic modi dolorum labore earum cupiditate ducimus eius nisi maiores, alias officiis rerum qui, natus assumenda atque in ipsam, expedita quod. Iusto laborum repellat aperiam, nostrum ab harum numquam illo expedita alias vel quibusdam, nesciunt quidem, recusandae dignissimos repellendus voluptas magnam cupiditate praesentium nam! Laudantium optio, reiciendis, repudiandae ut sequi iure sapiente saepe animi esse, eius quis fugit repellendus possimus sunt quam ducimus officia delectus iusto nobis eligendi fuga sint tenetur suscipit. Numquam modi iste at iusto tempore minima saepe delectus obcaecati dignissimos, ad magni alias totam velit error neque nam laborum? Consequuntur fugit ut reprehenderit assumenda quod cumque itaque ab, commodi modi nemo quasi cum, provident obcaecati blanditiis dolores enim ipsum voluptatibus nobis suscipit rem dolore. Amet esse, officia mollitia in corporis ea ullam facilis voluptatem quidem eveniet unde inventore pariatur repellendus quibusdam aspernatur ab nihil cumque obcaecati. Alias perspiciatis quia deleniti ex quo voluptates esse illo, ut distinctio tempore doloribus cum blanditiis, qui voluptatibus explicabo ducimus facere quisquam sint maxime fugit itaque magni asperiores magnam! Recusandae soluta, expedita quae, in iste dicta facilis fugit dolorum ducimus, sapiente exercitationem adipisci porro assumenda ex repellendus deleniti quod eligendi. Nisi, quisquam?</p>
<h2>Content 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla animi quae nam aliquid dolore repellendus beatae impedit neque magnam distinctio quis ea quisquam dolorem fugit officia, dolorum dolores error! Quis porro esse culpa earum sint eius dolores beatae assumenda, molestiae nihil dignissimos fugiat, rem sit, unde aperiam ducimus? Consectetur delectus eius ipsa cumque veritatis alias officia accusantium esse suscipit? Quibusdam atque laudantium perspiciatis aliquid. Quod magni doloremque officia voluptas autem praesentium cumque quibusdam natus vel ut numquam libero beatae ducimus doloribus nisi, quas culpa sit quo odit dolor dolores iste reprehenderit molestias? Eos rerum molestias ullam quia amet, neque assumenda quos dolore atque similique cupiditate placeat inventore delectus quaerat, aspernatur totam reprehenderit tempore fugit cumque laudantium nihil sapiente quidem? Odio sed molestias aspernatur enim, itaque ipsa cupiditate nostrum dolorum iure dolore eos? Blanditiis rerum minima molestiae corrupti numquam eligendi nemo quos, explicabo et itaque nam, harum ducimus obcaecati quia earum perspiciatis asperiores. Mollitia nihil ad eum libero perspiciatis, quia asperiores eveniet obcaecati repellat, voluptatibus eos ex corporis illum. Distinctio accusamus quibusdam veniam! Magni cumque cupiditate quisquam omnis facilis autem explicabo ullam, esse at quia quam deserunt eveniet necessitatibus asperiores, pariatur repellendus temporibus tempora ea voluptatum beatae quasi voluptate placeat fugiat.</p>
<h1>Sub Content</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum perspiciatis maiores aut nihil recusandae doloribus sunt amet quia, fugit aspernatur accusantium dolor molestias aliquam labore repellat mollitia possimus eum suscipit obcaecati nam consequuntur. Quia ipsa iure adipisci rerum odio incidunt quod fugiat expedita totam, molestias delectus quasi illo officia esse fuga laborum in suscipit modi odit ipsam hic corrupti id saepe explicabo. Alias impedit rerum nostrum ipsum suscipit maiores, itaque aspernatur eveniet. Facilis dolore, ipsam accusamus provident, optio commodi aliquid in expedita nam fugiat similique nostrum tempore voluptates quisquam quam cupiditate dolorem eos nulla eum perferendis saepe voluptatem! Sequi illo recusandae iste cum impedit, laudantium ex aliquid assumenda voluptates facilis adipisci, quae odio perferendis consectetur blanditiis hic porro dolores? Animi, adipisci! Magnam impedit dolores iusto iste ut commodi qui pariatur? Rerum earum quos tenetur. Consequatur porro harum deleniti assumenda quisquam neque consectetur reprehenderit. Facere, autem accusamus. Repellendus minima hic ut vel. Eaque mollitia inventore similique alias illo itaque hic, quos quidem laborum quas voluptas dicta eveniet obcaecati nihil sapiente, iure quisquam optio temporibus? Totam doloribus eos repellendus fugiat ipsam est ut quae itaque consectetur iusto facere enim dolore harum id, quos, tempore cupiditate. Officia laborum iure suscipit voluptate, fuga sint iusto? Ipsa repellendus quidem earum accusamus ab, quibusdam ad, aut nam beatae quia voluptate expedita. Beatae voluptate perferendis nulla ab sit libero odio laboriosam excepturi ipsam.
<h2>Sub Content </h2>
Ipsam aut modi illum natus, animi rem nam provident deleniti nobis accusantium alias ullam! Dignissimos itaque laudantium nesciunt earum. Nostrum, nemo accusamus qui officiis magnam, doloribus assumenda omnis quia magni possimus voluptas deleniti dignissimos, amet vel. Officia nam cumque corporis, libero porro et voluptate aut quas voluptatibus doloremque iste autem eius vel reiciendis dolorum repudiandae? Ipsam similique excepturi, odio vel consequuntur eligendi maxime dolorum voluptate velit dolore perspiciatis illo voluptatum, eos sit cupiditate assumenda quo alias eius! Ducimus itaque, eveniet saepe accusantium inventore reprehenderit laboriosam, necessitatibus vero molestias asperiores animi beatae, sequi maiores velit nobis quia eos quos veritatis praesentium? Quibusdam iure laborum, iste at minima aliquam provident ducimus explicabo neque qui et harum officia voluptatum est eius. Voluptates ut fuga amet ipsam animi recusandae quisquam molestias id quae maiores, officia adipisci impedit, quia iste, doloremque ea dolorem sapiente veritatis! Id quibusdam praesentium mollitia quos amet omnis exercitationem vero natus eaque ducimus sapiente dolorum molestiae nisi nemo, illum autem ipsam inventore dicta iusto vel temporibus! Error porro explicabo quis necessitatibus, odit aliquid consectetur aperiam mollitia. Illo accusantium iusto cupiditate possimus dolorum adipisci quaerat id saepe eum neque suscipit dolore, doloremque quos itaque accusamus natus sint magni ea assumenda officiis repellat quod. In quidem cum ea provident repellendus corporis aspernatur quasi, quaerat deserunt, voluptatem totam amet magni similique odio quibusdam rerum ducimus nostrum tempora corrupti atque id reprehenderit itaque! Commodi repudiandae sequi autem a delectus aut, rerum saepe illum eius hic fugit minus porro repellat voluptatum laboriosam consequatur mollitia repellendus adipisci. Voluptate repudiandae eveniet, aliquid, sint, rem numquam in odio sequi ipsam asperiores eum tenetur illum animi? In, obcaecati accusantium sed illo delectus deserunt totam.
</p>
</div>
<div class="right-side-bar">
<div class="right-heading">
<h2>Left Side Bar</h2>
</div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">MORE</a></li>
</ul>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
keep learning cause learning is a key to success!!😎
ReplyDelete