forked from YariMorcus/huddle-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (69 loc) · 7.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="A huddle landing page section made by Yari Morcus. A challenge from Frontend Mentor">
<meta name="keywords"
content="frontendmentor frontend yarimorcus yari morcus coding challenge huddle landing page section">
<meta name="author" content="Yari Morcus">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="canonical" href="https://yarimorcus.github.io/huddle-landing-page">
<!-- custom CSS -->
<style>body,main{display:flex}.footer,.landing-article{color:hsl(0deg,0%,100%);text-align:center}*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,p{margin:0}ol[role=list],ul[role=list]{list-style:none}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%}html{font-size:10px}html:focus-within{scroll-behavior:smooth}main{flex-direction:column;justify-content:center;flex:1}body{margin:0 auto;max-width:27rem;flex-direction:column;justify-content:center;text-rendering:optimizeSpeed;line-height:1.5;background-image:url(img/bg-mobile.svg);background-repeat:no-repeat;background-color:hsl(257deg,40%,49%);background-size:contain}@media (min-width:48em){body{height:100vh;max-width:75rem;background-image:url(img/bg-desktop.svg);background-position:3rem 0;background-size:cover}}@media (min-width:48em) and (max-width:63em) and (orientation:landscape){body{height:initial}}@media (min-width:64em){body{margin:0 4rem;max-width:115rem}}@media (min-width:80em){body{margin:0 auto}}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{display:block;max-width:100%}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}.footer{padding:0 1.28rem 1.28rem;font-family:"Lexend Deca",sans-serif;font-size:1.2rem}.footer__link{color:hsl(0deg,0%,100%)}.footer__link:hover{color:#fcecfc}.footer__link:focus-visible{outline:solid 2px;border-radius:1px}@font-face{font-family:Poppins;src:url(fonts/poppins-semibold.woff2) format("woff2"),url(fonts/poppins-semibold.woff) format("woff"),url(fonts/poppins-semibold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"Open Sans";src:url(fonts/open-sans-regular.woff2) format("woff2"),url(fonts/open-sans-regular.woff) format("woff"),url(fonts/open-sans-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(fonts/poppins-regular.woff2) format("woff2"),url(fonts/poppins-regular.woff) format("woff"),url(fonts/poppins-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}.landing-header{margin-bottom:3.5rem}@media (min-width:48em){.landing-header{margin-bottom:0}.landing-container{display:grid;grid-template-columns:1fr 44rem;grid-template-areas:"mockup article" "footer footer";align-items:center}}.landing-header-logo:focus-visible{outline:#fff auto 2px}.landing-header-logo__img{max-width:12rem}.landing-container_mock-up{grid-area:mockup}.landing-article{margin-bottom:4rem;grid-area:article}.landing-article__heading{margin-top:3rem;font:600 2rem Poppins,sans-serif}@media (min-width:48em){.landing-article{margin-left:4rem;text-align:left;align-self:start}.landing-article__heading{margin-top:0;font:600 3rem Poppins,sans-serif}}.landing-article__paragraph{margin-top:1.5rem;font:1.4rem "Open Sans",sans-serif}.landing-article__heading,.landing-article__paragraph{line-height:1.5}.landing-article__button{margin-top:3rem;padding:1rem;width:18rem;font:1.2rem "Open Sans",sans-serif;color:hsl(257deg,40%,49%);border:none;border-radius:2rem;box-shadow:0 3px 3px -1px rgba(0,0,0,.75)}.landing-article__button:focus-visible{outline:#db3ddb solid 3px}.landing-article__button:hover{color:hsl(0deg,0%,100%);background-color:hsl(300deg,69%,71%);cursor:pointer}.landing-footer{margin-bottom:4rem;display:flex;justify-content:center;grid-area:footer}@media (min-width:64em){.landing-header{margin-bottom:3.5rem}.landing-header-logo__img{max-width:17rem}.landing-container{grid-template-columns:1fr 55rem}.landing-article{padding-top:4rem;padding-right:11rem}.landing-footer{padding-right:11rem}}.landing-footer__link{text-decoration:none}.landing-footer__link:not(:first-child){margin-left:1rem}.landing-footer__link:focus-visible{outline:solid 3px;border-radius:100%}.landing-footer__icon{--fa-display:flex;--fa-border-padding:1.7rem;--fa-border-radius:4rem;justify-content:center;align-items:center;width:1.7rem;color:hsl(0deg,0%,100%);font-size:1.3rem;height:1.25em}.landing-footer__icon:hover{color:hsl(300deg,69%,71%);border-color:hsl(300deg,69%,71%);cursor:pointer}@media (min-width:48em){.landing-article__button{margin-top:2rem;padding:1.5rem;border-radius:2.5rem;box-shadow:1px 3px 7px -1px rgba(0,0,0,.75)}.landing-footer{justify-content:flex-end}.landing-footer__icon{width:3.5rem;height:3.5rem}}</style>
<title>Huddle landing page | Frontend Mentor challenge</title>
<script src="https://kit.fontawesome.com/890e07f458.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<header class="landing-header">
<a class="landing-header-logo" href="#">
<img class="landing-header-logo__img" src="img/logo.svg" alt="Go to landing page" width="264" height="65">
</a>
<!-- .landing-header-logo -->
</header>
<!-- .landing-header -->
<article class="landing-container">
<div class="landing-container__mock-up">
<img src="img/illustration-mockups.svg" alt="">
</div>
<article class="landing-article">
<h1 class="landing-article__heading">
Build The Community Your Fans Will Love
</h1>
<p class="landing-article__paragraph">
Huddle re-imagines the way we build communities. You have a voice,
but so does your audience. Create connections with your users as you
engage in genuine discussion.
</p>
<button class="landing-article__button">Register</button>
</article>
<!-- .landing-article -->
<footer class="landing-footer">
<a class="landing-footer__link" href="#" aria-label="Go to Facebook">
<i class="landing-footer__icon fa-brands fa-facebook-f fa-border fa-fw"></i>
</a>
<!-- .landing-footer__link -->
<a class="landing-footer__link" href="#" aria-label="Go to Twitter">
<i class="landing-footer__icon fa-brands fa-twitter fa-border fa-fw"></i>
</a>
<!-- .landing-footer__link -->
<a class="landing-footer__link" href="#" aria-label="Go to Instagram">
<i class="landing-footer__icon fa-brands fa-instagram fa-border fa-fw"></i>
</a>
<!-- .landing-footer__link -->
</footer>
<!-- .landing-footer -->
</article>
<!-- .landing-container -->
</main>
<footer class="footer">
Challenge by
<a class="footer__link" href="https://www.frontendmentor.io?ref=challenge" rel="noopener noreferrer"
target="_blank">Frontend Mentor</a>. Coded by <a class="footer__link"
href="https://www.linkedin.com/in/yarimorcus" rel="noopener noreferrer" target="_blank">Yari Morcus</a>.
</footer>
<!-- .footer -->
</body>
</html>