Skip to content

Commit 4e8a635

Browse files
author
Karan Goel
committed
new design
1 parent d5e1e24 commit 4e8a635

File tree

2 files changed

+58
-56
lines changed

2 files changed

+58
-56
lines changed

‎index.html‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<meta property="og:image" content="screen.png" />
1919

20+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
2021
<link rel="stylesheet" type="text/css" href="style.css" />
2122

2223
<script>
@@ -32,24 +33,27 @@
3233
</head>
3334
<body>
3435

35-
<div class="bg"></div>
36-
37-
<div class="container">
38-
<h1><a href="https://www.youtube.com/user/ForkCode">Fork Code</a></h1>
39-
40-
<h2>Free bite-sized programming videos for beginners and intermediaries by <a href="http://www.goel.im">Karan Goel</a>.</h2>
41-
<div class="signup">
42-
<!-- Begin MailChimp Signup Form -->
43-
<div id="mc_embed_signup">
44-
<form action="http://goel.us3.list-manage.com/subscribe/post?u=e6728b4299cef4104e10240b9&amp;id=c5d6f66e4a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
45-
<h4>Sign up to get free notifications of new videos and occasional private video tutorials.</h4>
46-
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
47-
<div style="position: absolute; left: -5000px;"><input type="text" name="b_e6728b4299cef4104e10240b9_c5d6f66e4a" tabindex="-1" value=""></div>
48-
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
49-
</form>
36+
<div class="jumbotron">
37+
38+
<div class="col-md-8 col-md-offset-2 content">
39+
<h1 class="logo"><a href="https://www.youtube.com/user/ForkCode" target="_blank">ForkCode</a></h1>
40+
41+
<p class="lead"><strong>Level up your programming skills</strong> today with awesome high-quality <a href="https://www.youtube.com/user/ForkCode" target="_blank">video tutorials</a>.</p>
42+
43+
<div class="signup">
44+
<!-- Begin MailChimp Signup Form -->
45+
<div id="mc_embed_signup">
46+
<form action="http://goel.us3.list-manage.com/subscribe/post?u=e6728b4299cef4104e10240b9&amp;id=c5d6f66e4a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
47+
<p>Sign up to get free notifications of new videos and occasional private video tutorials.</p>
48+
<input type="email" value="" name="EMAIL" class="email col-md-7" id="mce-EMAIL" placeholder="email address" required>
49+
<div style="position: absolute; left: -5000px;"><input type="text" name="b_e6728b4299cef4104e10240b9_c5d6f66e4a" tabindex="-1" value=""></div>
50+
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button col-md-4 col-md-offset-1"></div>
51+
</form>
52+
</div>
53+
<!--End mc_embed_signup-->
5054
</div>
51-
<!--End mc_embed_signup-->
5255
</div>
56+
5357
</div>
5458

5559
</body>

‎style.css‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
padding: 0;
1818
-webkit-font-smoothing: antialiased;
1919
-moz-box-sizing: border-box;
20-
box-sizing: border-box
20+
box-sizing: border-box;
2121
}
2222

2323
html, body {
@@ -28,31 +28,24 @@ html, body {
2828
}
2929

3030
body {
31-
font-family: "Open Sans", sans-serif;
31+
font-family: "Open-Sans", sans-serif;
3232
font-weight: 400;
3333
color: #fff;
34-
font-size: 16pt
35-
}
36-
37-
@media only screen and (max-width: 400px) {
38-
body { font-size: 70%; }
39-
}
40-
41-
@media only screen and (max-width: 640px) {
42-
body { font-size: 80%; }
34+
font-size: 16pt;
35+
background: #0074d9!important; /*yolo*/
4336
}
4437

4538
h1, h2, h3, h4 {
4639
color: #fff;
4740
}
4841

4942
h1 {
50-
font-size: 3.5em;
5143
font-weight: 700;
5244
}
5345

5446
h1 a {
5547
color: #fff;
48+
font-size: 1.5em;
5649
}
5750

5851
h2 {
@@ -63,30 +56,31 @@ a {
6356
color: #fff;
6457
}
6558

66-
.bg {
67-
content: "";
68-
z-index: -1;
69-
position: absolute;
59+
a:hover {
60+
color: #fff;
61+
}
62+
63+
.jumbotron {
64+
background: 0 0;
65+
text-align: center;
7066
height: 100%;
7167
width: 100%;
72-
background-attachment: fixed;
73-
background-repeat: no-repeat;
74-
background-position: center center;
75-
background-image: url("bg-bg.jpg");
76-
-webkit-background-size: cover;
77-
-moz-background-size: cover;
78-
-o-background-size: cover;
79-
background-size: cover;
80-
-moz-filter: brightness(55%);
81-
}
82-
83-
.container {
84-
margin: 0 auto;
85-
width: 80%;
86-
max-width: 640px;
68+
margin: 0;
69+
padding: 0;
70+
}
71+
72+
.content {
8773
text-align: center;
88-
background-color: rgba(0, 0, 0, 0.5);
89-
padding: 50px;
74+
}
75+
76+
.logo {
77+
margin-top: 50px;
78+
margin-bottom: 50px;
79+
}
80+
81+
p.lead {
82+
font-size: 1.2em;
83+
line-height: 1.5em;
9084
}
9185

9286
#mc-embedded-subscribe-form {
@@ -96,10 +90,14 @@ a {
9690
text-align: center;
9791
}
9892

93+
#mc-embedded-subscribe-form p {
94+
font-size: 1.2em;
95+
line-height: 1.5em;
96+
}
97+
9998
input#mce-EMAIL.email {
10099
height: 50px;
101-
width: 70%;
102-
max-width: 400px;
100+
103101
padding: 7px 15px;
104102
display: inline-block;
105103
font-weight: bold;
@@ -115,18 +113,18 @@ input#mce-EMAIL.email:focus {
115113
}
116114

117115
input#mc-embedded-subscribe {
118-
margin-left: 3%;
116+
/*margin-left: 3%;*/
119117
-moz-border-radius: 5px;
120118
-webkit-border-radius: 5px;
121119
border-radius: 5px;
122-
width: 27%;
123-
max-width: 150px;
120+
/*width: 27%;*/
121+
/*max-width: 150px;*/
124122
display: inline-block;
125123
height: 50px;
126124
padding: 7px 10px;
127125
color: #fff;
128126
margin-top: 30px;
129-
background-color: #202020;
127+
background-color: #0074d9;
130128
border: 2px solid #fff;
131129
font-size: 1em;
132130
-moz-transition: all 0.2s linear;
@@ -137,7 +135,7 @@ input#mc-embedded-subscribe {
137135

138136
input#mc-embedded-subscribe:hover {
139137
background-color: #fff;
140-
color: #202020;
138+
color: #0074d9;
141139
-moz-transition: all 0.2s linear;
142140
-o-transition: all 0.2s linear;
143141
-webkit-transition: all 0.2s linear;

0 commit comments

Comments
 (0)