diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..7da7123 Binary files /dev/null and b/.DS_Store differ diff --git "a/Zortman-Muhammed Safa Ya\305\237ar/.DS_Store" "b/Zortman-Muhammed Safa Ya\305\237ar/.DS_Store" new file mode 100644 index 0000000..c4a1536 Binary files /dev/null and "b/Zortman-Muhammed Safa Ya\305\237ar/.DS_Store" differ diff --git "a/Zortman-Muhammed Safa Ya\305\237ar/Readme.md" "b/Zortman-Muhammed Safa Ya\305\237ar/Readme.md" new file mode 100644 index 0000000..50f857c --- /dev/null +++ "b/Zortman-Muhammed Safa Ya\305\237ar/Readme.md" @@ -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". diff --git "a/Zortman-Muhammed Safa Ya\305\237ar/index.html" "b/Zortman-Muhammed Safa Ya\305\237ar/index.html" new file mode 100644 index 0000000..b65558b --- /dev/null +++ "b/Zortman-Muhammed Safa Ya\305\237ar/index.html" @@ -0,0 +1,149 @@ + + + + + + + + Top Albums + + +
+

Team Florida's Current Music Picks

+

Henok's Top Five Of The Moment

+
+ + + +
+
+
+ Run The Jewels 2 +
Run The Jewels - Run The Jewels 2
+
+

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.

+ +
+ +
+
+ Black Moon Spell +
King Tuff - Black Moon Spell
+
+

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.

+ +
+ +
+
+ Pinata +
Freddie Gibbs & Madlib - Pinata
+
+

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.

+ +
+
+ + + +
+
+
+ Present Tense +
Wild Beasts - Present Tense
+
+

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. +

+ +
+ +
+
+ Sunny +
Hippie Sabotage - Sunny
+
+

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. +

+ +
+
+ + + +

Casey's Five Picks Of The Moment

+ +
+
+
+ Sublime +
Sublime - Sublime
> +
+

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. +

+ +
+ +
+
+ Hangover +
PSY & Snoop - Hangover
+
+

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.

+ +
+ +
+
+ Mercy +
Kanye West - Mercy
+
+

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.

+ +
+
+ + + +
+
+
+ Enjoy The Silence +
Depeche Mode - Enjoy The Silence
+
+

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. +

+ +
+ +
+
+ Wild Ones +
Flo Rida - Wild Ones
+
+

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. +

+ +
+
+ + diff --git "a/Zortman-Muhammed Safa Ya\305\237ar/original-project/.DS_Store" "b/Zortman-Muhammed Safa Ya\305\237ar/original-project/.DS_Store" new file mode 100644 index 0000000..5008ddf Binary files /dev/null and "b/Zortman-Muhammed Safa Ya\305\237ar/original-project/.DS_Store" differ diff --git "a/Zortman-Muhammed Safa Ya\305\237ar/style.css" "b/Zortman-Muhammed Safa Ya\305\237ar/style.css" new file mode 100644 index 0000000..be1c5dd --- /dev/null +++ "b/Zortman-Muhammed Safa Ya\305\237ar/style.css" @@ -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%; +} + + + + + + + + + + + + + + +