Skip to content
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

Our CSS Architecture assignment #7

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Our CSS Architecture assignment #7

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
8fae5e3
Our CSS Architecture assignment
Goshawk3118191 Nov 4, 2014
8942bf2
Second commit, post-fix
Goshawk3118191 Nov 5, 2014
c7f95b2
Fixed changes
Goshawk3118191 Nov 25, 2014
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
114 changes: 114 additions & 0 deletions Casey-Henok/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Arimo:700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<meta charset='utf-8'>
<title>Top Albums</title>
</head>
<body>
<main>
<header>
<h1 class="header">Team Florida's Current Music Picks</h1>
<p></p>
</header>
<div class="wrapper">
<section>
<header>
<h1 class="title">Henok's Top Five Of The Moment</h1>
</header>
<article class="albums">
<figure>
<img src="http://thissongissick.com/wp-content/uploads/2014/10/Run-The-Jewels.jpg" alt="Run The Jewels 2" class="winner">
<figcaption>Run The Jewels - Run The Jewels 2</figcaption>
</figure>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=Hd1dTrFdZkA">Find</a></button>
</article>
<article class="albums">
<figure>
<img src="http://cdn4.pitchfork.com/news/55815/fc741210.jpg" alt="Black Moon Spell" class="winner">
<figcaption>King Tuff - Black Moon Spell</figcaption>
</figure>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=9ufWAU8RjC8">Find</a></button>
</article>
<article class="albums">
<figure>
<img src="http://www.aux.tv/wp-content/uploads/2014/04/freddie-gibbs-madlib-pinata.jpg" alt="Pinata" class="winner">
<figcaption>Freddie Gibbs & Madlib - Pinata</figcaption>
</figure>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=98nUZ938oiU">Find</a></button>
</article>
</div>
<div class="wrapper">
<article class="albums">
<figure>
<img src="http://cdn4.pitchfork.com/news/53290/1e766e86.jpg" alt="Present Tense" class="winner">
<figcaption>Wild Beasts - Present Tense</figcaption>
</figure>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=9IIbbFIQTKI&list=PLaXEUnRhowO5T2vMgPCrH0XjBnyIeyml2">Find</a></button>
</article>
<article class="albums">
<figure>
<img src="http://www.rockleak.com/uploads/posts/2014-07/1406054962_hippiesabotage-sunny-cover.jpg" alt="Sunny" class="winner">
<figcaption>Hippie Sabotage - Sunny</figcaption>
</figure>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=zfnyoKu7ptw&list=PLQ83U7ao7jjBC1A5WNEdxxhEl8pmdbGXN">Find</a></button>
</article>
</div>
</section>
<div class="wrapper">
<section>
<header>
<h1 class="title">Casey's Five Picks Of The Moment</h1>
</header>
<article class="albums">
<figure>
<img src="http://s26.postimg.org/3peaa76e1/subli.png" alt="Sublime" class="winner"/>
<figcaption>Sublime - Sublime</figcaption>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a></button>
</article>

<article class="albums">
<figure>
<img src="http://s26.postimg.org/hx3yyuj2x/psy.png" alt="Hangover" class="winner"/>
<figcaption>PSY & Snoop - Hangover</figcaption>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a></button>
</article>

<article class="albums">
<figure>
<img src="http://s26.postimg.org/w8ivq0bvd/yeez.png" alt="Mercy" class="winner"/>
<figcaption>Kanye West - Mercy</figcaption>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=7Dqgr0wNyPo">Find</a></button>
</article>
</div>
<div class="wrapper">
<article class="albums">
<figure>
<img src="http://s26.postimg.org/k2y9tcmjd/image.png" alt="Enjoy The Silence" class="winner"/>
<figcaption>Depeche Mode - Enjoy The Silence</figcaption>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=m0AKJMGxwpE">Find</a></button>
</article>

<article class="albums">
<figure>
<img src="http://s26.postimg.org/e3aipp1qx/flo.png" alt="Wild Ones" class="winner"/>
<figcaption>Flo Rida - Wild Ones</figcaption>
<p class="Lorem">description ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
<button><a href="https://www.youtube.com/watch?v=bpOR_HuHRNs">Find</a></button>
</article>
</div>
</section>
</main>
</body>
</html>
82 changes: 82 additions & 0 deletions Casey-Henok/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
body {
background-image: url('http://p1.pichost.me/i/36/1591464.jpg');
background-attachment: fixed;
background-size: cover;
background-repeat: no repeat;
}

.albums {
width: 380px;
height: 600px;
display: inline-block;
background: transparent;
}

.winner {
width: 300px;
}

.header {
text-align: center;
font-size: 54px;
background: -webkit-linear-gradient(#eee, #333);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe that this can be done w/o the prefix

}

.title {
text-align: center;
color: white;
font-family: 'Arimo', sans-serif;
}

figcaption {
padding: 5px;
border: 3px solid gray;
color: white;
text-align: center;
word-wrap: normal;
background: -webkit-linear-gradient(bottom left, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -o-linear-gradient(bottom left, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: linear-gradient(to top right, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 );
font-family: 'Raleway', sans-serif;
opacity: .75;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will fail if you need IE8 support, just FYI

}

button {
margin-left: auto;
margin-right: auto;
display: block;
height: 50px;
width: 50px;
border-radius: 50px;
border: 1px solid #000;
background: #959595;
cursor: pointer;
color: white;
background: -moz-linear-gradient(-45deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
background: -webkit-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -o-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -ms-linear-gradient(-45deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: linear-gradient(135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 );

}

.description {
color: white;
}

.wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
}

a:link {
color: white;
}

a:visited {
color: red;
}
1 change: 1 addition & 0 deletions css-core-architecture
Open in desktop
Submodule css-core-architecture added at e9ef18