Skip to content

001 - Float Property #72

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

001 - Float Property #72

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
111 changes: 110 additions & 1 deletion src/001-float-property/example/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,114 @@
/*
* Practice : Float Property
* Version: 1
* By: xxx
* By: Laura Alvarez
*/

* {
box-sizing: border-box;
}

img {
float:left;
padding-right: 20px;
padding-bottom: 15px;
}

.page-content {
max-width: 1280px;
margin: auto;
}

header {
background-color: rgb(232,232,232);
}

h1, h2 {
font-size: 20px;
line-height: 45px;
padding: 8px 0;
margin: 0;
}

header h1 {
padding-left: 15px;
}

section h2 {
padding-left: 10px;
}

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

nav li {
float:left;
}

nav li a {
padding: 5px;
text-decoration: none;
width: 100%;
}

.column {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 100%
}

.content {
width: 70%;
background-color: rgb(200,200,200);
}

.menu {
width: 30%;
padding-top: 15px;
}

.input{
width: 100%;
padding: 10px;
border: 0px solid;
border-radius: 5px;
}

aside p {
padding-top: 20px;
}

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

.clearfix {
background-color: rgb(233,233,233);
}

.clearfix::after,
section ul:after {
content: "";
clear: both;
display: table;
min-width: 620px;
}

.gallery {
padding: 5px;
background-color: rgb(246,246,246);
}

.gallery ul {
padding-left: 20px;
list-style: none;
}

183 changes: 95 additions & 88 deletions src/001-float-property/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,102 +12,110 @@
<link href="../../app.css" rel="stylesheet" type="text/css">

<!-- Import App Css file -->
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/example.css" rel="stylesheet" type="text/css">
<!--<link href="css/reset.css" rel="stylesheet" type="text/css">-->
<link href="example.css" rel="stylesheet" type="text/css">

</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">001 - Float Property</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 -->
<!-- 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">001 - Float Property</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>
<header><h1>This is an example of Float CSS property</h1></header>
<div>
<header><h1>This is an example of Float CSS property</h1></header>

<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</nav>

<article>
<h2>Article Title</h2>
<img src="../resources/no-image.jpg" alt="image">
<p><span>L</span>orem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin
consectetuer lectus
eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum
orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris
aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque.
Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor
porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna,
ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.</p>
<p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
<p>Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi
auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam
enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum
ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et
pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae
etiam turpis libero, nunc diam et eros amet augue curabitur.</p>
</article>
<div class="clearfix">
<div class="column content">
<article>
<h2>Article Title</h2>
<img src="../resources/no-image.jpg" alt="image">
<p><span>L</span>orem ipsum dolor sit amet, curabitur pede tellus iaculis, ligula id. Aliquam proin
consectetuer lectus
eleifend massa, habitasse proin at euismod ornare. Enim nonummy sit turpis dapibus wisi, tellus fermentum
orci, nec dolor, ornare ipsum nulla erat ac ipsum wisi, convallis enim amet pellentesque habitant. Mauris
aliquam et est ligula dolor, magna odio justo, duis ut torquent, tortor venenatis ante magna turpis quisque.
Iaculis eleifend libero dictum, vel et, vulputate mus at. Interdum vitae iaculis rhoncus, fusce dolor
porttitor pellentesque viverra mauris ipsum, nullam commodo rutrum nec sem vel. Inceptos in totam magna,
ligula nam arcu, pulvinar eu eget eget quam odio, amet mauris pellentesque placerat feugiat quam.</p>
<p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
<p>Ut sapien suspendisse class condimentum, quam ac nunc nec mauris cursus, tellus turpis urna dictum wisi
auctor, vel at etiam a elit orci. Non porta commodo. Est commodo, felis accumsan architecto ligula aliquam
enim ipsum, proin sed turpis vel, dolor commodi maecenas tempor. Class blandit dui et, vitae vestibulum
ultricies mi sed, fringilla nascetur wisi justo a urna quam. Pulvinar et fringilla vel vulputate, et
pellentesque ut iaculis scelerisque, nec sapien vulputate mauris sapien augue ut. Lacinia mauris netus vitae
etiam turpis libero, nunc diam et eros amet augue curabitur.</p>
</article>
</div>
<div class="column menu">
<aside>
<label>
Search for
<input type="text" class="input">
</label>
<p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>

<aside>
<label>
Search for
<input type="text">
</label>
<p>Class sed non curabitur aliquet. Dicta erat. Egestas ut. Hymenaeos dolor a natoque nec arcu massa, libero
justo donec. Erat quisque ante eget pharetra vitae quam, donec a imperdiet, lectus integer duis eu vivamus
turpis quia, nulla quis habitant in commodo, nonummy maecenas urna dui ligula ipsum. Sed maecenas proin sed
wisi integer. Pellentesque congue platea velit nam. Taciti diam, sed fermentum neque, arcu urna sem morbi
ante wisi dictum, in suspendisse in mi. Hendrerit consequat mollis mi ac ipsum dictumst, eget amet, rhoncus
nisl pellentesque pharetra. Taciti elit aliquam lacus.</p>
<ul>
<li><a href="">Something 1</a></li>
<li><a href="">Something 2</a></li>
<li><a href="">Something 3</a></li>
<li><a href="">Something 4</a></li>
</ul>
</aside>
</div>
</div>

<ul>
<li><a href="">Something 1</a></li>
<li><a href="">Something 2</a></li>
<li><a href="">Something 3</a></li>
<li><a href="">Something 4</a></li>
</ul>
</aside>
<div>

<section>
<h2>Gallery</h2>
<ul>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
</ul>
</section>
<section class="gallery">
<h2>Gallery</h2>
<ul>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
<li><img src="../resources/no-image.jpg" alt="image" width="270px"></li>
</ul>
</section>

<section>
</div>
<!-- <section>
<img src="../resources/no-image.jpg" width="95" height="84">
<p><span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text.
This is some
Expand All @@ -116,10 +124,9 @@ <h2>Gallery</h2>
is also some
text. This is also some text. This is also some text.</p>
</section>

<div><img src="../resources/no-image.jpg" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</div>-->
</div>
</div>
</main>
Expand Down