Skip to content

007 - z-index #78

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
lauraalvarezzz1 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

007 - z-index #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6813f6d
html / css updated z-index exercise
Oct 16, 2018
271214b
Updated breakpoint 768
Oct 16, 2018
0e5d0fe
Adding content before li
Oct 18, 2018
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
147 changes: 146 additions & 1 deletion src/007-z-index/example/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,150 @@
/*
* Practice : Z-index, !important and Inheritance
* Version: 1
* By: xxx
* By: Laura Alvarez
*/

body {
background: rgb(211, 234, 224);
}

.black-square {
position: absolute;
width: 30%;
right: 0;
height: 100%;
top: 0;
background: black;
opacity: 0.75;
z-index: 3;
}

.p-white {
color: white;
padding: 20px 0 0 40px;
}

.p-white h1{
font-weight: bold;
font-size: 3rem;
}

.p-white p {
text-transform: uppercase;
width: 100%;
}

.content {
width: 60%;
}

.second-content {
background-color: rgb(226, 243, 245);
z-index: 4;
position: relative;
padding: 20px 15px 20px 0;
}

.second-content p, .title{
padding: 0px 0 0 40px;
}

.title-list, .title {
font-size: 2rem;
}

hr {
background-color: indianred;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

.last-content li:before {
content: "Lorem ipsum dolor sit amet";
display: -webkit-box;
}

@media only screen and (min-width: 1024px) {
.last-content {
background-color: rgb(222,225,141);
z-index: 4;
position: absolute;
width: 20%;
top: 130px;
right: 71px;
padding: 50px;
}
.blue-square {
background: rgb(107,195,198);
margin: 50px;
padding-bottom: 80px;
}
}

@media only screen and (max-width: 992px) {
.last-content {
width: 18%;
}
}

@media only screen and (max-width: 1023px) and (min-width: 768px){
.last-content {
background-color: rgb(222,225,141);
z-index: 4;
position: absolute;
width: 20%;
top: 130px;
right: 71px;
padding: 30px;
}
.blue-square {
background: rgb(107,195,198);
margin: 50px;
padding-bottom: 80px;
}
}

@media only screen and (max-width: 767px) {
.black-square {
display: none !important;
}

.content {
width: 90%;
margin: auto;
background: rgb(107,195,198);
padding-bottom: 30px;
}

.second-content {
background-color: rgb(226, 243, 245);
padding: 20px 15px 20px 0;
width: 90%;
position: relative;
}

.last-content {
background-color: rgb(222,225,141);
width: 100%;
}

.last-content ul,
.title-list {
padding: 20px 20px 0 20px;
margin-bottom: 0px;
}

.last-content ul{
padding-bottom: 20px;
}

.p-white,
.second-content p,
.title {
padding: 10px 20px 0 20px;
}
}
114 changes: 57 additions & 57 deletions src/007-z-index/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,75 +16,75 @@

</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<a aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button" href="/">
<i class="material-icons">home</i>
</a>
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">007 - Z Index, !important and Inheritance</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Practice Content Goes Here -->
<div>
<div>
<div>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<a aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button" href="/">
<i class="material-icons">home</i>
</a>
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">007 - Z Index, !important and Inheritance</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Practice Content Goes Here -->
<div class="blue-square">
<div class="content">
<div>
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div class="p-white">
<h1>Lorem ipsum dolor sit amet</h1>
</div>

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
<div class="p-white">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.</p>
</div>
</div>

<div>
<h2 class="title">Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.
</p>
<p>
TLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper. Fusce facilisis facilisis quam, in
interdum nulla consequat id.
</p>
<div class="second-content">
<h2 class="title">Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper.
</p>
<p>
TLorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce molestie condimentum vehicula. Proin
scelerisque neque id velit varius, quis consequat mauris semper. Fusce facilisis facilisis quam, in
interdum nulla consequat id.
</p>
</div>
</div>
</div>
</div>

<div></div>
<div class="black-square"></div>

<div>
<h1 class="title-list">Lorem ipsum dolor sit amet</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<div class="last-content">
<h1 class="title-list">Lorem ipsum dolor sit amet</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>


</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</body>
</html>