rmcg.dev/projects/FrontendMentor/newbie/article-preview-component/index.html

68 lines
3.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="./js/challenge.js"></script>
<title>Frontend Mentor | Article preview component</title>
</head>
<body>
<div class="container">
<div class="articlePreview">
<div class="previewImage">
<img src="./images/drawers.jpg" alt="Green drawers with a vase and pictures" class="">
</div>
<div class="previewBody">
<div class="articleSummary">
<h1 class="articleTitle">
Shift the overall look and feel by adding these wonderful
touches to furniture in your home
</h1>
<p class="articleSell">
Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. Ive got some simple tips
to help you make any room feel complete.
</p>
</div>
<div class="articleFooter">
<img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
<div class="nameAndDate">
<p class="authorName">Michelle Appleton</p>
<p class="articleDate">28 Jun 2020</p>
</div>
<!-- look up what to do with this. I know I've seen it. What it there for screenreader, but off the side of the screen -->
<!-- <section>Share</section> -->
<div class="articleShareSection">
<p>SHARE</p>
<img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
<img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
<img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
</div>
<button class="articleShareButton" onclick="toggleTooltip()" title="Share" >
<!-- <img src="./images/icon-share.svg" alt="Share Icon" class=""> -->
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="currentColor" 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>
</button>
<div class="articleShareButtonTooltip">
<p>SHARE</p>
<img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
<img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
<img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
</div>
</div>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
</div>
</body>
</html>