Skip to content

Commit e9b2f9b

Browse files
mickeyjoe75mickeyjoe75
committed
completed and updated product landing page project from frer
1 parent 45577b0 commit e9b2f9b

4 files changed

Lines changed: 286 additions & 0 deletions

File tree

‎freeCodeCamp_projects/ProductLandingPage/._productLandingPage.html‎

4 KB
Binary file not shown.

‎freeCodeCamp_projects/ProductLandingPage/._style.css‎

4 KB
Binary file not shown.

‎freeCodeCamp_projects/ProductLandingPage/productLandingPage.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<html>
2+
3+
<head>
4+
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
5+
<link rel="stylesheet" href="style.css">
6+
</head>
7+
8+
<header id="header">
9+
<div class="logo">
10+
<img id="header-img" src="https://media.licdn.com/dms/image/C4E0BAQFcP7yurn79CA/company-logo_200_200/0?e=2130710400&v=beta&t=i3H8J4cPjsNCphYlGc61_uaFhwk9Y8krbqOFdy_P-fQ"
11+
alt="numero uno apps company logo" />
12+
</div>
13+
14+
<nav id="nav-bar">
15+
<ul>
16+
<li>
17+
<a class="nav-link" href="#services">Services</a>
18+
</li>
19+
<li>
20+
<a class="nav-link" href="#demo">Demo</a>
21+
</li>
22+
<li>
23+
<a class="nav-link" href="#portfolio">Portfolio</a>
24+
</li>
25+
</ul>
26+
</nav>
27+
</header>
28+
29+
<body>
30+
31+
<div class="container">
32+
33+
<section id="intro">
34+
<h2>Welcome to Numero Uno Apps</h2>
35+
<h3>Let's build your next app!
36+
</h3>
37+
</section>
38+
39+
40+
<div class="container">
41+
<form id="form" action="https://www.freecodecamp.com/email-submit">
42+
<input name="email" id="email" type="email" placeholder="Enter your email address" required/>
43+
<input id="submit" type="submit" value="Amaze Me!" class="btn"></input>
44+
</form>
45+
<section id="services">
46+
<div class="grid">
47+
<div class="icon">
48+
<i class="fa fa-3x fa-fire"></i>
49+
</div>
50+
<div class="desc">
51+
<h2>Data Analytics</h2>
52+
<p>Utilize our data scientist's expertise on your next Data Science project</p>
53+
</div>
54+
</div>
55+
<div class="grid">
56+
<div class="icon">
57+
<i class="fa fa-3x fa-truck"></i>
58+
</div>
59+
<div class="desc">
60+
<h2>Web Development</h2>
61+
<p>At Numero Uno Apps we believe in the art of the possible. We build mobile and web apps as per your
62+
requirement.Fast deployment, cost effective solutions! Tailored just for you....</p>
63+
</div>
64+
</div>
65+
<div class="grid">
66+
<div class="icon">
67+
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
68+
</div>
69+
<div class="desc">
70+
<h2>Project Management</h2>
71+
<p>Efficient management for your complex projects, let our Prince2 practitioners take care every aspect
72+
of your project</p>
73+
</div>
74+
</div>
75+
</section>
76+
<section id="demo">
77+
<h4>Watch the Services testimonials video</h4>
78+
<iframe id="video" width="640" height="360" src="https://www.youtube.com/embed/PsjMmAqmblQ" frameborder="0" allow="autoplay; encrypted-media"
79+
allowfullscreen></iframe>
80+
</section>
81+
<div id="portfolio">
82+
<h3>
83+
<a href="https://public.tableau.com/profile/mickeyjoe75#!/" target="_blank">Click here to view some of our featured projects!</a>
84+
</h3>
85+
</div>
86+
87+
<footer>
88+
<ul>
89+
<li>
90+
<a href="#">Privacy</a>
91+
</li>
92+
<li>
93+
<a href="#">Terms</a>
94+
</li>
95+
<li>
96+
<a href="#">Contact</a>
97+
</li>
98+
</ul>
99+
<div id="footer-text">Copyright 2018, Numero Uno Apps Ltd.</div>
100+
101+
</footer>
102+
</div>
103+
104+
</div>
105+
</body>
106+
107+
</html>

‎freeCodeCamp_projects/ProductLandingPage/style.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
2+
html {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
@media only screen and (max-width: 600px) {
8+
body {
9+
background-color: white;
10+
}
11+
}
12+
13+
body {
14+
background-color: lightblue;
15+
font-family: 'Lato', sans-serif;
16+
align-content: center;
17+
margin: auto;
18+
display:flex;
19+
flex-direction: column;
20+
padding: 0;
21+
}
22+
23+
24+
25+
li {
26+
list-style: none;
27+
}
28+
29+
a {
30+
color: blue;
31+
text-decoration: none;
32+
}
33+
34+
/** global classes styling **/
35+
36+
.container {
37+
max-width: 1000px;
38+
width: 100%;
39+
margin: 100px auto;
40+
display:flex;
41+
flex-direction: column;
42+
43+
}
44+
45+
.btn {
46+
text-align: center;
47+
padding: 0 20px;
48+
height: 40px;
49+
font-size: 1em;
50+
font-weight: 900;
51+
text-transform: uppercase;
52+
border: 3px black solid;
53+
border-radius: 2px;
54+
cursor: pointer;
55+
}
56+
57+
.grid {
58+
display: flex;
59+
}
60+
61+
#header {
62+
position: fixed;
63+
background-color: lightgray;
64+
width: 100%;
65+
height: auto;
66+
margin: 0;
67+
display: flex;
68+
flex-direction: row;
69+
padding: 0px;
70+
}
71+
72+
#header-img {
73+
width: 80PX;
74+
height: 80PX;
75+
max-width: 300px;
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
text-align: center;
80+
margin-left: 20px;
81+
/* @media (max-width: 650px) {
82+
margin: 0 auto;
83+
} */
84+
}
85+
86+
87+
88+
/* // services */
89+
90+
#services {
91+
margin-top: 30px;
92+
.icon {
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
height: 125px;
97+
width: 20vw;
98+
color: darkorange;
99+
@media (max-width: 550px) {
100+
display: none;
101+
}
102+
}
103+
104+
.desc {
105+
display: flex;
106+
flex-direction: column;
107+
justify-content: center;
108+
height: 125px;
109+
width: 80vw;
110+
padding: 5px;
111+
112+
@media (max-width: 550px) {
113+
width: 100%;
114+
text-align: center;
115+
padding: 0;
116+
height: 150px;
117+
}
118+
}
119+
120+
@media (max-width: 650px) {
121+
margin-top: 0;
122+
}
123+
}
124+
125+
// demo
126+
127+
#demo {
128+
margin-top: 50px;
129+
display: flex;
130+
justify-content: center;
131+
132+
iframe {
133+
max-width: 560px;
134+
width: 100%;
135+
}
136+
}
137+
138+
// portfolio
139+
140+
#portfolio {
141+
margin-top: 60px;
142+
display: flex;
143+
flex-direction: row;
144+
justify-content: center;
145+
146+
147+
@media (max-width: 800px) {
148+
flex-direction: column;
149+
150+
151+
}
152+
}
153+
154+
155+
156+
#intro {
157+
text-align: center;
158+
}
159+
160+
#form {
161+
text-align: left;
162+
}
163+
164+
#footer-text {
165+
text-align: center;
166+
font-size: .8em;
167+
}
168+
169+
ul {
170+
width: 35vw;
171+
display: flex;
172+
flex-direction: row;
173+
justify-content: space-around;
174+
text-align: right;
175+
176+
@media (max-width: 650px) {
177+
flex-direction: column;
178+
}
179+
}

0 commit comments

Comments
 (0)