Skip to content

001 and 002 #69

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

001 and 002 #69

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
2f33ec4
001 done
Jun 14, 2018
b0d4451
002 almost done
Jun 14, 2018
394c10c
002 done
Jun 15, 2018
d106d94
changed 0001's title color
Jun 15, 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
185 changes: 185 additions & 0 deletions src/001-float-property/example/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,188 @@
* Version: 1
* By: xxx
*/

label,
div,
p{
color: rgb(93,94,97);
}

.bottom-p{
clear:both;
padding-top: 15px;
padding-bottom: 60px;
}

.top-p{
margin-left: 110px;
}

.bottom-section{
background-color: rgb(232,232,232);
padding-top: 30px;
padding-left: 20px;
}

.bottom-section span,
.title span{

}

.bottom-section img{
float:left;
margin-top: 10px;
margin-left: 10px;
}

.footer{
background-color: rgb(232,232,232);
border: solid rgb(97,166,39);
height: 200px;
padding-top: 40px;
padding-left: 30px;
}

.footer img{
float:right;
padding-right: 25px;
}

.gallery{
background-color: rgb(245,245,245);
padding-top: 20px;
padding-left: 15px;

}

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

.gallery li{
display: inline-block;
padding-right:20px;
padding-bottom: 20px;
}

#header{
background-color: rgb(232,232,232);
padding-top: 25px;
padding-bottom: 25px;
}

h1{
font-size: 30px;
}

h2{
color: rgb(111,111,111);
font-size:30px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 15px;
}

.img{
float:right;
height: 400px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 30px;
width: 420px;
}

input{
padding-left: 15px;
}

.link{
padding-left: 15px;
font-size: 20px;
}

.link li{
padding-top: 5px;
padding-bottom: 5px;
}

#main{
background-color: rgb(200,200,200);
clear:right;
float:right;
height: 800px;
width: 900px;

}

.mainTitle{
color: white;
}

.navigation{
background-color: rgb(220,220,220);
padding-bottom: 40px;
}

.navigation li{
display:inline;
float: left;
padding: 5px 10px 5px 15px;
}

.navigation ul{
list-style: none;
padding-top: 10px;
}

p{
font-size: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 25px;
}

#section{
clear:both;
}

.search{
font-size: 20px;
margin-left: 15px;
}

.search input{
border: none;
border-radius: 5px;
display: block;
height: 20px;
margin-left: 15px;
width: 270px;

}

#sidebar{
background-color: rgb(232,232,232);
clear:left;
float:left;
height: 660px;
padding-top: 20px;
padding-bottom: 120px;
width: 340px;

}

span{
color: rgb(115,115,115);
font-size: 60px;
float:left;
padding-right: 20px;
padding-bottom: 10px;
}

.title{
padding-bottom: 5px;
padding-top: 5px;
}

34 changes: 17 additions & 17 deletions src/001-float-property/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Expand All @@ -12,8 +12,8 @@
<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="./reset.css" rel="stylesheet" type="text/css">
<link href="./example.css" rel="stylesheet" type="text/css">

</head>
<body>
Expand All @@ -25,7 +25,7 @@
</a>
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">001 - Float Property</span>
<span class="mdl-layout-title mainTitle">001 - Float Property</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
Expand All @@ -35,9 +35,9 @@
<!-- Practice Content Goes Here -->

<div>
<header><h1>This is an example of Float CSS property</h1></header>
<header id="header"><h1>This is an example of Float CSS property</h1></header>

<nav>
<nav class="navigation">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
Expand All @@ -46,9 +46,9 @@
</ul>
</nav>

<article>
<h2>Article Title</h2>
<img src="../resources/no-image.jpg" alt="image">
<article id="main">
<h2 class="title">Article Title</h2>
<img class="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
Expand All @@ -71,8 +71,8 @@ <h2>Article Title</h2>
etiam turpis libero, nunc diam et eros amet augue curabitur.</p>
</article>

<aside>
<label>
<aside id="sidebar">
<label class="search">
Search for
<input type="text">
</label>
Expand All @@ -83,15 +83,15 @@ <h2>Article Title</h2>
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>
<ul class="link">
<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>

<section>
<section id="section" class="gallery">
<h2>Gallery</h2>
<ul>
<li><img src="../resources/no-image.jpg" alt="image" width="250px"></li>
Expand All @@ -107,17 +107,17 @@ <h2>Gallery</h2>
</ul>
</section>

<section>
<section class="bottom-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.
<p class="top-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
text.</p>
<p><span>T</span>his is also some text. This is also some text. This is also some text. This
<p class="bottom-p"><span>T</span>his is also some text. This is also some text. This is also some text. This
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">
<div class="footer"><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>
Expand Down
48 changes: 48 additions & 0 deletions src/001-float-property/example/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Loading