Skip to content
This repository was archived by the owner on Apr 20, 2022. It is now read-only.

Commit da7c7e2

Browse files
mlh-localhostmlh-localhost
committed
add index and style
1 parent f0a53ec commit da7c7e2

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Team Page</title>
7+
<link href="reset.css" type="text/css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poppins|Ubuntu" rel="stylesheet">
9+
<link href="style.css" type="text/css" rel="stylesheet">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<span>Home</span>
15+
<span>About</span>
16+
</header>
17+
18+
<section>
19+
<h1>Team Name</h1>
20+
<div class="row">
21+
<div class="left">
22+
<p>Achieving something awesome. At scale. Better than you could do it for yourself. For money.</p>
23+
<ul>
24+
<li>First point</li>
25+
<li>Second point</li>
26+
<li>Third point</li>
27+
</div>
28+
<div class="right">
29+
<p>putting text here</p>
30+
</div>
31+
</div>
32+
</section>
33+
34+
<main>
35+
<div class="container">
36+
<h1>Who We Are</h1>
37+
38+
<!-- ## copy from here -->
39+
<div class="about">
40+
<div class="bio-left">
41+
<h2>MLH Localhost</h2>
42+
<img src="https://s3.amazonaws.com/static.mlh.io/brand-assets/logos/png/mlh-localhost-logo-dark.png" />
43+
</div>
44+
<div class="bio-right">
45+
<p> MLH Localhost is a series of QAed, out-of-the-box workshops that anyone can use to learn and teach new skills </p>
46+
</div>
47+
</div>
48+
<!-- to here -->
49+
50+
</div>
51+
</main>
52+
53+
<footer>
54+
<span>Email us at:</span>
55+
</footer>
56+
57+
</body>
58+
59+
</html>

‎style.css

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
body {
2+
font-family: 'Open Sans';
3+
font-size: 8px;
4+
color: #272727;
5+
}
6+
7+
header {
8+
height: 7.5vh;
9+
background-color: #009FB7;
10+
box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.1);
11+
display: flex;
12+
align-items: center;
13+
position: fixed;
14+
width: 100%;
15+
top: 0;
16+
z-index: 5;
17+
}
18+
19+
section {
20+
position: relative;
21+
top: 7.5vh;
22+
height: 80vh;
23+
text-align: center;
24+
}
25+
26+
ul {
27+
margin: 1rem;
28+
list-style: circle;
29+
}
30+
31+
li {
32+
font-size: 1rem;
33+
margin: 0.5rem;
34+
}
35+
36+
main {
37+
position: relative;
38+
background-color: #e7e7e7;
39+
top: 7.5vh;
40+
border: 1px solid white;
41+
}
42+
43+
h1 {
44+
text-align: center;
45+
font-size: 3rem;
46+
margin: 8vh;
47+
}
48+
49+
h2 {
50+
font-size: 2.5rem;
51+
border: 1px solid black;
52+
}
53+
54+
span {
55+
font-size: 1.5rem;
56+
margin: 1rem;
57+
}
58+
59+
p {
60+
font-size: 1.5rem;
61+
border: 1px solid black;
62+
}
63+
64+
img {
65+
width: 20vw;
66+
height: auto;
67+
margin: 2vw 0;
68+
}
69+
70+
footer {
71+
height: 5vh;
72+
position: relative;
73+
top: 7.5vh;
74+
padding: 5vh 0;
75+
}
76+
77+
.container {
78+
width: 80vw;
79+
margin: 0 auto;
80+
}
81+
82+
.row {
83+
display: flex;
84+
margin: 2rem;
85+
justify-content: center;
86+
}
87+
88+
.left, .right {
89+
width: 35vw;
90+
text-align: left;
91+
}
92+
93+
.about {
94+
display: flex;
95+
}
96+
97+
.bio-left {
98+
width: 30%;
99+
}
100+
101+
.bio-right {
102+
width: 70%;
103+
}

0 commit comments

Comments
 (0)