Skip to content

Commit be15075

Browse files
fullstackmafiafullstackmafia
committed
Initial Commit
0 parents  commit be15075

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2878
-0
lines changed

‎bicycle-project-2.css

+2,175
Large diffs are not rendered by default.

‎bicycle-project-2.html

+481
Large diffs are not rendered by default.

‎images/GitHubSetup.exe.opdownload

16.5 KB
Binary file not shown.

‎images/amazing-customer.jpg

3.86 KB

‎images/american-express.png

4.15 KB

‎images/astrit-bublaku.png

2.35 KB

‎images/cart.png

2.72 KB

‎images/cashback.png

10.3 KB

‎images/children-bike.jpg

30.5 KB

‎images/city-bicycle-sale.jpg

9.65 KB

‎images/city-bicycle.jpg

116 KB

‎images/company-logo-1.jpg

14.4 KB

‎images/company-logo-2.jpg

27 KB

‎images/company-logo-3.jpg

14.4 KB

‎images/company-logo-4.jpg

3.05 KB

‎images/company-logo-5.png

4.25 KB

‎images/company-logo-6.jpg

2.83 KB

‎images/correct-tick.jpg

5.15 KB

‎images/downhill-bicycles.jpg

193 KB

‎images/downhill-bike-sale.jpg

125 KB

‎images/downhill-bike.jpg

36.3 KB

‎images/email-arrow.png

46.1 KB

‎images/facebook-image.png

1.61 KB

‎images/four-star-rating.png

3.65 KB

‎images/free-guarantee.jpg

35.7 KB

‎images/free-shipping.jpg

22.8 KB

‎images/gotham-clock.png

3.02 KB

‎images/gotham-phone.png

3.93 KB

‎images/grey-heart.png

18.5 KB

‎images/heart.png

7.9 KB

‎images/highway-bike-sale.jpg

8.44 KB

‎images/highway-bike.jpg

86.1 KB

‎images/instagram-image.png

12.8 KB

‎images/international-shipping.png

10.2 KB

‎images/latin-a-pic.jpg

20.4 KB

‎images/latin-b-pic.jpg

21.1 KB

‎images/latin-c-pic.jpg

27.5 KB

‎images/latin-d-pic.jpg

27.1 KB

‎images/mastercard-logo.png

14.6 KB

‎images/mountain-bike-sale.jpg

1.13 MB

‎images/mountain-bike.jpg

37.6 KB

‎images/parts.jpg

26.8 KB

‎images/paypal-logo.jpg

5.55 KB

‎images/pinterest-image.png

3.42 KB

‎images/play-button-latin-d.png

10.2 KB

‎images/read-more-arrow.jpg

19.2 KB

‎images/search-glass.png

2.76 KB

‎images/shopping-cart.png

3.89 KB

‎images/sign-up-mail-image.png

15 KB

‎images/the-custom-collection-pic.jpg

7.04 KB

‎images/twitter-image.png

8.06 KB

‎images/ui-kit.png

404 Bytes

‎images/views-logo.png

3.78 KB

‎images/visa-logo.png

16.8 KB

‎test-run.css

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/*
2+
Generic Styling, for Desktops/Laptops
3+
*/
4+
table {
5+
width: 100%;
6+
border-collapse: collapse;
7+
}
8+
/* Zebra striping */
9+
tr:nth-of-type(odd) {
10+
background: #eee;
11+
}
12+
th {
13+
background: #333;
14+
color: white;
15+
font-weight: bold;
16+
}
17+
td, th {
18+
padding: 6px;
19+
border: 1px solid #ccc;
20+
text-align: left;
21+
}
22+
23+
/*
24+
Max width before this PARTICULAR table gets nasty
25+
This query will take effect for any screen smaller than 760px
26+
and also iPads specifically.
27+
*/
28+
@media
29+
only screen and (max-width: 760px),
30+
(min-device-width: 768px) and (max-device-width: 1024px) {
31+
32+
/* Force table to not be like tables anymore */
33+
table, thead, tbody, th, td, tr {
34+
display: block;
35+
}
36+
37+
/* Hide table headers (but not display: none;, for accessibility) */
38+
thead tr {
39+
position: absolute;
40+
top: -9999px;
41+
left: -9999px;
42+
}
43+
44+
tr { border: 1px solid #ccc; }
45+
46+
td {
47+
/* Behave like a "row" */
48+
border: none;
49+
border-bottom: 1px solid #eee;
50+
position: relative;
51+
padding-left: 50%;
52+
}
53+
54+
td:before {
55+
/* Now like a table header */
56+
position: absolute;
57+
/* Top/left values mimic padding */
58+
top: 6px;
59+
left: 6px;
60+
width: 45%;
61+
padding-right: 10px;
62+
white-space: nowrap;
63+
}
64+
65+
/*
66+
Label the data
67+
*/
68+
td:nth-of-type(1):before { content: "First Name"; }
69+
td:nth-of-type(2):before { content: "Last Name"; }
70+
td:nth-of-type(3):before { content: "Job Title"; }
71+
td:nth-of-type(4):before { content: "Favorite Color"; }
72+
td:nth-of-type(5):before { content: "Wars of Trek?"; }
73+
td:nth-of-type(6):before { content: "Porn Name"; }
74+
td:nth-of-type(7):before { content: "Date of Birth"; }
75+
td:nth-of-type(8):before { content: "Dream Vacation City"; }
76+
td:nth-of-type(9):before { content: "GPA"; }
77+
td:nth-of-type(10):before { content: "Arbitrary Data"; }
78+
}
79+
80+
81+
82+
.ribbon {
83+
font-size: 16px !important;
84+
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
85+
86+
width: 50%;
87+
88+
position: relative;
89+
background: #ba89b6;
90+
color: #fff;
91+
text-align: center;
92+
padding: 1em 2em; /* Adjust to suit */
93+
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
94+
}
95+
.ribbon:before, .ribbon:after {
96+
content: "";
97+
position: absolute;
98+
display: block;
99+
bottom: -1em;
100+
border: 1.5em solid #986794;
101+
z-index: -1;
102+
}
103+
.ribbon:before {
104+
left: -2em;
105+
border-right-width: 1.5em;
106+
border-left-color: transparent;
107+
}
108+
.ribbon:after {
109+
right: -2em;
110+
border-left-width: 1.5em;
111+
border-right-color: transparent;
112+
}
113+
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
114+
content: "";
115+
position: absolute;
116+
display: block;
117+
border-style: solid;
118+
border-color: #804f7c transparent transparent transparent;
119+
bottom: -1em;
120+
}
121+
.ribbon .ribbon-content:before {
122+
left: 0;
123+
border-width: 1em 0 0 1em;
124+
}
125+
.ribbon .ribbon-content:after {
126+
right: 0;
127+
border-width: 1em 1em 0 0;
128+
}

‎test-run.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE HTML>
2+
<html lang = "en">
3+
<link rel="stylesheet" type="text/css" href="test-run.css">
4+
<body>
5+
<table>
6+
<thead>
7+
<tr>
8+
<th>First Name</th>
9+
<th>Last Name</th>
10+
<th>Job Title</th>
11+
<th>Favourite Color</th>
12+
<th>Wars or Trek?</th>
13+
<th>Porn Name</th>
14+
<th>Date of Birth</th>
15+
<th>Dream Vacation City</th>
16+
<th>GPA</th>
17+
<th>Arbitary Data</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td>James</td>
23+
<td>Matman</td>
24+
<td>Chief Sandwich Eater</td>
25+
<td>*******</td>
26+
<td>*******</td>
27+
<td>*******</td>
28+
<td>*******</td>
29+
<td>*******</td>
30+
<td>*******</td>
31+
<td>*******</td>
32+
</tr>
33+
<tr>
34+
<td>The</td>
35+
<td>Tick</td>
36+
<td>Crimefighter Sorta</td>
37+
<td>*******</td>
38+
<td>*******</td>
39+
<td>*******</td>
40+
<td>*******</td>
41+
<td>*******</td>
42+
<td>*******</td>
43+
<td>*******</td>
44+
</tr>
45+
<tr>
46+
<td>The</td>
47+
<td>Tick</td>
48+
<td>Crimefighter Sorta</td>
49+
<td>*******</td>
50+
<td>*******</td>
51+
<td>*******</td>
52+
<td>*******</td>
53+
<td>*******</td>
54+
<td>*******</td>
55+
<td>*******</td>
56+
</tr>
57+
<tr>
58+
<td>The</td>
59+
<td>Tick</td>
60+
<td>Crimefighter Sorta</td>
61+
<td>*******</td>
62+
<td>*******</td>
63+
<td>*******</td>
64+
<td>*******</td>
65+
<td>*******</td>
66+
<td>*******</td>
67+
<td>*******</td>
68+
</tr>
69+
<tr>
70+
<td>The</td>
71+
<td>Tick</td>
72+
<td>Crimefighter Sorta</td>
73+
<td>*******</td>
74+
<td>*******</td>
75+
<td>*******</td>
76+
<td>*******</td>
77+
<td>*******</td>
78+
<td>*******</td>
79+
<td>*******</td>
80+
</tr>
81+
</tbody>
82+
</table>
83+
84+
85+
86+
<h1 class="ribbon">
87+
<strong class="ribbon-content">Everybody loves ribbons</strong>
88+
</h1>
89+
90+
91+
92+
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)