diff --git a/README.md b/README.md index 54ce3414a..64d9100c5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # News Site -Replace this readme with your own information about your project. +Replace this readme with your own information about your project. Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. @@ -9,4 +9,13 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? ## View it live + Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. + + - News Site - - - - -
- -
- -
- -
- -
- -
- - + + + + + + Viny-fy + + + + +
+
+ +
+

Viny-fy

+

Your Music Magazine

+
+
+
+ +
+
+ +

Selection for your musical soul

+

You won't believe the crazy news of the day! +
Introducing a selection of Soulful Divas: Sade, Danitsa, NNAVY, and Laufey. These four talented + women are + making waves in the music industry with their captivating voices, diverse backgrounds, and + innovative sound. +

+ + Vinyl Art + +
+

Artist of the Week

+ + + + +
+ +
+

Festival of the Week

+

+ Montreux Jazz Festival: A Legendary Musical Gathering +
+ Held annually on the shores of Lake Geneva, the Montreux Jazz Festival is one of the world’s most + prestigious music events. +

+ Watch Montreux Jazz Festival on YouTube +
+ + +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js new file mode 100644 index 000000000..ebdeff6e8 --- /dev/null +++ b/code/script.js @@ -0,0 +1,17 @@ + + + + diff --git a/code/style.css b/code/style.css index d6be16468..fcd140bb8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,148 @@ -html { - background: #0025ff; +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; color: #fff; + background-color: #000; /* Black background */ +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +img, iframe { + max-width: 100%; + height: auto; /* Ensure responsive images and iframes */ +} + +a { + color: #007bff; /* Link color */ + text-decoration: none; +} + +a:hover { + text-decoration: underline; /* Underline on hover */ +} + +.header-content { + display: flex; + align-items: center; /* Vertically centers items */ + justify-content: space-between; /* Space between logo and text */ + padding: 20px; /* Add padding around header */ +} + +#logo img { + width: 100px; /* Logo size */ + height: auto; /* Keep logo proportions */ +} + +header h1, header h2 { + margin: 0; /* Remove default margin */ + padding-left: 20px; /* Space between titles and logo */ +} + +header { + background-color: #378d20; /* Header background color */ + color: white; /* Header text color */ +} + +#main { + padding: 20px; + background-color: #f8f9fa; /* Main section background */ +} + +h3 { + color: #a233d1; /* H3 color */ +} + +p { + margin-bottom: 15px; +} + +#artists { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid layout */ + gap: 20px; + padding: 20px; +} + +article { + background-color: #220404; /* Article background */ + padding: 20px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add subtle shadow */ +} + +.festival { + display: flex; + flex-direction: column; + align-items: center; /* Center items horizontally */ + background-color: #1e0303; /* Festival section background */ + padding: 30px; + margin-top: 30px; + border-radius: 26px; /* Rounded corners */ +} + +footer { + background-color: #343a40; /* Footer background */ + color: #fff; /* Footer text color */ + text-align: center; /* Center text */ + padding: 20px; + margin-top: 20px; +} + +footer h3 { + color: #f8f9fa; +} + +footer ul { + list-style-type: none; /* Remove bullet points */ + padding: 0; +} + +footer li { + padding: 10px 0; +} + +footer a { + color: lightblue; /* Link color in footer */ +} + +@media (max-width: 768px) { + body { + padding: 10px; + } + + .header-content, .festival, footer { + padding: 15px; + } + + h1, h2, h3 { + font-size: smaller; /* Reduce font size on small screens */ + } +} + +@media (min-width: 1200px) { + .header-content { + padding: 40px; + } + + #logo img { + width: 150px; /* Larger logo on big screens */ + } +} + +@media (max-width: 480px) { + .header-content { + flex-direction: column; /* Stack header content vertically on small screens */ + padding: 10px; + } + + h1, h2, h3 { + font-size: 1.2rem; /* Smaller text on very small screens */ + } + + article { + padding: 15px; /* Less padding in articles on small screens */ + } }