Skip to content

Changes made to style.css #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
div-rathore wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Changes made to style.css #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 32 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<h1>Responsive Layout using Flexbox</h1>
</header>

<div id="main">
<nav>nav</nav>
<aside>aside</aside>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam vulputate dignissim suspendisse in est ante in. Dolor purus non enim praesent elementum facilisis leo. Sed libero enim sed faucibus turpis in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam dignissim diam quis enim. Cursus in hac habitasse platea dictumst. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. Orci nulla pellentesque dignissim enim. Consectetur a erat nam at lectus urna duis convallis convallis. A cras semper auctor neque vitae tempus quam pellentesque nec. Quisque egestas diam in arcu cursus euismod quis viverra nibh. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.</p>

<p>At in tellus integer feugiat scelerisque. Urna cursus eget nunc scelerisque viverra mauris. Arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit amet est placerat in. Aliquet risus feugiat in ante metus. Rutrum tellus pellentesque eu tincidunt. Augue interdum velit euismod in pellentesque massa placerat. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Mi bibendum neque egestas congue quisque egestas.</p>
</article>

</div>
<footer>
Footer
</footer>


</header>

<div id="main">
<nav>nav</nav>
<aside>aside</aside>

<article class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Non sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam
vulputate dignissim suspendisse in est ante in. Dolor purus non enim praesent elementum facilisis leo.
Sed libero enim sed faucibus turpis in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam
dignissim diam quis enim. Cursus in hac habitasse platea dictumst. Lectus vestibulum mattis ullamcorper
velit sed ullamcorper morbi tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. Orci
nulla pellentesque dignissim enim. Consectetur a erat nam at lectus urna duis convallis convallis. A
cras semper auctor neque vitae tempus quam pellentesque nec. Quisque egestas diam in arcu cursus euismod
quis viverra nibh. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.</p>

<p>At in tellus integer feugiat scelerisque. Urna cursus eget nunc scelerisque viverra mauris. Arcu non odio
euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit amet est
placerat in. Aliquet risus feugiat in ante metus. Rutrum tellus pellentesque eu tincidunt. Augue
interdum velit euismod in pellentesque massa placerat. Id nibh tortor id aliquet lectus proin nibh nisl
condimentum. Mi bibendum neque egestas congue quisque egestas.</p>
</article>

</div>
<footer>
Footer
</footer>

</body>

</html>
58 changes: 58 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,59 @@

header{
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
color: white;
}

aside{
display: flex;
float: right;
background-color: olivedrab;
width: 180px;
height: 300px;
color: white;
padding-left: 10px;
margin-left: 5px;
}

nav{
display: flex;
float: left;
flex-grow: 4;
flex-shrink: 3;
width: 180px;
height: 300px;
background-color:olivedrab;
color: white;
margin-right: 5px;
padding-left: 10px;
}

.content{
display: flex;
flex-grow: 4;
flex-shrink: 3;
align-items: center;
flex-direction: column;
max-width: 950px;
background-color: darkkhaki;
color: white;
height: 300px;
max-height: 500px;
padding: 0px 0px 0px 10px;
margin: 5px;
flex-wrap: nowrap;
}

footer{
display: flex;
width: 100%;
height: 85px;
background-color: orange;
padding-left: 10px;
color: white;
align-items: center;
}