Skip to content

Commit 13c298f

Browse files
tuliosjtuliosj
committed
Banner
1 parent 0e3a66c commit 13c298f

File tree

2 files changed

+111
-7
lines changed

2 files changed

+111
-7
lines changed

‎Newbie/HuddleFeatureBlocks/index.html‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@
3636
<body>
3737
<div class="container">
3838
<div class="banner">
39-
<div class="logo-flex">
39+
<div class="logo-container">
4040
<img src="./images/logo.svg" alt="Huddle logo" />
4141
<button class="try-it" onclick="location.href='#'">
42-
Try it Free
42+
Try It Free
4343
</button>
4444
</div>
4545
<div class="title-flex">
@@ -54,8 +54,12 @@ <h1>Build The Community Your Fans Will Love</h1>
5454
Get Started For Free
5555
</button>
5656
</div>
57-
<img src="./images/illustration-mockups.svg" alt="Huddle mockups" />
57+
<div class="banner-img">
58+
<img src="./images/illustration-mockups.svg" alt="Huddle mockups" />
59+
</div>
5860
</div>
61+
</div>
62+
<div class="features">
5963
<div class="feature-card">
6064
<div class="feature">
6165
<h2>Grow Together</h2>
@@ -65,10 +69,16 @@ <h2>Grow Together</h2>
6569
miss out on with a feedback form.
6670
</p>
6771
</div>
68-
<img src="" alt="" />
72+
<img
73+
src="./images/illustration-grow-together.svg"
74+
alt="Grow Together Illustration"
75+
/>
6976
</div>
7077
<div class="feature-card">
71-
<img src="" alt="" />
78+
<img
79+
src="./images/illustration-flowing-conversation.svg"
80+
alt="Flowing Conversations Illustration"
81+
/>
7282
<div class="feature">
7383
<h2>Flowing Conversations</h2>
7484
<p>
@@ -87,7 +97,10 @@ <h2>Your Users</h2>
8797
your users can start chatting immediately.
8898
</p>
8999
</div>
90-
<img src="" alt="" />
100+
<img
101+
src="./images/illustration-your-users.svg"
102+
alt="Your Users Illustration"
103+
/>
91104
</div>
92105
</div>
93106
<div class="cta">

‎Newbie/HuddleFeatureBlocks/styles.css‎

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,98 @@
11
:root {
2-
--pink: hsl(322, 100%, 66%);
2+
font-size: 62.5%;
33

4+
--pink: hsl(322, 100%, 66%);
45
--pale-cyan: hsl(193, 100%, 96%);
56
--dark-cyan: hsl(192, 100%, 9%);
67
--grayish-blue: hsl(208, 11%, 55%);
78
}
9+
10+
html,
11+
body {
12+
min-height: 100vh;
13+
margin: 0;
14+
font-family: "Open Sans", sans-serif;
15+
font-weight: 400;
16+
font-size: 1.6rem;
17+
}
18+
19+
h1,
20+
h2 {
21+
font-family: "Poppins", sans-serif;
22+
font-weight: 600;
23+
}
24+
h1 {
25+
font-size: 4rem;
26+
}
27+
28+
button {
29+
font-family: "Open Sans", sans-serif;
30+
font-weight: 700;
31+
border: none;
32+
border-radius: 4rem;
33+
box-shadow: 0 0.2rem 0.8rem #bbbbbb;
34+
background-color: var(--pink);
35+
color: #ffffff;
36+
}
37+
38+
button:hover {
39+
cursor: pointer;
40+
}
41+
42+
img {
43+
max-width: 41rem;
44+
}
45+
46+
/* Initial banner */
47+
48+
.banner {
49+
background-color: var(--pale-cyan);
50+
background-image: url("./images/bg-hero-desktop.svg");
51+
padding: 5rem 7.8rem;
52+
}
53+
54+
.logo-container {
55+
display: flex;
56+
justify-content: space-between;
57+
margin-bottom: 5rem;
58+
}
59+
60+
.logo-container > img {
61+
width: 20rem;
62+
height: 3.3rem;
63+
}
64+
65+
.logo-container > button {
66+
background-color: #ffffff;
67+
color: #000000;
68+
padding: 1rem 5rem;
69+
}
70+
71+
.title-flex {
72+
display: flex;
73+
max-height: 100vh;
74+
max-width: 100vw;
75+
}
76+
77+
.title {
78+
display: flex;
79+
flex-direction: column;
80+
justify-content: center;
81+
align-items: flex-start;
82+
margin-right: 5rem;
83+
}
84+
85+
.title > button {
86+
box-shadow: none;
87+
padding: 1.6rem 8rem;
88+
}
89+
90+
.banner-img > img {
91+
max-width: 70rem;
92+
}
93+
94+
/* Features */
95+
96+
.feature-card {
97+
display: flex;
98+
}

0 commit comments

Comments
 (0)