├── 3-column.css
├── 3-column.html
├── README.md
├── img
├── favicon-32x32.png
├── icon-luxury.svg
├── icon-sedans.svg
└── icon-suvs.svg
├── luxury.css
├── luxury.html
├── sedans.css
├── sedans.html
├── suvs.css
└── suvs.html
/3-column.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 30px;
3 | text-align: center;
4 | font-family: Georgia, 'Times New Roman', Times, serif;
5 | background-image: url("https://static1.hotcarsimages.com/wordpress/wp-content/uploads/2018/02/Roadster-via-Tesla.jpg");
6 | }
7 |
8 | h1{
9 | font-size: 36px;
10 | color: #fff;
11 | }
12 |
13 | p{
14 | color: #fff;
15 | font-size: 15px;
16 | }
17 |
18 | .top-container{
19 | width: 200px;
20 | height: 400px;
21 | padding: 50px;
22 | position: relative;
23 | display: inline-block;
24 | background-color: rgb(255, 184, 51);
25 | text-align: left;
26 | left: 7px;
27 | border-radius: 10px;
28 | }
29 |
30 | .middle-container{
31 | width: 200px;
32 | height: 400px;
33 | padding: 50px;
34 | position: relative;
35 | display: inline-block;
36 | background-color: rgb(27, 167, 172);
37 | text-align: left;
38 | left: 3px;
39 | border-radius: 10px;
40 | }
41 | .bottom-container{
42 | width: 200px;
43 | height: 400px;
44 | padding: 50px;
45 | position: relative;
46 | display: inline-block;
47 | background-color: rgb(2, 87, 90);
48 | text-align: left;
49 | right: 1px;
50 | border-radius: 10px;
51 | }
52 |
53 | a{
54 | color: #11999e;
55 | font-family: 'Montserrat',sans-serif;
56 | margin: 10px 20px;
57 | text-decoration: none;
58 | }
59 |
60 | .footer .copyright{
61 | color: #fff;
62 | font-size: 0.75rem;
63 | padding: 20px 0;
64 | }
65 |
66 | .btn {
67 | -webkit-border-radius: 28;
68 | -moz-border-radius: 28;
69 | border-radius: 28px;
70 | font-family: Georgia;
71 | color: #ffffff;
72 | font-size: 15px;
73 | padding: 10px 20px 10px 20px;
74 | border: solid #ffffff 2px;
75 | text-decoration: none;
76 | }
77 |
78 | .btn:hover {
79 | background: #2f9ce0;
80 | background-image: -webkit-linear-gradient(top, #2f9ce0, #185f8f);
81 | background-image: -moz-linear-gradient(top, #2f9ce0, #185f8f);
82 | background-image: -ms-linear-gradient(top, #2f9ce0, #185f8f);
83 | background-image: -o-linear-gradient(top, #2f9ce0, #185f8f);
84 | background-image: linear-gradient(to bottom, #2f9ce0, #185f8f);
85 | text-decoration: none;
86 | }
--------------------------------------------------------------------------------
/3-column.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 3-column
6 |
7 |
8 |
9 |
10 |
11 |
12 |
SEDANS
13 |
Choose a sedan for its affordability and excellent fuel economy. I deal for cruising in the city or on your next road trip.
14 |
15 |
16 |
17 |
18 |
19 |
Learn More
20 |
21 |
22 |
23 |
24 |
SUVS
25 |
Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
26 |
27 |
28 |
29 |
30 |
31 |
Learn More
32 |
33 |
34 |
35 |
36 |
LUXURY
37 |
Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
38 |
39 |
40 |
41 |
42 |
43 |
Learn More
44 |
45 |
46 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 3-column
2 |
3 | 
4 |
--------------------------------------------------------------------------------
/img/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JasonLim1009/3-column/15fe3c3bda2c629dd24944ce954b5dc55b55ebb8/img/favicon-32x32.png
--------------------------------------------------------------------------------
/img/icon-luxury.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/icon-sedans.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/img/icon-suvs.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/luxury.css:
--------------------------------------------------------------------------------
1 | html {
2 | background-color: #E4E9FD;
3 | background-image: -webkit-linear-gradient(65deg, #BA8957 50%, #6D6A5D 50%);
4 | min-height: 1000px;
5 | font-family: 'helvetica neue';
6 | }
7 |
8 | h1 , h3{
9 | background: linear-gradient(2deg, #0090de, #32f3a6);
10 | text-transform: uppercase;
11 | -webkit-background-clip: text;
12 | -webkit-text-fill-color: transparent;
13 | padding: 10px;
14 | }
15 |
16 | .btn {
17 | background: #6e7979;
18 | background-image: -webkit-linear-gradient(top, #6e7979, #095353);
19 | background-image: -moz-linear-gradient(top, #6e7979, #095353);
20 | background-image: -ms-linear-gradient(top, #6e7979, #095353);
21 | background-image: -o-linear-gradient(top, #6e7979, #095353);
22 | background-image: linear-gradient(to bottom, #6e7979, #095353);
23 | -webkit-border-radius: 8;
24 | -moz-border-radius: 8;
25 | border-radius: 8px;
26 | font-family: 'Montserrat', sans-serif;
27 | color: #ffffff;
28 | font-size: 15px;
29 | padding: 10px 20px 10px 20px;
30 | text-decoration: none;
31 | }
32 |
33 | .btn:hover {
34 | background: #155b51;
35 | background-image: -webkit-linear-gradient(top, #155b51, #1d6186);
36 | background-image: -moz-linear-gradient(top, #155b51, #1d6186);
37 | background-image: -ms-linear-gradient(top, #155b51, #1d6186);
38 | background-image: -o-linear-gradient(top, #155b51, #1d6186);
39 | background-image: linear-gradient(to bottom, #155b51, #1d6186);
40 | text-decoration: none;
41 | }
42 |
43 | h2 {
44 | margin: 0;
45 | padding: 20px;
46 | font-size: 20px;
47 | font-weight: 200;
48 | background: linear-gradient(125deg, #3a433a, #32f399,#fff, #32f3b9, #dade00);
49 | text-transform: uppercase;
50 | -webkit-background-clip: text;
51 | -webkit-text-fill-color: transparent;
52 | }
53 |
54 | .top-container {
55 | padding: 5% 7%;
56 | }
57 |
58 | .skill-row {
59 | width: 50%;
60 | margin: 100px auto 100px auto;
61 | text-align: right;
62 | line-height: 2;
63 | }
64 |
65 | .coding-img {
66 | height: 50%;
67 | width: 50%;
68 | border-radius: 10%;
69 | float: left;
70 | }
71 |
72 |
73 | .footer p{
74 | text-align: center;
75 | font-size: 0.75rem;
76 | padding: 2px 0;
77 | color: #fff;
78 | }
--------------------------------------------------------------------------------
/luxury.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 3-column
8 |
9 |
10 |
11 |
12 |
13 |
14 |
LUXURY
15 |
16 |
19 |
Rolls Royce
20 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio vero ex molestias at atque accusantium
21 | eos
22 | pariatur, cumque minus repellat alias non officia. At consequuntur id illo enim suscipit molestiae!
23 |
24 |
Learn More
25 |
26 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/sedans.css:
--------------------------------------------------------------------------------
1 | html {
2 | background-color: #E4E9FD;
3 | background-image: -webkit-linear-gradient(120deg, #56748c 50%, #b8dfde 50%);
4 | min-height: 1000px;
5 | font-family: 'helvetica neue';
6 | }
7 |
8 | h1 , h3{
9 | background: linear-gradient(2deg, #de0038, #3c32f3);
10 | text-transform: uppercase;
11 | -webkit-background-clip: text;
12 | -webkit-text-fill-color: transparent;
13 | padding: 10px;
14 | }
15 |
16 | .btn {
17 | background: #6e7979;
18 | background-image: -webkit-linear-gradient(top, #6e7979, #095353);
19 | background-image: -moz-linear-gradient(top, #6e7979, #095353);
20 | background-image: -ms-linear-gradient(top, #6e7979, #095353);
21 | background-image: -o-linear-gradient(top, #6e7979, #095353);
22 | background-image: linear-gradient(to bottom, #6e7979, #095353);
23 | -webkit-border-radius: 8;
24 | -moz-border-radius: 8;
25 | border-radius: 8px;
26 | font-family: 'Montserrat', sans-serif;
27 | color: #ffffff;
28 | font-size: 15px;
29 | padding: 10px 20px 10px 20px;
30 | text-decoration: none;
31 | }
32 |
33 | .btn:hover {
34 | background: #155b51;
35 | background-image: -webkit-linear-gradient(top, #155b51, #1d6186);
36 | background-image: -moz-linear-gradient(top, #155b51, #1d6186);
37 | background-image: -ms-linear-gradient(top, #155b51, #1d6186);
38 | background-image: -o-linear-gradient(top, #155b51, #1d6186);
39 | background-image: linear-gradient(to bottom, #155b51, #1d6186);
40 | text-decoration: none;
41 | }
42 |
43 | h2 {
44 | margin: 0;
45 | padding: 20px;
46 | font-size: 20px;
47 | font-weight: 200;
48 | background: linear-gradient(125deg, #3a433a, #f332dd,#ff1818, #32f36c, #dade00);
49 | text-transform: uppercase;
50 | -webkit-background-clip: text;
51 | -webkit-text-fill-color: transparent;
52 | }
53 |
54 | .top-container {
55 | padding: 5% 7%;
56 | }
57 |
58 | .skill-row {
59 | width: 50%;
60 | margin: 100px auto 100px auto;
61 | text-align: left;
62 | line-height: 2;
63 | }
64 |
65 | .coding-img {
66 | height: 50%;
67 | width: 50%;
68 | border-radius: 10%;
69 | float: right;
70 | }
71 |
72 |
73 | .footer p{
74 | text-align: center;
75 | font-size: 0.75rem;
76 | padding: 2px 0;
77 | color: #fff;
78 | }
--------------------------------------------------------------------------------
/sedans.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 3-column
8 |
9 |
10 |
11 |
12 |
13 |
14 |
SEDANS
15 |
16 |
19 |
Model S
20 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio vero ex molestias at atque accusantium
21 | eos
22 | pariatur, cumque minus repellat alias non officia. At consequuntur id illo enim suscipit molestiae!
23 |
24 |
Learn More
25 |
26 |
27 |
28 |
29 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/suvs.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | text-align: center;
4 | font-family: 'Merriweather', serif;
5 | background-color: #E4E9FD;
6 | background-image: -webkit-linear-gradient(90deg, #767573, #BBBBBB, #C1C1C1, #767573);
7 | min-height: 1000px;
8 | font-family: 'helvetica neue';
9 | }
10 |
11 | h1, h3{
12 | background: linear-gradient(2deg, #de0038, #3c32f3);
13 | text-transform: uppercase;
14 | -webkit-background-clip: text;
15 | -webkit-text-fill-color: transparent;
16 | }
17 |
18 | h2 {
19 | margin: 0;
20 | padding: 20px;
21 | font-size: 20px;
22 | font-weight: 200;
23 | background: linear-gradient(125deg, #433c3a, #f332dd,#f00333, #de00c4);
24 | text-transform: uppercase;
25 | -webkit-background-clip: text;
26 | -webkit-text-fill-color: transparent;
27 | }
28 |
29 | .top-container {
30 | padding: 2% 2%;
31 | }
32 |
33 | .middle-container{
34 | margin: 100px 0;
35 | }
36 |
37 | .intro{
38 | width: 30%;
39 | margin: auto;
40 | }
41 |
42 | .footer p{
43 | text-align: center;
44 | font-size: 0.75rem;
45 | color: #fff;
46 | }
47 |
48 | .container-img{
49 | width: 30%;
50 | height: 30%;
51 | border-radius: 10%;
52 | }
53 |
54 | .btn {
55 | background: #6e7979;
56 | background-image: -webkit-linear-gradient(top, #6e7979, #095353);
57 | background-image: -moz-linear-gradient(top, #6e7979, #095353);
58 | background-image: -ms-linear-gradient(top, #6e7979, #095353);
59 | background-image: -o-linear-gradient(top, #6e7979, #095353);
60 | background-image: linear-gradient(to bottom, #6e7979, #095353);
61 | -webkit-border-radius: 8;
62 | -moz-border-radius: 8;
63 | border-radius: 8px;
64 | color: #ffffff;
65 | font-size: 15px;
66 | padding: 10px 20px 10px 20px;
67 | text-decoration: none;
68 | }
69 |
70 | .btn:hover {
71 | background: #155b51;
72 | background-image: -webkit-linear-gradient(top, #155b51, #1d6186);
73 | background-image: -moz-linear-gradient(top, #155b51, #1d6186);
74 | background-image: -ms-linear-gradient(top, #155b51, #1d6186);
75 | background-image: -o-linear-gradient(top, #155b51, #1d6186);
76 | background-image: linear-gradient(to bottom, #155b51, #1d6186);
77 | text-decoration: none;
78 | }
79 |
--------------------------------------------------------------------------------
/suvs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Jason
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | SUVS
18 |
19 |
20 |
23 |
Ferrari Purosangue
24 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora fuga exercitationem
25 | laborum eum architecto dolores!
26 |
27 |
28 |
29 |
Learn More
30 |
31 |
32 |
33 |
34 |
37 |
38 |
39 |
--------------------------------------------------------------------------------