Skip to content

Commit c832deb

Browse files
CykotechCykotech
committed
Create mockup
1 parent 055afbb commit c832deb

File tree

3 files changed

+289
-0
lines changed

3 files changed

+289
-0
lines changed

‎mockup/coffee_cup.jpg‎

141 KB
Loading

‎mockup/mockup.css‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
/* Universal Styles*/
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Arial", sans-serif;
8+
--primary: #240e1f;
9+
--secondary: #f0b052;
10+
--accent: #e96932;
11+
}
12+
13+
body {
14+
width: 100%;
15+
}
16+
17+
button {
18+
padding-inline: 35px;
19+
padding-block: 14px;
20+
border-radius: 14px;
21+
outline: none;
22+
border: none;
23+
}
24+
25+
.card {
26+
border-radius: 45px;
27+
padding: 50px;
28+
width: 30%;
29+
height: 200px;
30+
}
31+
32+
/* Header Styles */
33+
34+
header {
35+
background-color: var(--secondary);
36+
padding-block: 1rem;
37+
display: flex;
38+
justify-content: space-around;
39+
align-items: center;
40+
}
41+
42+
header h1 {
43+
color: var(--primary);
44+
}
45+
46+
header h1 i {
47+
padding-right: 0.5rem;
48+
}
49+
50+
header nav ul {
51+
display: flex;
52+
list-style: none;
53+
}
54+
55+
header nav ul li {
56+
color: var(--primary);
57+
padding-inline: 1rem;
58+
}
59+
60+
/* Hero Section */
61+
62+
#hero {
63+
height: 85vh;
64+
background-color: var(--primary);
65+
display: flex;
66+
justify-content: space-evenly;
67+
align-items: center;
68+
color: var(--accent);
69+
padding-inline: 2rem;
70+
}
71+
72+
#hero .hero-container {
73+
height: 50%;
74+
display: flex;
75+
flex-direction: column;
76+
justify-content: space-around;
77+
align-content: space-between;
78+
}
79+
80+
#hero .hero-container h2 {
81+
font-size: 5rem;
82+
}
83+
84+
#hero .hero-container p {
85+
font-size: 1.5rem;
86+
}
87+
88+
#hero .hero-container div {
89+
width: 40%;
90+
display: flex;
91+
justify-content: space-between;
92+
}
93+
94+
#hero .hero-container div button {
95+
width: 40%;
96+
background-color: var(--secondary);
97+
box-shadow: 0px 4px 0px 0px var(--accent);
98+
font-size: 1.25rem;
99+
}
100+
101+
#hero img {
102+
height: 50%;
103+
}
104+
105+
/* Feature Section */
106+
107+
#features {
108+
height: 35vh;
109+
background-color: var(--secondary);
110+
display: flex;
111+
justify-content: space-evenly;
112+
align-items: center;
113+
}
114+
115+
#features .card {
116+
background-color: var(--primary);
117+
box-shadow: 0px 6px 0px 0px var(--accent);
118+
}
119+
120+
#features .card i {
121+
padding-bottom: 0.5rem;
122+
font-size: 1.75rem;
123+
color: var(--accent);
124+
}
125+
126+
#features .card h3 {
127+
font-size: 1.5rem;
128+
padding-bottom: 0.5rem;
129+
color: var(--secondary);
130+
}
131+
132+
#features .card p {
133+
font-size: 1rem;
134+
color: var(--secondary);
135+
}
136+
137+
/* Call to Action Section */
138+
139+
#cta {
140+
background-color: var(--primary);
141+
height: 45vh;
142+
display: flex;
143+
justify-content: center;
144+
align-items: center;
145+
}
146+
147+
#cta .cta-container {
148+
background: linear-gradient(96deg, var(--accent) 0%, var(--secondary));
149+
box-shadow: 0px 4px 0px 0px var(--accent);
150+
border-radius: 45px;
151+
width: fit-content;
152+
height: 60%;
153+
padding-inline: 15rem;
154+
display: flex;
155+
flex-direction: column;
156+
justify-content: space-evenly;
157+
align-items: center;
158+
color: var(--primary);
159+
}
160+
161+
#cta .cta-container button {
162+
background-color: var(--primary);
163+
color: var(--secondary);
164+
box-shadow: 0px 4px 0px 0px var(--accent);
165+
}
166+
167+
/* Footer Styles */
168+
169+
footer {
170+
padding-block: 4rem;
171+
display: flex;
172+
justify-content: space-around;
173+
background-color: var(--secondary);
174+
}
175+
176+
footer .footer-container {
177+
color: var(--primary);
178+
height: fit-content;
179+
}
180+
181+
footer .footer-container h4 {
182+
font-size: 1.5rem;
183+
padding-bottom: 0.5rem;
184+
}
185+
186+
footer .footer-container i {
187+
padding-right: 0.5rem;
188+
}
189+
190+
footer .footer-container ul {
191+
list-style: none;
192+
}
193+
194+
footer .footer-container ul li {
195+
padding-bottom: 0.75rem;
196+
}

‎mockup/mockup.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Code Cafe</title>
7+
<link rel="stylesheet" href="./mockup.css" />
8+
<script
9+
src="https://kit.fontawesome.com/8942288b8d.js"
10+
crossorigin="anonymous"
11+
></script>
12+
</head>
13+
14+
<body>
15+
<header>
16+
<h1><i class="fa-solid fa-code"></i>Code Cafe</h1>
17+
<nav>
18+
<ul>
19+
<li>Home</li>
20+
<li>About Us</li>
21+
<li>Events</li>
22+
</ul>
23+
</nav>
24+
<span></span>
25+
</header>
26+
<main>
27+
<section id="hero">
28+
<div class="hero-container">
29+
<h2>Where Code Meets Community</h2>
30+
<p>
31+
Join our vibrant community of developers, share knowledge and grow
32+
together in a welcoming environment.
33+
</p>
34+
<div>
35+
<button>Join us</button>
36+
<button>Learn more</button>
37+
</div>
38+
</div>
39+
<img src="./coffee_cup.jpg" alt="Code Cafe Logo" />
40+
</section>
41+
<section id="features">
42+
<div class="card">
43+
<i class="fa-solid fa-users"></i>
44+
<h3>Active Community</h3>
45+
<p>
46+
Connect with like-minded developers and build lasting relationships.
47+
</p>
48+
</div>
49+
<div class="card">
50+
<i class="fa-solid fa-laptop-code"></i>
51+
<h3>Some other thing</h3>
52+
<p>Description about that other thing.</p>
53+
</div>
54+
<div class="card">
55+
<i class="fa-solid fa-book"></i>
56+
<h3>Learning Resources</h3>
57+
<p>Access curated learning materials and documentation.</p>
58+
</div>
59+
</section>
60+
<section id="cta">
61+
<div class="cta-container">
62+
<h2>Ready to Join Our Community?</h2>
63+
<p>
64+
Start your journey with Code Cafe today and become part of a
65+
thriving developer community.
66+
</p>
67+
<button>Join Code Cafe</button>
68+
</div>
69+
</section>
70+
</main>
71+
<footer>
72+
<div class="footer-container">
73+
<h4><i class="fa-solid fa-code"></i>Code Cafe</h4>
74+
<p>Your home for coding and community</p>
75+
</div>
76+
<div class="footer-container">
77+
<h4>Community</h4>
78+
<ul>
79+
<li>Events</li>
80+
<li>Discord</li>
81+
</ul>
82+
</div>
83+
<div class="footer-container">
84+
<h4>Resources</h4>
85+
<ul>
86+
<li>Documentation</li>
87+
<li>Blog</li>
88+
<li>GitHub</li>
89+
</ul>
90+
</div>
91+
</footer>
92+
</body>
93+
</html>

0 commit comments

Comments
 (0)