Finish challenge

src/index.css

@@ -0,0 +1,242 @@
+/*google fonts*/
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+/*
+    google fonts uses
+    font-family: 'Roboto', sans-serif;
+*/
+
+
+/*general styles*/
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 10px;
+    color: gray;
+    font-family: 'Roboto', sans-serif;
+}
+
+img {
+    width: 100%;
+}
+
+body {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e5e5e5;
+}
+
+main {
+    box-shadow: 2px 2px 4px #000000;
+    background-color: white;
+}
+
+h1 {
+    font-weight: 400;
+    color: black;
+}
+
+.up {
+    display: flex;
+}
+
+.up-info {
+    border-bottom: lightgray .1rem solid;
+}
+
+.down {
+    display: flex;
+    justify-content: space-between;
+}
+
+
+/*small and medium device*/
+
+@media screen and (min-width:320px) and (max-width:424px) {
+    /*up section*/
+    /*up figure*/
+    .up figure {
+        max-width: 10rem;
+    }
+    /*up info*/
+    .up-info {
+        min-width: 14rem;
+        padding: 0 3rem;
+        padding-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+    .up-info h1 {
+        font-size: 2rem;
+    }
+    .up-info div {
+        padding: 1rem 0;
+    }
+    .up-info p {
+        font-size: 1.3rem;
+    }
+    /*down section*/
+    .down {
+        padding: 2rem;
+        align-items: center;
+    }
+    .down p {
+        font-size: 1.5rem;
+    }
+    .stars {
+        font-size: 2rem;
+    }
+    .stars i {
+        padding: 0 .2rem;
+    }
+}
+
+
+/*large mobil*/
+
+@media screen and (min-width:425px) and (max-width:767px) {
+    html {
+        font-size: 13px;
+    }
+    /*up section*/
+    /*up figure*/
+    .up figure {
+        max-width: 10rem;
+    }
+    /*up info*/
+    .up-info {
+        min-width: 14rem;
+        padding: 0 3rem;
+        padding-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+    .up-info h1 {
+        font-size: 2rem;
+    }
+    .up-info div {
+        padding: 1rem 0;
+    }
+    .up-info p {
+        font-size: 1.3rem;
+    }
+    /*down section*/
+    .down {
+        padding: 2rem;
+        align-items: center;
+    }
+    .down p {
+        font-size: 1.5rem;
+    }
+    .stars {
+        font-size: 2rem;
+    }
+    .stars i {
+        padding: 0 .2rem;
+    }
+}
+
+
+/*tablet*/
+
+@media screen and (min-width:768px) and (max-width:1023px) {
+    html {
+        font-size: 24px;
+    }
+    /*up section*/
+    /*up figure*/
+    .up figure {
+        max-width: 10rem;
+    }
+    /*up info*/
+    .up-info {
+        min-width: 14rem;
+        padding: 0 3rem;
+        padding-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+    .up-info h1 {
+        font-size: 2rem;
+    }
+    .up-info div {
+        padding: 1rem 0;
+    }
+    .up-info p {
+        font-size: 1.3rem;
+    }
+    /*down section*/
+    .down {
+        padding: 2rem;
+        align-items: center;
+    }
+    .down p {
+        font-size: 1.5rem;
+    }
+    .stars {
+        font-size: 2rem;
+    }
+    .stars i {
+        padding: 0 .2rem;
+    }
+}
+
+
+/*desktop*/
+
+@media screen and (min-width:1024px) and (max-width:1440px) {
+    html {
+        font-size: 32px;
+    }
+    /*up section*/
+    /*up figure*/
+    .up figure {
+        max-width: 10rem;
+    }
+    /*up info*/
+    .up-info {
+        min-width: 14rem;
+        padding: 0 3rem;
+        padding-top: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+    }
+    .up-info h1 {
+        font-size: 2rem;
+    }
+    .up-info div {
+        padding: 1rem 0;
+    }
+    .up-info p {
+        font-size: 1.3rem;
+    }
+    /*down section*/
+    .down {
+        padding: 2rem;
+        align-items: center;
+    }
+    .down p {
+        font-size: 1.5rem;
+    }
+    .stars {
+        font-size: 2rem;
+    }
+    .stars i {
+        padding: 0 .2rem;
+    }
+}

src/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>challenge-CSS-05</title>
+    <!--font awesome-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!--Styles-->
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <!--start main section-->
+    <main>
+        <!--start up section-->
+        <section class="up">
+            <figure>
+                <img src="https://img.discogs.com/gShU8r63R83YRZB9p7082qlByRg=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-13419543-1553855000-5926.jpeg.jpg" alt="song image">
+            </figure>
+            <div class="up-info">
+                <h1>Rozes</h1>
+                <div>
+                    <p>Under the Grave</p>
+                    <p>(2016)</p>
+                </div>
+            </div>
+        </section>
+        <!--finish up section-->
+        <!--start down section-->
+        <section class="down">
+            <p>Rate this album</p>
+            <div class="stars">
+                <!--Stars-->
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star-o"></i>
+            </div>
+        </section>
+        <!--finish down section-->
+    </main>
+    <!--finish main section-->
+</body>
+
+</html>