diff --git a/README.md b/README.md index 54ce3414a..b5caac96b 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ # News Site +A news site with a main article and a grid of article. Used both flex box and grid to layout the page. The page need to be responsive. -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. ## The problem +I drew a sketch of the news site on paper. Decided to use flex box for the header and a grid for the main article and the grid of small articles. Would have been better with grid for the whole page layout, if I had more time I would have changed to grid of the whole page. + +If I would have more time I would have used some CSS animations.Include some links and buttons. -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. +Link to the deployed project: +https://therainbowmagazine.netlify.app/ diff --git a/code/assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg b/code/assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg new file mode 100644 index 000000000..6388dd142 Binary files /dev/null and b/code/assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg differ diff --git a/code/assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg b/code/assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg new file mode 100644 index 000000000..635cf387a Binary files /dev/null and b/code/assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg differ diff --git a/code/assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg b/code/assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg new file mode 100644 index 000000000..a7c50634d Binary files /dev/null and b/code/assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg differ diff --git a/code/assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg b/code/assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg new file mode 100644 index 000000000..50deeba85 Binary files /dev/null and b/code/assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg differ diff --git a/code/assets/icons8-rainbow-80.png b/code/assets/icons8-rainbow-80.png new file mode 100644 index 000000000..64d7bcb1b Binary files /dev/null and b/code/assets/icons8-rainbow-80.png 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/simon-berger-twukN12EN7c-unsplash.jpg b/code/assets/simon-berger-twukN12EN7c-unsplash.jpg new file mode 100644 index 000000000..b3310f5e0 Binary files /dev/null and b/code/assets/simon-berger-twukN12EN7c-unsplash.jpg differ diff --git a/code/index.html b/code/index.html index 7efea3242..c5db7ffde 100644 --- a/code/index.html +++ b/code/index.html @@ -1,23 +1,107 @@ - + + - - News Site + + + The Rainbow Magazine - - - -
- + + + + + + + +
+
+ +
Rainbow over lake +
+ +
+

SOMEWHERE OVER THE RAINBOW

+

What is the key to a colorful rainbow?

+
+
-
- -
+
+
+
+
+ Colorful sky above mountains +
+

THE MOST FAMILIAR RAINBOW

+

The most familiar type rainbow is produced when sunlight strikes raindrops in front of a viewer at a + precise angle (42 degrees). Rainbows can also be viewed around fog, sea spray, or waterfalls. +

+
+ +
+
+ Sky with clouds +
+

THE RAINBOW DOESN'T EXIST

+

A rainbow is an optical illusion—it does not actually exist in a specific spot in the sky. The + appearance of a rainbow depends on where you're standing and where the sun (or other source of + light) is shining. +

+
+ +
+
+ Rainbow over mountains +
+

THE COLORS OF THE RAINBOW

+

The colors on a primary rainbow are always in order of their wavelength, from longest to + shortest: red, orange, yellow, green, blue, and violet.

+
+ +
+
+ Sky with clouds and rainbow +
+

RAINBOWS NEAR AND FAR

+

Some scientists think rainbows also exist on Titan, one of the moons of the planet Saturn. Titan has + a wet surface and humid clouds. The sun is also visible from Titan, so it has all the ingredients + for rainbows.

+
+
+
+ + -
- -
- - + \ No newline at end of file diff --git a/code/style.css b/code/style.css index d6be16468..4c5c2d008 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,261 @@ html { - background: #0025ff; - color: #fff; + scroll-behavior: smooth; + height: 100vh; } + +:root { + --main-radius: 25px; + --main-margin: 0.2rem; +} + +* { + color: #FFFDD0; + font-family: cursive; + letter-spacing: 1px; + font-weight: 300; +} + +nav { + height: 8rem; + display: flex; + background: #D499AB; + border-radius: var(--main-radius); +} + +/*Styling logo*/ +.logo { + padding: 1vh 1vw; + text-align: center; +} + +.logo img { + height: 5rem; + width: 5rem; +} + +.logo-text { + align-items: center; + justify-content: center; +} + +.logo { + display: inline-flex; + align-items: center; + justify-content: center; +} + +/*Styling Navigation Links*/ +.nav-links { + display: flex; + list-style: none; + width: 88vw; + padding: 0 0.7vw; + justify-content: space-evenly; + align-items: center; + text-transform: uppercase; +} + +.nav-links li a { + text-decoration: none; + margin: 0 0.7vw; +} + +.nav-links li a:hover { + color: #61DAFB; + cursor: pointer; +} + +.nav-links li { + position: relative; +} + +/*Styling Button*/ +.login-button { + background-color: transparent; + border: 2px solid #FFFDD0; + border-radius: 2em; + padding: 0.6rem 0.8rem; + margin-left: 2vw; + font-size: 1rem; + cursor: pointer; + +} + +.login-button:hover { + color: #61DAFB; +} + +/*Styling Hamburger-menu*/ +.hamburger div { + width: 30px; + height: 3px; + background: #FFFDD0; + margin: 5px; +} + +.hamburger { + display: none; +} + +@media screen and (max-width: 768px) { + + .hamburger { + display: block; + position: absolute; + cursor: pointer; + right: 5%; + top: 5%; + } + + .nav-links { + display: none; + } +} + +.hero-container { + background: #E3C495; + border-radius: var(--main-radius); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + margin: var(--main-margin); + +} + +.WelcomeArticle { + flex: 1; + color: #FFFDD0; + text-align: center; + font-size: 2rem; +} + +.hero-container img { + width: 250px; + object-fit: cover; + vertical-align: middle; + padding: 1rem 1rem 1rem 1rem; + border-radius: var(--main-radius); +} + +.articles { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; + grid-template-areas: + "article1" + "article2" + "article3" + "article4"; + grid-gap: 0.2rem; + list-style: none; +} + +.article { + border-radius: var(--main-radius); + padding: 1rem; +} + +.article>figure { + margin: 0; + max-height: 100%; + overflow: hidden; + border-radius: var(--main-radius); +} + +.article>figure>img { + width: 100%; +} + +.article>h2 { + font-size: 2rem; + line-height: 1.2; + padding: 0.5rem; + color: #FFFDD0; + text-align: center; +} + +.article>p { + font-size: 2rem; + line-height: 1.2; + padding: 0.5rem; + color: #FFFDD0; + text-align: center; +} + +#Article1 { + background: #E3E2C3; + grid-area: article1; +} + +#Article2 { + background: #A2C0A9; + grid-area: article2; +} + +#Article3 { + background: #819BAF; + grid-area: article3; +} + +#Article4 { + background: #767098; + grid-area: article4; +} + +footer { + background: #D499AB; + grid-area: footer; + display: flow-root; + border-radius: var(--main-radius); + color: #FFFDD0; + text-align: center; + font-size: 1.5rem; + margin: var(--main-margin); +} + +.footer-bar { + display: inline-flex; + align-items: center; + justify-content: space-between; + background: #D499AB; +} + +.footer-bar ul { + list-style: none; + display: flex; + flex-direction: row; +} + +.footer-bar li { + margin: 10px 10px 10px 10px; +} + +/*hover doesn't work!*/ +.footer-bar li a:hover { + color: #222; +} + +/* Tablet */ +@media (min-width: 551px) and (max-width: 768px) { + .articles { + grid-template-columns: 2fr 2fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + "article1 article2" + "article3 article4" + } + +} + + +/* Normal -The responsiveness of the page doesn't work correctly between 769px to 960px. All the grid is not visible. Something with the content?*/ +@media (min-width: 769px) and (max-width: 1600px) { + .articles { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + grid-template-areas: + "article1 article2 article3 article4"; + } + +} \ No newline at end of file