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

add readme file/final submit #4

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add readme file/final submit #4

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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added Zortman-Muhammed Safa Yaşar/.DS_Store
View file
Open in desktop
Binary file not shown.
18 changes: 18 additions & 0 deletions Zortman-Muhammed Safa Yaşar/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Changelog

##### The following is a list of changes that were made to Casey/Henok's assignment "css-core-architecture".

1. Re-organization of HTML
1. Fixed alignment/indentation
2. Removed unnecessary/unused element tags
3. Added missing element closing tags
4. Improved existing element semantics
5. Added spacing and comments for readability

2. Re-organization of CSS
1. Added comments and spacing to associate rules with page structure
2. Encorporated B.E.M. naming convention
3. Used class names that better describe the elements
4. Removed unnecessary classes **(This could be considered subjective. These classes were unnecessary for the project in it's current state but could prove useful if building for future)**

**Note:** For reference, the original project is contained in the directory "original-project".
149 changes: 149 additions & 0 deletions Zortman-Muhammed Safa Yaşar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Arimo:700italic|Raleway' rel='stylesheet' type='text/css'>

<meta charset='utf-8'>
<title>Top Albums</title>
</head>
<body>
<header>
<h1 class="header">Team Florida's Current Music Picks</h1>
<h1 class="title">Henok's Top Five Of The Moment</h1>
</header>

<!-- 1st ROW SECTION -->

<section>
<article class="album-block">
<figure>
<img src="http://thissongissick.com/wp-content/uploads/2014/10/Run-The-Jewels.jpg" alt="Run The Jewels 2">
<figcaption class="album-block__caption">Run The Jewels - Run The Jewels 2</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=Hd1dTrFdZkA">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://cdn4.pitchfork.com/news/55815/fc741210.jpg" alt="Black Moon Spell">
<figcaption class="album-block__caption">King Tuff - Black Moon Spell</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=9ufWAU8RjC8">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://www.aux.tv/wp-content/uploads/2014/04/freddie-gibbs-madlib-pinata.jpg" alt="Pinata">
<figcaption class="album-block__caption">Freddie Gibbs & Madlib - Pinata</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=98nUZ938oiU">Find</a>
</button>
</article>
</section>

<!-- 2nd ROW SECTION -->

<section>
<article class="album-block">
<figure>
<img src="http://cdn4.pitchfork.com/news/53290/1e766e86.jpg" alt="Present Tense">
<figcaption class="album-block__caption">Wild Beasts - Present Tense</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=9IIbbFIQTKI&list=PLaXEUnRhowO5T2vMgPCrH0XjBnyIeyml2">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://www.rockleak.com/uploads/posts/2014-07/1406054962_hippiesabotage-sunny-cover.jpg" alt="Sunny">
<figcaption class="album-block__caption">Hippie Sabotage - Sunny</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=zfnyoKu7ptw&list=PLQ83U7ao7jjBC1A5WNEdxxhEl8pmdbGXN">Find</a>
</button>
</article>
</section>

<!-- 3rd ROW SECTION -->

<h1 class="title">Casey's Five Picks Of The Moment</h1>

<section>
<article class="album-block">
<figure>
<img src="http://s26.postimg.org/3peaa76e1/subli.png" alt="Sublime">
<figcaption class="album-block__caption">Sublime - Sublime</figcaption>>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://s26.postimg.org/hx3yyuj2x/psy.png" alt="Hangover">
<figcaption class="album-block__caption">PSY & Snoop - Hangover</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://s26.postimg.org/w8ivq0bvd/yeez.png" alt="Mercy">
<figcaption class="album-block__caption">Kanye West - Mercy</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=7Dqgr0wNyPo">Find</a>
</button>
</article>
</section>

<!-- 4th ROW SECTION -->

<section>
<article class="album-block">
<figure>
<img src="http://s26.postimg.org/k2y9tcmjd/image.png" alt="Enjoy The Silence">
<figcaption class="album-block__caption">Depeche Mode - Enjoy The Silence</figcaption>
</figure>
<p>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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=m0AKJMGxwpE">Find</a>
</button>
</article>

<article class="album-block">
<figure>
<img src="http://s26.postimg.org/e3aipp1qx/flo.png" alt="Wild Ones">
<figcaption class="album-block__caption">Flo Rida - Wild Ones</figcaption>
</figure>
<p> class=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 class="album-block__button">
<a href="https://www.youtube.com/watch?v=bpOR_HuHRNs">Find</a>
</button>
</article>
</section>
</body>
</html>
Binary file added Zortman-Muhammed Safa Yaşar/original-project/.DS_Store
View file
Open in desktop
Binary file not shown.
112 changes: 112 additions & 0 deletions Zortman-Muhammed Safa Yaşar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@

/*********** PAGE LAYOUT *************/

body {
background-image: url('http://p1.pichost.me/i/36/1591464.jpg');
background-attachment: fixed;
background-size: cover;
background-repeat: no repeat;
}

a:link {
color: white;
}

a:visited {
color: red;
}

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

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



/*********** HEADER *************/

.header {
text-align: center;
font-size: 54px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



/*********** ALBUM MODULE *************/

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

.album-block__caption {
padding: 5px;
border: 3px solid gray;
color: white;
text-align: center;
word-wrap: normal;
background: -moz-linear-gradient(-45deg, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809));
background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);
background: -o-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);
background: -ms-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%);
background: linear-gradient(135deg, #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;
}

.album-block p {
color: white;
}

.album-block__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 );
}

.album-block img {
width: 95%;
}