Skip to content

004 - Display #75

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

004 - Display #75

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
163cd69
html/css updated for display exercise
Oct 8, 2018
2f4977b
Updating h1 size
Oct 10, 2018
4c32257
Removing list style line
Oct 10, 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
95 changes: 94 additions & 1 deletion src/004-display/example/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,98 @@
/*
* Practice : Display
* Version: 1
* By: xxx
* By: Laura Alvarez
*/

* {
box-sizing: border-box;
}

.page-content {
max-width: 80%;
margin: auto;
}

h1 {
background-color: rgb(232,232,232);
margin: 0;
font-size: 2rem;
padding: 15px;
}

ul {
list-style: none;
margin: 0;
padding-left: 10px;
overflow:hidden;
background-color: rgb(220,220,220);
line-height: 50px;
}

li {
float: left;
}

li a{
text-decoration: none;
padding: 5px;
}

.first-section {
display: flex;
background-color: rgb(232,232,232);
align-items: center;
flex-direction: column;
}

.first-section div {
width: 100%;
padding: 15px;
}

.table {
display: table;
width: 100%;
text-align: center;
}

.table-row {
display: table-row;
}

.table-row div{
display: table-cell;
background-color: rgb(220,220,220);
padding: 15px;
border: solid 1px #fff;
}

.content {
width: 100%;
padding: 20px;
background-color: rgb(232,232,232);
display: flex;
flex-direction: column;
}

.content div {
border: solid 1px red;
padding: 15px;
margin: 1% 1%;
}

@media screen and (min-width: 768px){
.first-section,
.content{
flex-direction: row;
flex-wrap: wrap;
}
.first-section div{
width: 50%;
}

.content div{
width: 31.3333%;
}

}
14 changes: 7 additions & 7 deletions src/004-display/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,38 +50,38 @@ <h1>Lorem ipsum
</ul>
</div>

<div>
<div class="first-section">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
<div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>

<div>
<div>
<div class="table">
<div class="table-row">
<div>Table Header</div>
<div>Table Header</div>
<div>Table Header</div>
</div>
<div>
<div class="table-row">
<div>Table Cell</div>
<div>Table Cell</div>
<div>Table Cell</div>
</div>
<div>
<div class="table-row">
<div>Table Cell</div>
<div>Table Cell</div>
<div>Table Cell</div>
</div>
</div>

<div>
<div class="content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
Expand Down