Skip to content

Commit 2df5033

Browse files
dabit3dabit3
committed
Added css
1 parent df60283 commit 2df5033

File tree

4 files changed

+137
-21
lines changed

4 files changed

+137
-21
lines changed

‎css/style.css

Lines changed: 108 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ h1.topnav {
122122
background-color: #DBDEDD;
123123
height:530px;
124124
background-position: center 10px;
125+
box-shadow: inset 0px 0px 4px rgba(0,0,0,.3)
125126

126127
}
127128

@@ -131,7 +132,7 @@ h1.topnav {
131132
}
132133

133134
.main-container-h2 {
134-
margin: 0;
135+
margin: 0 ;
135136
color: #132752;
136137
font-weight: 400;
137138
font-size: 46px;
@@ -141,14 +142,15 @@ line-height: 60px;
141142
}
142143

143144
.main-container-h3 {
144-
margin:0;
145-
font-weight: 300;
146145
color: rgba(255,255,255,.9);
147-
padding-top: 40px;
148-
border-bottom: 1px solid rgba(255,255,255,.9);
149-
padding-bottom: 10px;
150-
font-size: 24px;
151-
width:100px;
146+
border-bottom: 1px solid rgba(255,255,255,.9);
147+
148+
margin:0 auto;
149+
font-weight: 300;
150+
padding-top: 20px;
151+
padding-bottom: 10px;
152+
font-size: 36px;
153+
width:108px;
152154
}
153155

154156
.main-container-p {
@@ -173,6 +175,7 @@ width:100px;
173175

174176
.third-container {
175177
background:#ffffff;
178+
box-shadow: inset 0px 0px 4px rgba(0,0,0,.3);
176179
}
177180

178181
.third-container-3 {
@@ -182,14 +185,100 @@ width:100px;
182185
}
183186

184187
.third-container-h3 {
185-
margin:0;
186-
font-weight: 300;
188+
187189
color: #000000;
188-
padding-top: 40px;
189-
border-bottom: 1px solid #000000;
190-
padding-bottom: 10px;
191-
font-size: 24px;
192-
width:129px;
190+
border-bottom: 1px solid #000000;
191+
margin:0 auto;
192+
font-weight: 300;
193+
padding-top: 20px;
194+
padding-bottom: 10px;
195+
font-size: 36px;
196+
width:190px;
197+
}
198+
199+
.three-link a {
200+
color: #C6C6C6;
201+
text-decoration:none;
202+
}
203+
204+
.three-link a:hover {
205+
color: #253E71;
206+
}
207+
208+
.three-big {
209+
font-size:22px;
210+
}
211+
212+
.fourth-container-wrapper {
213+
background:#DBDEDD;
214+
box-shadow: inset 0px 0px 4px rgba(0,0,0,.3);
215+
}
216+
217+
.fourth-container {
218+
width:900px;
219+
margin:0 auto;
220+
padding: 0px 0px 30px;
221+
}
222+
223+
.fourth-container-h3 {
224+
225+
color: #253E71;
226+
border-bottom: 1px solid #253E71;
227+
margin:0 auto;
228+
font-weight: 300;
229+
padding-top: 20px;
230+
padding-bottom: 10px;
231+
font-size: 36px;
232+
width:146px;
233+
}
234+
235+
.sponsor {
236+
float:left;
237+
width:297px;
238+
height:200px;
239+
border-radius: 8px;
240+
margin: 25px;
241+
text-align:center;
242+
color:#253E71;
243+
border:1px solid rgba(0,0,0,.1);
244+
}
245+
246+
.sponsor p {
247+
padding-top:17px;
248+
}
249+
250+
.sponsortwo p {
251+
margin-bottom:10px;
252+
}
253+
254+
.sponsor:hover {
255+
box-shadow: inset 0px 0px 10px rgba(0,0,0,.1);
256+
cursor: pointer;
257+
background: #D6D6D6;
258+
}
259+
260+
.sponsorcontainer {
261+
width:700px;
262+
margin: 20px auto 0px;
263+
}
264+
265+
.webcare {
266+
background: #D6D6D6;
267+
width:615px;
268+
margin: 0 auto;
269+
padding: 18px 20px;
270+
box-shadow: inset 0px 0px 10px rgba(0,0,0,.1);
271+
border-radius:8px;
272+
}
273+
274+
.webcare h4 {
275+
margin: 0;
276+
color:#253E71;
277+
}
278+
279+
.webcare p {
280+
margin: 10px 0px 0px 0px;
281+
line-height:26px;
193282
}
194283

195284
footer {
@@ -215,3 +304,7 @@ footer {
215304
float:left;
216305
}
217306

307+
.clearfix {
308+
clear:both;
309+
}
310+

‎images/hive.png

11.7 KB
Loading

‎images/webcare.png

12.2 KB
Loading

‎index.html

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<div class="navfixed">
1313
<div class="leftnav">
1414
<section class="navleft">
15-
<h3>ABOUT US</h3>
16-
<h3>CONTACT US</h3>
15+
<h3>ABOUT</h3>
16+
<h3>CONTACT</h3>
1717
<h3>GIVE A TALK</h3>
1818
<a target="_blank" href="http://www.meetup.com/Jackson-Area-Web-and-Mobile-Developers/"><h3>JOIN THE MEETUP</h3></a>
1919
<h3>USEFUL LINKS</h3>
@@ -44,7 +44,7 @@ <h2 class="main-container-h2">Meet other local Developers to network, share know
4444

4545
<div class="second-container">
4646
<section class="main-container-2">
47-
<h3 class="main-container-h3">About Us</h3>
47+
<h3 class="main-container-h3">About</h3>
4848
<p class="main-container-p">This group is for professional web designers and developers looking to network with others in the industry, learn about new or emerging technologies, and for anyone looking to learn web development (beginner to advanced).</p>
4949
<p class="main-container-p">We will be talking design for the web, sharing experiences with use of different tools &amp; languages, critiquing web sites, talking industry, business, employment news, and sharing motivations and inspirations. This group is intended to become a hub for all today's technologies that make up the Internet as we know it. </p>
5050
<p class="main-container-p">
@@ -58,15 +58,38 @@ <h3 class="main-container-h3">About Us</h3>
5858
<h3 class="third-container-h3">
5959
Useful Links
6060
</h3>
61-
<p><a target="_blank" href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a><br />
61+
<p class="three-link"><a target="_blank" href="https://developer.mozilla.org/en-US/"><span class="three-big">Mozilla Developer Network</span></a><br />
6262
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur dolores vitae quos fugit fuga soluta earum ea, reiciendis aspernatur incidunt. Quasi deleniti quibusdam error corrupti provident, quo, debitis quas dolorem.
6363
</p>
64-
<p><a href="http://codepen.io/">Codepen</a><br />
64+
<p class="three-link"><a href="http://codepen.io/" target="_blank"><span class="three-big">Codepen</span></a><br />
6565
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sunt eveniet facilis dicta eum porro at, odit voluptas vel. Reiciendis dolor dolores esse cupiditate molestiae voluptas, laboriosam mollitia sapiente quibusdam.</p>
66-
<p><a href="http://www.news.ycombinator.com">Hacker News</a><br />
66+
<p class="three-link"><a href="https://news.ycombinator.com" target="_blank"><span class="three-big">Hacker News</span></a><br />
6767
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi repudiandae hic, laboriosam laborum. Expedita est voluptate reprehenderit ab, dignissimos sequi nulla voluptatibus fuga dolore nostrum, molestiae tempore tenetur, quibusdam delectus?</p>
6868
</div>
6969
</div>
70+
71+
<div class="fourth-container-wrapper">
72+
<div class="fourth-container">
73+
<h3 class="fourth-container-h3">Sponsors</h3>
74+
<div class="sponsorcontainer">
75+
<div class="sponsor sponsorone">
76+
<p>Webcare 360</p>
77+
<img src="images/webcare.png" style="width:250px;" alt="">
78+
</div>
79+
<div class="sponsor sponsortwo">
80+
<p>The Hive</p>
81+
<img src="images/hive.png" style="width:250px;" alt="">
82+
</div>
83+
</div>
84+
<div class="clearfix"></div>
85+
<div class="webcare">
86+
<h4>
87+
Webcare360.com
88+
</h4>
89+
<p>WebCare360 provides Outstanding Anonymous Offshore European Web Hosting, Reseller Hosting, VPS Hosting and Dedicated Servers and Powerful DDoS mitigation Solutions</p>
90+
</div>
91+
</div>
92+
</div>
7093

7194
<footer>
7295
<div class="mainfooter">

0 commit comments

Comments
 (0)