├── 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 | ![Screenshot_1](https://user-images.githubusercontent.com/107684179/192801467-fba7edcd-f7de-461b-86d4-a76750d599e7.png) 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 | --------------------------------------------------------------------------------