Skip to content

Commit 7e4150d

Browse files
vimodevimode
committed
Challenge completed
1 parent 20b2a71 commit 7e4150d

18 files changed

+427
-0
lines changed

‎article-preview-component/.gitignore

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Avoid accidental Sketch file upload
2+
###############################################
3+
## Please do not remove line 5 - thanks! 🙂 ##
4+
###############################################
5+
*.sketch
6+
7+
# Avoid accidental XD or Figma upload if you convert the design file
8+
#######################################################
9+
## Please do not remove lines 11 and 12 - thanks! 🙂 ##
10+
#######################################################
11+
*.xd
12+
*.fig
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store

‎article-preview-component/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Article preview component
2+
3+
Solution : [Live Site URL](https://frontend-mentor-challenges-ecru.vercel.app/)
4+
5+
This is a solution to the [Article preview component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT).
6+
7+
![Design preview for the Article preview component coding challenge](./design/desktop-preview.jpg)
8+
9+
## The challenge
10+
11+
Your challenge is to build out this article preview component and get it looking as close to the design as possible.
12+
13+
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
14+
15+
The only JavaScript you'll need for this challenge is to initiate the share options when someone clicks the share icon.
16+
17+
Your users should be able to:
18+
19+
- View the optimal layout for the component depending on their device's screen size
20+
- See the social media share links when they click the share icon
21+
22+
## Experience
23+
24+
### Built with
25+
26+
- HTML5
27+
- CSS3
28+
- Grid
29+
- Flexbox
30+
- Vanilla JavaScript
31+
32+
### What I learned
33+
34+
It is easier to use relative and absolute position for elements with fixed height and width. At first I built the article component with responsive sizing but had to switch to fixed sizing for it to make the share menu to be positioned properly.
35+
36+
Learned about some new elements related to the element `article`.
37+
(MDN link)[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article]
38+
39+
Re-learned and used the `fill` attribute for SVGs. (MDN link)[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill]
40+
41+
42+
### Continued development
43+
44+
### Continued Learning
45+
46+
This challenge was done with the design principles of mobile-first philosophy. Slowly and surely getting the hang of it and moving away from desktop-view first.
47+
48+
### Useful Resources
49+
50+
### Challenges
51+
52+
53+
---
54+
55+
###### Pending Tasks
56+
57+
- Final challenge screenshot(s) (desktop and mobile)
58+
- Submit the challenge at frontendmentor.
59+
60+
## Acknowledgments

‎article-preview-component/design/desktop-active-state.jpg

44.8 KB
Loading

‎article-preview-component/design/desktop-design.jpg

44.1 KB
Loading

‎article-preview-component/design/desktop-preview.jpg

25.2 KB
Loading

‎article-preview-component/design/mobile-active-state.jpg

34.2 KB
Loading

‎article-preview-component/design/mobile-design.jpg

34.3 KB
Loading

‎article-preview-component/images/avatar-michelle.jpg

5.94 KB
Loading

‎article-preview-component/images/drawers.jpg

52.3 KB
Loading

‎article-preview-component/images/favicon-32x32.png

1.04 KB
Loading

‎article-preview-component/images/icon-facebook.svg

Lines changed: 1 addition & 0 deletions
Loading

‎article-preview-component/images/icon-pinterest.svg

Lines changed: 1 addition & 0 deletions
Loading

‎article-preview-component/images/icon-share.svg

Lines changed: 1 addition & 0 deletions
Loading

‎article-preview-component/images/icon-twitter.svg

Lines changed: 1 addition & 0 deletions
Loading

‎article-preview-component/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8+
9+
<!-- CUSTOM CSS -->
10+
<link rel="stylesheet" href="/article-preview-component/style.css">
11+
12+
<!-- JS -->
13+
<script src="/article-preview-component/script.js" defer></script>
14+
15+
<title>Frontend Mentor | Article preview component</title>
16+
17+
</head>
18+
<body>
19+
20+
<div class="container">
21+
<article class="main">
22+
<div class="article-img">
23+
<img src="/article-preview-component/images/drawers.jpg" alt="Drawers">
24+
</div>
25+
<h1 class="article-title inside">
26+
Shift the overall look and feel by adding these wonderful
27+
touches to furniture in your home
28+
</h1>
29+
30+
<p class="article-content inside">
31+
Ever been in a room and felt like something was missing? Perhaps
32+
it felt slightly bare and uninviting. I’ve got some simple tips
33+
to help you make any room feel complete.
34+
</p>
35+
36+
<section class="author-att inside">
37+
38+
<img src="/article-preview-component/images/avatar-michelle.jpg" alt="Michelle Appleton" class="author-img">
39+
40+
41+
<address class="author-date">
42+
<h4 class="author-name">Michelle Appleton</h4>
43+
<time datetime= "2020-06-28">28 Jun 2020</time>
44+
</address>
45+
46+
<div class="share-box hidden">
47+
<h3>Share</h3>
48+
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/></svg></a>
49+
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"><path fill="#FFF" d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.804-2.27 8.22 8.22 0 01-2.605.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.922-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z"/></svg></a>
50+
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M10 0C4.478 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10-4.477 10-10S15.522 0 10 0z"/></svg></a>
51+
</div>
52+
53+
<button class="share-btn">
54+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path class="share-icon" fill="#6E8098" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
55+
</button>
56+
57+
</section> <!--author att -->
58+
59+
</article> <!-- main -->
60+
<div class="footer">
61+
Challenge by
62+
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a
63+
href="#">ppusher</a>.
64+
</div>
65+
</div> <!-- container-->
66+
67+
68+
</body>
69+
</html>

‎article-preview-component/script.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
let button = document.querySelector(".share-btn");
2+
let share = document.querySelector(".share-box");
3+
let svgShareIcon = document.querySelector(".share-icon");
4+
5+
button.addEventListener("click", () => {
6+
share.classList.toggle("hidden");
7+
svgShareIcon.classList.toggle("share-icon-fill");
8+
button.classList.toggle("share-active")
9+
});

‎article-preview-component/style-guide.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
## Colors
11+
12+
- Very Dark Grayish Blue: hsl(217, 19%, 35%)
13+
- Desaturated Dark Blue: hsl(214, 17%, 51%)
14+
- Grayish Blue: hsl(212, 23%, 69%)
15+
- Light Grayish Blue: hsl(210, 46%, 95%)
16+
17+
## Typography
18+
19+
### Body Copy
20+
21+
- Font size: 13px
22+
23+
### Headings
24+
25+
- Family: [Manrope](https://fonts.google.com/specimen/Manrope)
26+
- Weights: 500, 700
27+
28+
## Icons
29+
30+
We provide SVGs for the social icons. But please feel free to use a font icon library if you like. Some suggestions can be found below:
31+
32+
- [Font Awesome](https://fontawesome.com)
33+
- [IcoMoon](https://icomoon.io)
34+
- [Ionicons](https://ionicons.com)

0 commit comments

Comments
 (0)