diff --git a/README.md b/README.md index 499c9f3..c996441 100644 --- a/README.md +++ b/README.md @@ -1,536 +1,10 @@ -![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) +I tried my best. -# LAB | CSS Ironhack News +Screenshots: -

- finished lab preview -

- -
- -

Learning Goals

- - - - This exercise allows you to practice and apply the concepts and techniques taught in class. - - Upon completion of this exercise, you will be able to: - - - Develop a responsive webpage using the provided designs as a guide. - - Use CSS media queries to adapt the page layout to different screen sizes. - - Use CSS Flexbox to position elements on a webpage dynamically as either rows or columns. - -
- -
- - -
- - - -## Introduction - -As a web developer, one of your tasks will be to make sure that the web pages and websites you build look good and work well on all devices and screen sizes. In this exercise, we will work on the *Ironhack News* web page, and your task is to make it fully responsive using the media queries and Flexbox knowledge you learned in the previous lessons. - -
- -## Getting Started -For this exercise, we will use VSCode and the Live Server extension to run the JavaScript code. To do it, follow these steps: - - - -- Fork this repo - -- Clone it to your machine - -- Open the project folder in VSCode - -- Once in VS Code, open the `index.html` file using the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension.
To open the file, right-click on the `index.html` file and select **Open with Live Server**. - - - -
- - - -## Submission - -- Upon completion, run the following commands: - -```bash -git add . -git commit -m "Solved lab" -git push origin master -``` - -- Create a Pull Request and submit your assignment. - - -
- - - -## Instructions - -Before you start writing any code, make sure to review the existing code and the page structure in the `index.html` file, as well as the base styles already defined in the `style.css` file. Once you review the code, you can start working on the tasks outlined in the iterations below. - - - -You should do all your work in the `style.css` file. The file is already linked to the `index.html` file, so you don't need to worry about it. - - - -The page is already styled for large screens (width > 1024px). This is how it looks: - -
- -

- large screens preview -

- -
- -Your task in the following iterations will be to add styles using media queries to make the page display correctly on smaller screens (mobile and tablet). - -
- ----- - -### Iteration 1 | Mobile Screens (width < 760px) - -We will start by styling the page for mobile screens first. :iphone: - -Add a media query to the `style.css` file that targets screens with a `max-width` of `760px` and the styles to make the page look like in the image below. In particular, you should add the styles to achieve the following: -- The *Navbar* elements (*"Home"*, *"News"*, *"Tech"* and *"Other"*) should be displayed vertically, one below the other. -- All articles (*"Main Article"*, *"Article 1"*, *"Article 2"*, and *"Article 3"*) should be displayed in a column, one below the other. -- The *"Main Article"* *image* should be displayed at the top, followed by the *title*, *text*, and the "Read more" button below it. - -
- -

- iteration-1-preview -

- - -
- -Use the following full page screenshot as the guide: - -
- -
- Screenshot - Mobile Screens - - -
- - [Back to top](#iteration-1--mobile-screens-width--760px) -
- -
- ----- - -### Iteration 2 | Small Screens (width > 760px and width < 1024px) - -Next, we will add styles for tablet screens. :computer: - -Add a new media query to the `style.css` file that targets screens with a `min-width` of `760px` and a `max-width` of `1024px`. In particular, you should add the styles to achieve the following: - -- The `navbar` links should be displayed horizontally, one next to the other, taking equal space and filling the entire width of the page. -- The *"Main Article"* should be displayed on the top of the page, taking the entire width of the page. -- The *"Main Article"* should be divided into two parts: - - on the **left** side, the *image* should be displayed, - - on the **right** side, the *title*, *text*, and the "Read more" button should be displayed. - -- The other articles (*"Article 1"*, *"Article 2"*, and *"Article 3"*) should be displayed by two in a row, taking equal space. - - -
- -

- iteration-2-preview -

- - -
- -Use the following full page screenshot as the guide: - -
- -
- Screenshot - Mobile Screens - -
- - - [Back to top](#iteration-2--small-screens-width--760px-and-width--1024px) -
- -
- ----- - -### Bonus: Iteration 3 | Small Mobile Screens (width < 480px) - -In this bonus iteration, your task is to **hide the "Navbar" links on small mobile screens** :iphone: and instead display the *"menu"* icon. - -To do this, you will need to add a new element to the `index.html` to display the menu icon and add the necessary styles to the `style.css` file. -You can find the menu icon in the `images/` folder. - -The final result should look like in the below image. - -
- -

- bonus iteration 3 preview -

-
-

- Credits - Menu icon by ariefstudio (Flaticon) -

- - -
- -
- -**Happy coding!** :blue_heart: - -
- -## FAQs - -
- -
- I am stuck in the exercise and don't know how to solve the problem or where to start. -
- - If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions. - - - For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources. - - - Once you have a clear understanding of the problem, you will be able to start working toward the solution. - - [Back to top](#faqs) -
- -
- How do I define a media query in CSS? -
- - Media queries in CSS use the following syntax: **`@media`** followed by the media type (like `screen`), and a condition. This condition can check things like the size of the screen (width and height) or its orientation (portrait or landscape). When the condition is true, the styles inside the media query are applied. - -
- -**Syntax** - -```css -@media () { - /* CSS rules */ -} -``` - - *Note: In the above example, ``, and `` are placeholders. Replace them with your specific values.* - -
- - Here's an example of defining a couple of media queries in CSS: - -**CSS** - -```css - -/* Apply this style when the screen width is 600px or less */ -@media screen and (max-width: 600px) { - body { - background-color: lightblue; - } -} - -/* Apply this style when the screen width is between 600px and 1200px */ -@media screen and (min-width: 600px) and (max-width: 1200px) { - body { - background-color: lightgreen; - } -} -``` - -In the above example, the body background color changes depending on the screen width. -The first media query applies when the screen width is 600px or less, and the second applies whenn the width is between 600px and 1200px. - -Beyond width, media queries can be used to apply styles based on other features like screen *height* and *orientation* (portrait or landscape), enabling more dynamic and adaptive designs. - -For more information on media queries and the syntax, check: [MDN: Beginner's guide to media queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) - -
- - [Back to top](#faqs) - -
- -
- - -
- How do I center align HTML text elements? -
- - To center align HTML *text elements*, you can use the `text-align` property and set it to `center`. This property can be applied to any *inline* or *block-level* element. - -Here is an example of how you can use the `text-align` property to center align multiple text elements: - -**HTML** - -```html -
-

This is a title

- -

This is some text in here

-
-``` - -**CSS** - -```css -/* CSS */ - -p { - text-align: center; /* Center align all p elements */ -} - -h2 { - text-align: center; /* Center align all h2 elements */ -} -``` - -This will center align all `p` and `h2` elements within the parent `div`. - -For more information, check: [W3C: Centering Things](https://www.w3.org/Style/Examples/007/center.en.html) - - [Back to top](#faqs) -
- - - -
- How do I center align HTML block elements? -
- - To center align a block-level element, such as a `div`, `h1`, etc., you can use the `margin` property and set it to `auto`. This will center the element horizontally within its parent container. - -Here is an example of how you can do this: - -**HTML** - -```html -
-
-

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

-
-
-``` - -**CSS** - -```css -/* CSS */ - -div { - width: 500px; - margin: 0 auto; -} -``` - -This will set the `width` property of the `div` to 500 pixels and we set the left and right margins to be equal by using `margin: 0 auto;`. - - [Back to top](#faqs) -
- -
- How do I center align an HTML image element? -
- - There are a few ways you can center align an image element. - -##### 1. Align an image using `text-align` - -To center an image element in HTML, you can use the `text-align` property on the parent element, such as `div`. Example: - -**HTML** - -```html -
- -
-``` - -**CSS** - -```css -div { - text-align: center; -} -``` - -This will center align all the children elements within the `section` element, including the `img` element. - -
- -##### 2. Align an image as a block element - -The other way is converting the image into a block element and using `margin: 0 auto`. Here is an example: - -**HTML** - -```html -
- -
-``` - -**CSS** - -```css -img { - display: block; - margin: 0 auto; -} -``` - -This will center the image horizontally within the parent `section` element. The `display: block` property is used to make the image a *block-level* element, allowing the `margin: 0 auto` property to work. The `margin: 0 auto` property sets the left and right margins to be equal, centering the element within its parent container. - - [Back to top](#faqs) -
- -
- How can I center align elements within a Flexbox container? -
-To center align elements within a Flexbox parent container, you can use the `justify-content` property and set it to `center`. This will horizontally center the elements within the Flexbox container. - -**Example:** - -```css -.container { - display: flex; - justify-content: center; /* Center elements horizontally */ -} - -``` - - - -You can also use the `align-items` property and set it to `center` to vertically center align the elements within the Flexbox container. - -Example: - -```css -.container { - display: flex; - justify-content: center; /* Center elements horizontally */ - align-items: center; /* Center elements vertically */ -} -``` -
- - -For more information and an interactive Flexbox guide, check: [An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox) - -
- - [Back to top](#faqs) -
- -
- How can I change the header from having 1 column to having 2 columns using Flexbox? -
- - To change the header of an HTML page from having one column to having two columns using Flexbox, you should do the following in your CSS: - -1. Use the `display` property and set it to `flex`. -2. Add the `flex-direction` property and set it to `column` to arrange the elements in a column. -3. Add the `justify-content` property to align the elements horizontally -4. Use the `align-items` property to align them vertically. - -```css -header { - display: flex; - flex-direction: column; /* Arrange elements in a column */ - justify-content: space-between; /* Align horizontally */ - align-items: center; /* Align vertically */ -} -``` - -To make the header responsive and change it to a two column layout on screens that are wider than 800 pixels, use a media query and set the `flex-direction` property to `row`: - -```css -@media (min-width: 800px) { - header { - flex-direction: row; - } - - /* Change the width of nested div elements */ - header > div { - width: 50%; - } -} -``` - -The header will maintain a single-column layout on smaller screens, but on screens larger than 800 pixels wide, it will change to a two-column layout. - - [Back to top](#faqs) -
- -
- Why are my media query styles not displaying properly on my browser? -
- - When using media queries to create a responsive layout, it is recommended to start with the default styles for mobile (smaller) screens and then use media queries at the end of your stylesheet to apply styles for each increasing viewport size. - - - -There are a few possible reasons why your media query styles may not be properly displayed on your browser. - -1. Where applicable, check that you already have default styles for mobile screens. These styles should be placed at the beginning of your stylesheet before your media queries. -2. Ensure you have placed your media queries at the end of your stylesheet after your regular styles. This is because media queries are applied after regular styles, so if you place them before your regular styles, they will be overridden. -3. Ensure you have the correct syntax in your media query. The correct syntax is `@media (expression) {...}`. -4. Make sure that you are using the correct media query expression. For example, if you are trying to target screens that are wider than 800 pixels, you should use the `min-width` in your expression, like this: `@media (min-width: 800px) {...}.` - - For more information on CSS media queries, check: [MDN: Beginner's guide to media queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) - - [Back to top](#faqs) -
- - -
- I am unable to push changes to the repository. What should I do? -
- -There are a couple of possible reasons why you may be unable to *push* changes to a Git repository: - -1. **You have not committed your changes:** Before you can push your changes to the repository, you need to commit them using the `git commit` command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder: - ```bash - git add . - git commit -m "Your commit message" - git push - ``` -2. **You do not have permission to push to the repository:** If you have cloned the repository directly from the main Ironhack repository without making a *Fork* first, you do not have write access to the repository. -To check which remote repository you have cloned, run the following terminal command from the project folder: - ```bash - git remote -v - ``` -If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first and then clone your fork to your local machine to be able to push the changes. - -**Note**: You should make a copy of your local code to avoid losing it in the process. - - [Back to top](#faqs) - -
+![alt text](image.png) +![alt text](image-2.png) +![alt text](image-1.png) diff --git a/image-1.png b/image-1.png new file mode 100644 index 0000000..4e48d53 Binary files /dev/null and b/image-1.png differ diff --git a/image-2.png b/image-2.png new file mode 100644 index 0000000..d4da0ca Binary files /dev/null and b/image-2.png differ diff --git a/image.png b/image.png new file mode 100644 index 0000000..81b8e80 Binary files /dev/null and b/image.png differ diff --git a/index.html b/index.html index 1b8846b..2bdedfd 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,86 @@ - - - - Ironhack News - - - -
-

Ironhack News

- -
-
-
-
- Article 1 Image -
-
-

Main Article

-

- This is the first article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus - enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt - ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim - sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros - sit amet ipsum scelerisque interdum. Curabitur justo nibh, -

- -
+ + + + Ironhack News + + + + +
+

Ironhack News

+
+ +
+ +
+ +
+
+
+ Article 1 Image +
+
+

Main Article

+

+ This is the first article's content. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus + enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt + ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim + sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros + sit amet ipsum scelerisque interdum. Curabitur justo nibh, +

+ +
+
+ +
+
+ Article 1 Image +

Article 1

+

+ This is the second article's content. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. +

+
-
-
- Article 1 Image -

Article 1

-

- This is the second article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
+
+ Article 2 Image +

Article 2

+

+ This is the third article's content. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. +

+ +
+ +
+ Article 3 Image +

Article 3

+

+ This is the third article's content. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. +

+ +
+
+
-
- Article 2 Image -

Article 2

-

- This is the third article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
-
- Article 3 Image -

Article 3

-

- This is the third article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
- -
+ + + + + - - - - - - - + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 9571ab1..8e669c3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,12 +4,23 @@ html { box-sizing: border-box; font-size: 16px; } - -*, *:before, *:after { + +*, +*:before, +*:after { box-sizing: inherit; } - -body, h1, h2, h3, h4, h5, h6, p, ol, ul { + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; @@ -27,7 +38,7 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul { padding: 5px 8px; font-size: 14px; } - + /* STYLES */ /* Fonts */ @@ -102,6 +113,10 @@ header { font-weight: bold; } +.burger-icon { + display: none; +} + /* Articles */ .main-article { margin: 20px; @@ -175,5 +190,178 @@ header { .btn-blue { background-color: #007bff; } - + /* Write your CSS below */ + +/* MOBILE RESPONSIVE */ + +@media (min-width: 480px) and (max-width: 760px) { + + /* header mobile */ + + header nav .navbar { + display: flex; + flex-direction: column; + } + + header nav .navbar li { + border-right: none; + border-bottom: solid 1px white; + width: 100%; + } + + /* articles mobile */ + + .articles-container { + display: flex; + flex-direction: column; + margin-top: 0; + } + + .articles-container .article { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 20px; + } + + .main-article { + display: flex; + flex-direction: column; + margin-bottom: 20px; + } + + .main-article .image { + width: 100%; + } + + .main-article .content { + width: 100%; + } + + .main-article .content h2 { + margin-top: 1rem; + } + + .articles-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + margin: 0 20px; + } + +} + +/* TABLET (SMALL SCREEN) RESPONSIVE */ + +@media (min-width: 760px) and (max-width: 1024px) { + + /* tablet navbar */ + + .navbar { + display: flex; + width: 100%; + justify-content: space-between; + } + + .navbar li { + width: 25%; + text-align: center; + } + + /* tablet articles */ + + .articles-container { + width: 100%; + margin: 0; + } + + .article { + width: 45%; + } + + .articles-container .article:last-child { + margin-top: 20px; + } + +} + +@media (max-width: 480px) { + + /* header small mobile */ + .newspaper-name { + border-bottom: none; + } + + /* navbar small mobile */ + + .burger-icon { + position: relative; + cursor: pointer; + display: inline-flex; + align-items: center; + padding: 1rem 0; + } + + header nav { + display: none; + } + + .navbar { + flex-direction: column; + } + + .burger-icon:has(input:checked) + .nav { + display: flex; + } + + header nav .navbar li { + border-right: none; + border-bottom: solid 1px white; + width: 100%; + } + + /* articles small mobile */ + + .articles-container { + display: flex; + flex-direction: column; + margin-top: 0; + } + + .articles-container .article { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 20px; + } + + .main-article { + display: flex; + flex-direction: column; + margin-bottom: 20px; + } + + .main-article .image { + width: 100%; + } + + .main-article .content { + width: 100%; + } + + .main-article .content h2 { + margin-top: 1rem; + } + + .articles-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0; + margin: 0 20px; + } +} \ No newline at end of file