diff --git a/README.md b/README.md index 54ce3414a..b277ca0ce 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,19 @@ # 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. +News web site: +We were tasked to make a website with responsive design, using both grid and flexbox. ## 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? + +-Planing: I started by creating a sketch on Figma to get an idea on how the website should look. +-Approach: first i gather inspiration online, how to make different grids and flexboxes. I started experimenting with different css styles to design different containers. A lot of time was spent on alligning the text, and make everything look good. +-Techniques: I used primarly flexbox and grid, I used illustrator to create the logo and adjust the size of the images, I asked a lot to chatgpt, google, I read a lot on w3shools, blogs and watched tutorials. +-Future: I would like to go more to detal for example with the buttons's corner rounded, and make everything more harmonious, I also want to be better at pushing my changes to Github + ## 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. +Link to web page: + +https://tourmaline-sorbet-57ea31.netlify.app/ \ No newline at end of file diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json new file mode 100644 index 000000000..7a73a41bf --- /dev/null +++ b/code/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/code/images/ -2.jpg b/code/images/ -2.jpg new file mode 100644 index 000000000..c302899df Binary files /dev/null and b/code/images/ -2.jpg differ diff --git a/code/images/ -3.jpg b/code/images/ -3.jpg new file mode 100644 index 000000000..dd623de1e Binary files /dev/null and b/code/images/ -3.jpg differ diff --git "a/code/images/\"Wild Flowers\" for FGUK Magazine - Valentin Fabre - Photographe.jpg" "b/code/images/\"Wild Flowers\" for FGUK Magazine - Valentin Fabre - Photographe.jpg" new file mode 100644 index 000000000..8c121e76f Binary files /dev/null and "b/code/images/\"Wild Flowers\" for FGUK Magazine - Valentin Fabre - Photographe.jpg" differ diff --git a/code/images/LOGOGOODWEB.png b/code/images/LOGOGOODWEB.png new file mode 100644 index 000000000..130f99841 Binary files /dev/null and b/code/images/LOGOGOODWEB.png differ diff --git a/code/images/Man with tulips.jpg b/code/images/Man with tulips.jpg new file mode 100644 index 000000000..29863f8c8 Binary files /dev/null and b/code/images/Man with tulips.jpg differ diff --git a/code/images/NEWSLOGO.png b/code/images/NEWSLOGO.png new file mode 100644 index 000000000..ddfe069ee Binary files /dev/null and b/code/images/NEWSLOGO.png differ diff --git a/code/images/aboutus.png b/code/images/aboutus.png new file mode 100644 index 000000000..a823c8d12 Binary files /dev/null and b/code/images/aboutus.png differ diff --git a/code/images/adhd-01.png b/code/images/adhd-01.png new file mode 100644 index 000000000..a696fc143 Binary files /dev/null and b/code/images/adhd-01.png differ diff --git a/code/images/fb.png b/code/images/fb.png new file mode 100644 index 000000000..630155b0d Binary files /dev/null and b/code/images/fb.png differ diff --git a/code/images/gender-01.png b/code/images/gender-01.png new file mode 100644 index 000000000..7760329c7 Binary files /dev/null and b/code/images/gender-01.png differ diff --git a/code/images/logoweb.svg b/code/images/logoweb.svg new file mode 100644 index 000000000..2d4f4df45 --- /dev/null +++ b/code/images/logoweb.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/code/images/meadows-01.png b/code/images/meadows-01.png new file mode 100644 index 000000000..bc655d18e Binary files /dev/null and b/code/images/meadows-01.png differ diff --git a/code/images/news1.jpg b/code/images/news1.jpg new file mode 100644 index 000000000..0879a804d Binary files /dev/null and b/code/images/news1.jpg differ diff --git a/code/images/news1.png b/code/images/news1.png new file mode 100644 index 000000000..428e6c8f8 Binary files /dev/null and b/code/images/news1.png differ diff --git a/code/images/news2-01.png b/code/images/news2-01.png new file mode 100644 index 000000000..5cf9329f2 Binary files /dev/null and b/code/images/news2-01.png differ diff --git a/code/images/onlygoodnewslogo-01.png b/code/images/onlygoodnewslogo-01.png new file mode 100644 index 000000000..99e0a491f Binary files /dev/null and b/code/images/onlygoodnewslogo-01.png differ diff --git a/code/images/pink.png b/code/images/pink.png new file mode 100644 index 000000000..536dbacc6 Binary files /dev/null and b/code/images/pink.png differ diff --git a/code/images/strawbe.png b/code/images/strawbe.png new file mode 100644 index 000000000..9ae9844af Binary files /dev/null and b/code/images/strawbe.png differ diff --git a/code/images/suflowers-01.png b/code/images/suflowers-01.png new file mode 100644 index 000000000..4d37bcd12 Binary files /dev/null and b/code/images/suflowers-01.png differ diff --git a/code/images/tea-01.png b/code/images/tea-01.png new file mode 100644 index 000000000..158c673ad Binary files /dev/null and b/code/images/tea-01.png differ diff --git a/code/index.html b/code/index.html index 7efea3242..21db22952 100644 --- a/code/index.html +++ b/code/index.html @@ -1,23 +1,243 @@ - - - - News Site - - + + + News website + + + + + +
- + +
+ + + +
+
+
+

Good News of the Day

+
+
+ +
+ +
+
+ +
+
+ + + +
+
+

Strawberries are good for you

+


Eating just one cup of strawberries a day can significantly improve your cardiovascular health. + Strawberries are a rich source of vitamin C, + packed with a diverse array of essential nutrients + and beneficial bioactive compounds that contribute to overall well-being. +

+ + +
-
- +
+ +
+
+ + +
+
+
+

Latest good news

+

update your dopamine

+
+
+ +
+
+ +
+
+ September 27, 2024 +

UK woman graduates as doctor at 41 with a message to 'Never give up

+

Becs Bradford, who once dropped out of school at the age of 15, + has defied the odds to graduate as a doctor at 41. Her journey + from a challenging childhood to earning a medical degree from the + University of Bristol is inspiring many.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

‘Meadowmaker’ flowers herald return of rare bumblebee in + England after scenic meadows restored

+

In west England, a series of hills cloaked in heather and + wildflowers are the target of a national restoration project + that is already seeing success.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

Study: Gender equality could cut corruption

+

Researchers analyzed data from 35 European countries + and found a close relationship between substantial female + presence in decision-making positions and transparency and + lower levels of corruption. +

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

ADHD traits may have evolutionary advantages

+

ADHD is a neurodevelopmental condition with symptoms including impulsiveness and distractibility, + often perceived as a disadvantage in today's society. New studies show that ADHD might instead be a superpower that helps in situations where physical activity and rapid decision-making are crucial.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

Thousands of sunflowers planted by drones

+

In Queensland, Australia, a farm is displaying modern, non-invasive farming practices, + hoping other growers will follow: they planted 45'000 sunflower seeds with one single drone.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

Tea or coffee? Both, says this study

+

A group of researchers assessed the links between drinking tea and coffee and two of the most prevalent health problems in the world: stroke and dementia. + Those who drank both coffee and tea on a daily basis reported a significantly lower risk of both.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

Colombia recognizes women's full-time work

+

In Bogotá, an estimated 1.2 million women work full-time as caregivers for family members - unpaid, of course. The city has now developed + a scheme to fight the country's gender inequality by empowering these women.

+ Read More +
+
+ + +
+
+ +
+
+ September 27, 2024 +

Tulips grown with heat from bitcoin mining

+

While others decided not to grow this year, one Dutch tulip farmer found an ingenious solution to the soaring energy prices across Europe: she + heats her giant greenhouse near Amsterdam with the heat emitted from bitcoin mining servers.

+ Read More +
+
+ +
+
+
+ -
- + +
+
+
+
+ +
+
+
+

About us

+

#dailydopamine

+
+

Welcome to Only good news, where our mission is to + spread positivity and celebrate the good news in the + world. Our goal is to foster an optimistic outlook + by sharing uplifting stories and inspiring moments + that bring a smile to your face. Join us in our journey + to brighten the day with a dose of happiness, and don’t + forget to share your own good news using our hashtag, + #DailyDopamine, on social media.

+

Together, let’s create a wave + of positivity that echoes across the globe.

+
+
+
+ + + + + + + diff --git a/code/style.css b/code/style.css index d6be16468..67de6642f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,366 @@ -html { - background: #0025ff; - color: #fff; +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap'); + +:root{ + --Playfair: 'Playfair Display', serif; + --Quicksand: 'Quicksand', sans-serif; + --Roboto: 'Roboto', sans-serif; + --dark: #42528E; + --exDark: #F27530; +} +*{ + padding: 0; + margin: 0; + font-family: var(--Quicksand); +} +body{ + line-height: 1.4; + color: var(--dark); +} +img{ + width: 100%; + display: block; +} +.container{ + max-width: 1320px; + margin: 0 auto; + padding: 0 1.2rem; + text-align: center; +} + +/* header */ +header{ + /* min-height: 20vh;*/ + display: flex; + flex-direction: column; + justify-content: stretch; +} +.navbar{ + background-color: #8E9AD1; + padding: 1.2rem; +} +.navbar-brand{ + color: #fff; + font-size: 2rem; + display: block; + text-align: center; + text-decoration: none; + font-family: var(--exDark); + letter-spacing: 1px; +} +.navbar-nav{ + padding: 0.8rem 0 0.2rem 0; + text-align: center; +} +.navbar-nav a{ + text-transform: uppercase; + font-family: var(--Roboto); + letter-spacing: 1px; + font-weight: 500; + color: #42528E; + text-decoration: none; + display: inline-block; + padding: 0.4rem 0.1rem; + letter-spacing: 3px; + transition: opacity 0.5s ease; +} +.navbar-nav a:hover{ + opacity: 0.7; +} +.banner{ + flex: 1; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #ffffff; + background-color: #8E9AD1; +} +.banner-img{ + padding: 90%; +} +.banner-title{ + font-size: 3rem; + font-family: var(--Quicksand); + line-height: 1.2; +} +.banner p{ + padding: 1rem 0 2rem 0; + font-size: 1.2rem; + text-transform: capitalize; + font-family: var(--Roboto); + font-weight: 300; + word-spacing: 2px; +} +.banner form{ + background: #fff; + border-radius: 2rem; + padding: 0.6rem 1rem; + display: flex; + justify-content: space-between; +} +.search-input{ + font-family: var(--Roboto); + font-size: 1.1rem; + width: 100%; + outline: 0; + padding: 0.6rem 0; + border: none; +} +.search-input::placeholder{ + text-transform: capitalize; +} +.search-btn{ + width: 40px; + font-size: 1.1rem; + color: var(--dark); + border: none; + background: transparent; + outline: 0; + cursor: pointer; +} + +/* design */ +.design{ + padding: 4.5rem 0; +} +.title{ + text-align: center; + padding: 1rem 0; + font-size: x-large; + color: #42528E; + padding-bottom: 1.5rem; +} +.design-content{ + margin: 2rem 0; +} +.design-item{ + cursor: pointer; + margin: 1.5rem 0; + +} +.design-img{ + position: relative; + overflow: hidden; +} +.design-img::after{ + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); +} +.design-img img{ + transition: all 0.5s ease; +} +.design-item:hover img{ + transform: scale(1.2); +} +.design-img span:first-of-type{ + position: absolute; + z-index: 1; + top: 10px; + left: 10px; + background: var(--exDark); + color: #fff; + padding: 0.25rem 1rem; +} +.design-img span:last-of-type{ + position: absolute; + z-index: 1; + bottom: 10px; + right: 10px; + color: #fff; + font-weight: 700; + font-size: 1.1rem; +} +.design-title{ + padding: 1rem; + font-size: 1.2rem; + text-align: center; + width: 95%; + margin: 0 auto; +} +.design-text{ + margin: 2.2rem 0; + padding: 0 1rem; + font-size: 1.2rem; +} +.design-title a{ + color: var(--dark); + text-decoration: none; + text-transform: capitalize; + font-family: var(--Playfair); +} + +/* blog */ +.blog{ + background: #f9f9f9; + padding: 4.5rem 0; +} +.blog-content{ + margin: 2rem 0; +} +.blog-img{ + position: relative; + overflow: hidden; +} +.blog-img span{ + position: absolute; + bottom: 10px; + right: 10px; + background: var(--exDark); + color: #fff; + font-size: 1.4rem; + padding:0%; +} +.blog-img img{ + transition: all 0.5s ease; +} +.blog-item:hover img{ + transform: scale(1.1); +} +.blog-text{ + margin: 2.2rem 0; + padding: 0 1rem; +} +.blog-text span{ + font-weight: 300; + display: block; + padding-bottom: 0.5rem; +} +.blog-text h2{ + font-family: var(--Robotor); + padding: 1rem 0; + font-size: 1.4rem; + font-weight: 500; +} +.blog-text p{ + font-weight: 300; + font-size: 1.1rem; + opacity: 0.9; + padding-bottom: 1.0rem; +} +.blog-text a{ + font-family: var(--Roboto); + font-size: 1.1rem; + text-decoration: none; + color: var(--dark); + display: inline-block; + background: var(--dark); + color: #fff; + padding: 0.55rem 1.2rem; + transition: all 0.5s ease; +} +.blog-text a:hover{ + background: var(--exDark); +} + +/* about */ +.about{ + padding: 4.5rem 0; +} +.about-text{ + margin: 2rem 0; +} +.about-text > p{ + font-size: 1.1rem; + padding: 0.6rem 0; + opacity: 0.8; +} + +/* footer */ +footer{ + background: var(--exDark); + color: #fff; + text-align: center; + padding: 2rem 0; +} +.social-links{ + display: flex; + justify-content: center; + margin-bottom: 1.4rem; +} +.social-links a{ + border: 2px solid #fff; + color: #ffffff; + display: block; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + text-decoration: none; + margin: 0 0.3rem; + transition: all 0.5s ease; + font-size: 20px; +} + +.social-links a:hover{ + background: #ffffff; + color: var(--exDark); +} +.footer span{ + margin-top: 1rem; + display: block; + font-family: var(--Playfair); + letter-spacing: 2px; +} + +/* Media Queries */ +@media screen and (min-width: 540px){ + .navbar-nav a{ + padding-right: 1.2rem; + padding-left: 1.2rem; + } + .banner form{ + margin-top: 1.4rem; + width: 80%; + margin-left: auto; + margin-right: auto; + } +} + +@media screen and (min-width: 768px){ + .navbar .container{ + display: flex; + align-items: center; + justify-content: space-between; + } + .search-input{ + padding: 0.8rem 0; + } + .design-content{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + } + .design-item{ + margin: 0; + } + .blog-content{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + } +} + +@media screen and (min-width: 992px){ + .blog-content{ + grid-template-columns: repeat(4, 1fr); + } + .about-content{ + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 3rem; + align-items: center; + } +} + +@media screen and (min-width: 1200px){ + .design-content{ + grid-template-columns: repeat(2, 1fr); + } }