Create Tags and Badges in rudimentary form
This commit is contained in:
parent
4dd59e8a7e
commit
1746a35b2a
@ -23,6 +23,8 @@ body {
|
|||||||
#top div {
|
#top div {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 800px; }
|
max-width: 800px; }
|
||||||
|
#top h2 {
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
#mast {
|
#mast {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
@ -92,12 +94,26 @@ body {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 1em; }
|
padding: 1em; }
|
||||||
.slide div .project h2 {
|
.slide div .project .details {
|
||||||
margin: .5em 0 0 1em;
|
padding: .5em 1em 0 1em; }
|
||||||
|
.slide div .project .details h2 {
|
||||||
|
margin: 0;
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
.slide div .project p {
|
.slide div .project .details p {
|
||||||
margin: 0 0 0 1.5em;
|
margin: 0 0 0 0;
|
||||||
text-indent: 0; }
|
text-indent: 0; }
|
||||||
|
.slide div .project .details .tag {
|
||||||
|
float: left;
|
||||||
|
padding: 0 .3em 0 .3em;
|
||||||
|
background: #eee;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: .2em;
|
||||||
|
border-radius: .3em; }
|
||||||
|
.slide div .project .details .tag.upper {
|
||||||
|
margin-top: .5em;
|
||||||
|
float: right; }
|
||||||
|
.slide div .project .details .tag.award {
|
||||||
|
background: #FFFCB7; }
|
||||||
.slide div .project:hover {
|
.slide div .project:hover {
|
||||||
box-shadow: 1px 1px 3px #333; }
|
box-shadow: 1px 1px 3px #333; }
|
||||||
.slide table {
|
.slide table {
|
||||||
|
10
index.html
10
index.html
@ -122,10 +122,16 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<div class="cover" id="sierra">
|
<div class="cover" id="sierra">
|
||||||
<span class="award">Hackathon winner</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="details">
|
||||||
|
<span class="award tag upper">Hackathon winner</span>
|
||||||
<h2>Project Name</h2>
|
<h2>Project Name</h2>
|
||||||
<p>Project description</p>
|
<p class="description">Project description</p>
|
||||||
|
<span class="tag">Tech</span>
|
||||||
|
<span class="tag">Design</span>
|
||||||
|
<span class="tag">Javascript</span>
|
||||||
|
<span class="tag">NodeJs</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
|
@ -32,6 +32,9 @@ body {
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: $width;
|
max-width: $width;
|
||||||
}
|
}
|
||||||
|
h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#mast {
|
#mast {
|
||||||
@ -127,14 +130,32 @@ body {
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
.details {
|
||||||
|
padding: .5em 1em 0 1em;
|
||||||
h2 {
|
h2 {
|
||||||
margin: .5em 0 0 1em;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin: 0 0 0 1.5em;
|
margin: 0 0 0 0;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
}
|
}
|
||||||
|
.tag {
|
||||||
|
float: left;
|
||||||
|
padding: 0 .3em 0 .3em;
|
||||||
|
background: #eee;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: .2em;
|
||||||
|
border-radius: .3em;
|
||||||
|
}
|
||||||
|
.tag.upper {
|
||||||
|
margin-top: .5em;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.tag.award {
|
||||||
|
background: #FFFCB7;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.project:hover {
|
.project:hover {
|
||||||
box-shadow: 1px 1px 3px #333;
|
box-shadow: 1px 1px 3px #333;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user