Skip to content

005 - Centering #76

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 4 commits into
base: master
Choose a base branch
from
Open

005 - Centering #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b6b67f4
html /css updated
Oct 9, 2018
d34e55c
Missing center last section - colors
Oct 9, 2018
c47adf0
html / css updated for centering exercise
Oct 9, 2018
da494cf
indentation
Oct 9, 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
116 changes: 115 additions & 1 deletion src/005-centering/example/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,119 @@
/*
* Practice : Centering
* Version: 1
* By: xxx
* By: Laura Alvarez
*/
.mdl-layout__content {
margin-top: 20px;
}

.content, .left-square, .left-square-m, .vertically, .gray-square-one, .nav, h4 {
background: #bdbdbd87;
}

.page-content {
max-width: 1200px;
margin: auto;
background-color: rgb(233,233,233);
padding-top: 1px;
}

h4, .nav {
text-align: center;
padding: 5px;
}

.nav {
padding: 10px;
margin-bottom: 20px;
}

.nav a {
text-decoration: none;
padding: 10px;
}

.nav div {
display: inline;
}

.content {
margin: 10px;
width: 33%;
padding: 32px;
}

.content-section {
display: flex;
padding: 0 120px;
}

.first-row div{
margin-top: auto;
}

.second-row {
margin-bottom: 20px;
}

.left-square{
width: 50%;
padding: 30px 0 30px 10px;
}

.left-square-m {
width: 15%;
margin: 15px 0;
padding: 50px 0 50px 10px;
}

.vertically {
padding: 100px 25px;
margin: 15px 0;
}

.gray-square-one {
padding: 150px 20px;
margin-top: 20px;
}

.gray-square-one div{
color: white;
background: darkgrey;
}

.pad1 div{
padding: 10px 0px 80px 20px;
}

.pad2 div{
padding: 10px;
}

.green-square {
background-color: rgb(118, 166, 162);
padding: 100px;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.red-square {
padding: 60px;
background-color: rgb(196, 86, 91);
position: relative;
}

.black-square {
padding: 30px;
background-color: rgb(66,76,88);
}

.yellow-square {
padding: 18px;
background-color: rgb(221, 173, 120);
position: absolute;
top: 40%;
left: 40%;
}
36 changes: 18 additions & 18 deletions src/005-centering/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,41 +36,41 @@
<h4>This text is centered.</h4>

<div>
<div>
<div class="nav">
<div><a href="">Link 1</a></div>
<div><a href="">Link 2</a></div>
<div><a href="">Link 3</a></div>
<div><a href="">Link 4</a></div>
</div>
</div>

<div>
<div>I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
<div class="content-section first-row">
<div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is
block-like with my siblings and we're centered in a row.
</div>
<div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
<div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
than my siblings do.
</div>
<div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
<div class="content">I'm an element that is block-like with my siblings and we're centered in a row.</div>
</div>

<div>
<div> I'm an element that is block-like with my siblings and we're centered in a row.</div>
<div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
<div class="content-section second-row">
<div class="content"> I'm an element that is block-like with my siblings and we're centered in a row.</div>
<div class="content">I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me
than my siblings do.
</div>
<div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
<div class="content">I'm an element that is block-like with my siblings and we're centered in a row.</div>
</div>

<div>
<div class="left-square">
I'm a centered line.
</div>

<div>
<div class="left-square-m">
<p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

<div>
<div class="vertically">
<p>I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra
vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci
pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed.
Expand All @@ -83,21 +83,21 @@ <h4>This text is centered.</h4>
elementum aliquam vitae.</p>
</div>

<div>
<div class="gray-square-one pad1">
<div>I'm a block-level element with a fixed height, centered vertically within my parent.</div>
</div>

<div>
<div class="gray-square-one pad2">
<div>I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level
element with an unknown height, centered vertically within my parent. I'm a block-level element with an
unknown height, centered vertically within my parent.
</div>
</div>

<div>
<div>
<div></div>
<div></div>
<div class="green-square">
<div class="red-square">
<div class="black-square"></div>
<div class="yellow-square"></div>
</div>
</div>

Expand Down