diff --git a/README.md b/README.md index 54ce3414a..e57cf3fa3 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,26 @@ # News Site -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. +In this assignment, I was asked to create a news website with a theme of my choice. I chose to make a news site for parents about babies. ## The problem -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? +How I Approached the Problem: + +To solve the problem, I started by carefully analyzing the requirements and breaking them down into smaller tasks. I created a simple plan on paper that outlined each step I needed to take, from setting up the basic structure to integrating key features. + +Tools and Techniques I Used: + +I used HTML and CSS to develop the website. My approach involved using both Grid and Flexbox in CSS to ensure that the site was both user-friendly and responsive. I also used Media Queries and Keyframes to enhance functionality and experiment with animations. + +Planning Process: + +I began by sketching the layout and features of the site on paper. Once the structure was clear, I moved on to designing the look and planning how to structure the code, with a focus on core functionality first. By continuously testing in VS Code and checking the results in the browser, I was able to improve functionality and refine the design. + +What I Would Do Next If I Had More Time: + +With more time, I would focus on enhancing the user experience by adding more interactive elements and further refining the design. I would explore the possibility of adding additional features such as slideshows, videos, and more clickable elements. I believe these additions would increase the value of the site. ## 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. + +https://babies-focusedonparents.netlify.app/code/ + diff --git a/code/assets/Final-logo.png b/code/assets/Final-logo.png new file mode 100644 index 000000000..944a2e00e Binary files /dev/null and b/code/assets/Final-logo.png differ diff --git a/code/assets/babyfood.webp b/code/assets/babyfood.webp new file mode 100644 index 000000000..b3462dffd Binary files /dev/null and b/code/assets/babyfood.webp differ diff --git a/code/assets/babyroom.png b/code/assets/babyroom.png new file mode 100644 index 000000000..71a9b4620 Binary files /dev/null and b/code/assets/babyroom.png differ diff --git a/code/assets/eating.webp b/code/assets/eating.webp new file mode 100644 index 000000000..1f7b7cf75 Binary files /dev/null and b/code/assets/eating.webp differ diff --git a/code/assets/icecream.webp b/code/assets/icecream.webp new file mode 100644 index 000000000..44b70c4fd Binary files /dev/null and b/code/assets/icecream.webp differ diff --git a/code/assets/logo.svg b/code/assets/logo.svg deleted file mode 100644 index fef43dc1f..000000000 --- a/code/assets/logo.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/code/assets/nature.webp b/code/assets/nature.webp new file mode 100644 index 000000000..cea5cc777 Binary files /dev/null and b/code/assets/nature.webp differ diff --git a/code/assets/play.webp b/code/assets/play.webp new file mode 100644 index 000000000..794d9a0e6 Binary files /dev/null and b/code/assets/play.webp differ diff --git a/code/assets/sleeping.webp b/code/assets/sleeping.webp new file mode 100644 index 000000000..0c4f4cbbf Binary files /dev/null and b/code/assets/sleeping.webp differ diff --git a/code/assets/stroller.webp b/code/assets/stroller.webp new file mode 100644 index 000000000..bdf9a7761 Binary files /dev/null and b/code/assets/stroller.webp differ diff --git a/code/assets/toys.webp b/code/assets/toys.webp new file mode 100644 index 000000000..a4f973ac6 Binary files /dev/null and b/code/assets/toys.webp differ diff --git a/code/index.html b/code/index.html index 7efea3242..20d1b664b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,23 +1,121 @@ - - - - News Site - - - - -
- -
- -
- -
- -
- -
- - + + + + + Babies - Focused on parents + + + + + + + +
+ + babies-logo + + + +
+ +
+ + + Babyroom + +
+ + +
+

Baby news

+

The Adorable New Baby Trend Everyone’s Talking About! đŸŒđŸ‘¶ Parents are buzzing over this sweet, cozy product + designed to make life with a little one even more delightful. It’s the must-have for every stylish baby!

+ + + +
+ + + Baby play +

Why playtime is important for infants

+

Studies show that babies need to play to feel good, see the rest of the study.

+ + + + + Baby sleeping +

Is your child getting enough sleep?

+

Three signs that your child needs more sleep.

+ + + + + Baby stroller +

Best strollers in 2024

+

And which strollers you absolutely should not buy.

+ + + + + Baby eating +

The new food hack

+

The no1 fork everyone is talking about. But is it worth trying it?

+ + + + + Baby food +

Make a nutritious meal for your baby

+

5 recipies with nutritious meals for your little one.

+ + + + + Baby eating icecream +

Ice cream, good or bad?

+

When is the right time to start introducing ice cream to infants? And is it really that bad?

+ + + + + Toys +

"Toys ar getting better and better"

+

We had a roundtour in a childrens toys factory!

+ + + + + Baby in nature +

Nature is healing

+

Discover why your infant should be out two hours a day in the nature.

+ + + + + + + + + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index d6be16468..6c381a863 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,198 @@ html { - background: #0025ff; - color: #fff; + background: #ffd3cb; + color: rgb(38, 38, 38); } + +/* Appliceras för hela sidan. HÀr har jag anvÀnt display: grid för att lÀgga grunden av rutnÀt över hela hemsidan*/ +body { + font-family: Georgia, 'Times New Roman', Times, serif; + padding: 0 15px; + display: grid; + grid-template-columns: repeat(12, 1fr); + +} + +/* hÀr Àr min header/nav bar */ +header { + margin: 5px 0 10px 0; + grid-column: span 12; + display: flex; + justify-content: space-between; + align-items: center; + + img { + width: 150px; + } +} + +/* Bara lÀnkarna i headern/navigation bar */ +.header-link { + padding: 0 15px; + font-weight: bold; + color: black; + font-size: 90%; +} + +/* gör sÄ att det blir understruket i navbar lÀnkarna nÀr jag drar pekaren över */ +.header-link:hover { + text-decoration: underline; + +} + +/* SÄ att inte hamburgermenyn syns i desktop */ +.hamburger-menu { + display: none; +} + +/* enbart sista lÀnken som har fÄtt annan styling och ser ut som en knapp, har ocksÄ lagt till animering pÄ sista cod-raden */ +.link-4 { + display: box; + padding: 10px 20px; + border-radius: 20px; + animation: colorChange 3s infinite; + +} + +/* tillhör animeringen */ +@keyframes colorChange { + 0% { + background-color: lightsteelblue; + } + + 100% { + background-color: white; + } +} + +/* Alla lÀnkar Àr utan linje under */ +a { + text-decoration: none; +} + +h1 { + font-size: 320%; +} + +/* styling av bild och text tillsammans i den första stora huvudnyheten */ +.big-news { + background-color: rgb(225, 238, 237); + grid-column: span 6; + + p { + font-size: 120%; + line-height: 30px; + } + + img { + width: 100%; + height: 100%; + border-radius: 15px 0 0 0; + + } +} + +/* styling av bara bilden, hÀr la jag en bakgrundsfÀrg sÄ att nÀr jag rundade hörnen pÄ bilden sÄ syntes ingen blÄ bakgrund */ +.picture { + background-color: #ffd3cb; +} + +/* la padding runt texten sÄ den blev lite mer centrerad, och avrundade ett hörn */ +.content { + padding: 0 7% 5% 7%; + border-radius: 0 15px 0 0; + +} + +/* styling av knapp pÄ "big news" */ +button { + display: block; + padding: 10px 20px; + margin-top: 50px; + border: none; + border-radius: 20px; + background: #fac9c0; + color: white; + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); +} + +/* sÄ att det blir "suddigt" över knappen nÀr man hÄller pÄ den */ +button:hover { + opacity: 0.7; + +} + +/* styling av alla smÄnyheterna sÄ de ser lika dana ut */ +.small-news { + background-color: rgb(225, 238, 237); + color: rgb(38, 38, 38); + grid-column: span 3; + display: flex; + border: 15px solid antiquewhite; + flex-direction: column; + + p { + padding: 0 3% 0 3%; + } + + h3 { + padding: 0 3% 0 3%; + } + +} + +/* smÄ nyheterna blir suddiga nÀr man hÄller pekaren pÄ */ +.small-news:hover { + opacity: 0.7; +} + +footer { + margin: 10px 0 10px 0; + grid-column: span 12; + + h4 { + font-size: 80%; + font-family: Arial, Helvetica, sans-serif; + } + +} + +/* för mobiltelefoner */ +@media (max-width: 667px) { + .header-link { + display: none; + } + + .hamburger-menu { + display: flex; + font-size: 30px; + } + + .big-news { + grid-column: span 12; + } + + .picture img { + border-radius: 15px 15px 0 0; + } + + .content { + border-radius: 0; + } + + .small-news { + grid-column: span 12; + } +} + +/* för surfplattor */ +@media (min-width: 668px) and (max-width: 1024px) { + .small-news { + grid-column: span 6; + } + + .hamburger-menu { + display: none; + } +} \ No newline at end of file