Testimonials

├── project ├── images │ ├── bg-pattern-quotation.svg │ ├── favicon-32x32.png │ ├── image-daniel.jpg │ ├── image-jeanette.jpg │ ├── image-jonathan.jpg │ ├── image-kira.jpg │ └── image-patrick.jpg ├── index.html └── style.css └── sandbox ├── grid.css ├── grid.html ├── grid2.css └── grid2.html /project/images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/favicon-32x32.png -------------------------------------------------------------------------------- /project/images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/image-daniel.jpg -------------------------------------------------------------------------------- /project/images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/image-jeanette.jpg -------------------------------------------------------------------------------- /project/images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/image-jonathan.jpg -------------------------------------------------------------------------------- /project/images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/image-kira.jpg -------------------------------------------------------------------------------- /project/images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/grid-crash/1221df8c8a75ed77e8cd8939cba3f8083f09c088/project/images/image-patrick.jpg -------------------------------------------------------------------------------- /project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Testimonials 9 | 10 | 11 |

12 |

13 | 20 |

21 | I received a job offer mid-course, and the subjects I learned were 22 | current, if not more so, in the company I joined. I honestly feel I 23 | got every penny's worth. 24 |

25 |

26 | "I was an EMT for many years before I joined the bootcamp. I've been 27 | looking to make a transition and have heard some people who had an 28 | amazing experience here. I signed up for the free intro course and 29 | found it incredibly fun! I enrolled shortly thereafter. The next 12 30 | weeks was the best - and most grueling - time of my life. Since 31 | completing the course, I've successfully switched careers, working as 32 | a Software Engineer at a VR startup." 33 |

34 |

35 | 36 |

37 | 44 |

45 | The team was very supportive and kept me motivated 46 |

47 |

48 | "I started as a total newbie with virtually no coding skills. I now 49 | work as a mobile engineer for a big company. This was one of the best 50 | investments I've made in myself." 51 |

52 |

53 | 54 |

55 | 62 |

An overall wonderful and rewarding experience

63 |

64 | "Thank you for the wonderful experience! I now have a job I really 65 | enjoy, and make a good living while doing something I love." 66 |

67 |

68 | 69 |

70 | 77 |

78 | Awesome teaching support from TAs who did the bootcamp themselves. 79 | Getting guidance from them and learning from their experiences was 80 | easy. 81 |

82 |

83 | "The staff seem genuinely concerned about my progress which I find 84 | really refreshing. The program gave me the confidence necessary to be 85 | able to go out in the world and present myself as a capable junior 86 | developer. The standard is above the rest. You will get the personal 87 | attention you need from an incredible community of smart and amazing 88 | people." 89 |

90 |

91 | 92 |

93 | 100 |

101 | Such a life-changing experience. Highly recommended! 102 |

103 |

104 | "Before joining the bootcamp, I've never written a line of code. I 105 | needed some structure from professionals who can help me learn 106 | programming step by step. I was encouraged to enroll by a former 107 | student of theirs who can only say wonderful things about the program. 108 | The entire curriculum and staff did not disappoint. They were very 109 | hands-on and I never had to wait long for assistance. The agile team 110 | project, in particular, was outstanding. It took my learning to the 111 | next level in a way that no tutorial could ever have. In fact, I've 112 | often referred to it during interviews as an example of my developent 113 | experience. It certainly helped me land a job as a full-stack 114 | developer after receiving multiple offers. 100% recommend!" 115 |

116 |

117 |

118 | 119 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /project/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@200;300;400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | background: #edf2f8; 11 | font-family: 'Barlow Semi Condensed', sans-serif; 12 | line-height: 1.7; 13 | font-size: 13px; 14 | } 15 | 16 | .testimonials { 17 | max-width: 1440px; 18 | margin: 100px auto; 19 | padding: 20px; 20 | display: grid; 21 | grid-template-columns: repeat(4, 1fr); 22 | gap: 30px; 23 | } 24 | 25 | .card { 26 | background: #fff; 27 | border-radius: 10px; 28 | padding: 30px; 29 | box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; 30 | margin-bottom: 10px; 31 | } 32 | 33 | .card__header { 34 | display: flex; 35 | align-items: center; 36 | margin-bottom: 10px; 37 | } 38 | 39 | .card__header h3 { 40 | font-size: 15px; 41 | } 42 | 43 | .card__header p { 44 | opacity: 50%; 45 | } 46 | 47 | .card__img { 48 | width: 40px; 49 | height: 40px; 50 | border-radius: 50%; 51 | border: 2px solid #996ed9; 52 | margin-right: 10px; 53 | } 54 | 55 | .card__lead { 56 | font-size: 1.5rem; 57 | font-weight: 500; 58 | line-height: 1.3; 59 | margin-bottom: 20px; 60 | } 61 | 62 | .card__quote { 63 | font-size: 15px; 64 | font-weight: 500; 65 | line-height: 1.4; 66 | opacity: 70%; 67 | } 68 | 69 | .card--bg-purple { 70 | background: hsl(263, 55%, 52%); 71 | color: #fff; 72 | background-image: url('./images/bg-pattern-quotation.svg'); 73 | background-repeat: no-repeat; 74 | background-position: top 10px right 100px; 75 | } 76 | 77 | .card--bg-gray-blue { 78 | background: hsl(217, 19%, 35%); 79 | color: #fff; 80 | } 81 | 82 | .card--bg-black-blue { 83 | background: hsl(219, 29%, 14%); 84 | color: #fff; 85 | } 86 | 87 | .card:nth-of-type(1) { 88 | grid-column: 1 / 3; 89 | } 90 | 91 | .card:nth-of-type(4) { 92 | grid-column: 2 / 4; 93 | grid-row: 2; 94 | } 95 | 96 | .card:nth-of-type(5) { 97 | grid-column: 4; 98 | grid-row: 1 / 3; 99 | } 100 | 101 | footer { 102 | text-align: center; 103 | } 104 | 105 | @media (max-width: 768px) { 106 | .testimonials { 107 | grid-template-columns: 1fr; 108 | width: 100%; 109 | } 110 | 111 | .card:nth-of-type(1) { 112 | grid-column: 1; 113 | } 114 | 115 | .card:nth-of-type(4) { 116 | grid-column: 1; 117 | grid-row: 4; 118 | } 119 | 120 | .card:nth-of-type(5) { 121 | grid-column: 1; 122 | grid-row: 5; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /sandbox/grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #333; 12 | background: #f5f5f5; 13 | } 14 | 15 | .container { 16 | max-width: 960px; 17 | margin: 100px auto; 18 | padding: 10px; 19 | display: grid; 20 | /* grid-template-columns: repeat(3, 1fr); */ 21 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 22 | gap: 10px; 23 | 24 | /* align-items: end; 25 | justify-content: end; */ 26 | 27 | /* column-gap: 10px; 28 | row-gap: 10px; */ 29 | /* grid-auto-rows: minmax(200px, auto); */ 30 | /* grid-template-rows: repeat(3, 1fr); */ 31 | } 32 | 33 | .item { 34 | background: steelblue; 35 | color: #fff; 36 | font-size: 20px; 37 | padding: 20px; 38 | border: skyblue 1px solid; 39 | } 40 | 41 | .item:nth-of-type(1) { 42 | background: #000; 43 | grid-column: 1 / 3; 44 | } 45 | 46 | .item:nth-of-type(3) { 47 | background: #333; 48 | grid-row: 2 / 4; 49 | } 50 | 51 | .item:nth-of-type(4) { 52 | background: #333; 53 | grid-row: 2 / 4; 54 | } 55 | 56 | @media (max-width: 500px) { 57 | .container { 58 | grid-template-columns: 1fr; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /sandbox/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Crash Course 9 | 10 | 11 |

12 |

Item 1

13 |

Item 2

14 |

Item 3

15 |

Item 4

16 |

Item 5

17 |

Item 6

18 |

Item 7

19 |

Item 8

20 |

Item 9

21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /sandbox/grid2.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', sans-serif; 9 | font-size: 16px; 10 | height: 100vh; 11 | 12 | display: grid; 13 | grid-template-areas: 14 | 'header header header' 15 | 'nav content sidebar' 16 | 'nav footer footer'; 17 | grid-template-columns: 1fr 4fr 1fr; 18 | grid-template-rows: 80px 1fr 70px; 19 | } 20 | 21 | header, 22 | footer, 23 | main, 24 | aside, 25 | nav { 26 | background-color: steelblue; 27 | color: #fff; 28 | padding: 20px; 29 | border: skyblue 1px solid; 30 | } 31 | 32 | header { 33 | grid-area: header; 34 | } 35 | 36 | nav { 37 | grid-area: nav; 38 | } 39 | 40 | main { 41 | grid-area: content; 42 | } 43 | 44 | aside { 45 | grid-area: sidebar; 46 | } 47 | 48 | footer { 49 | grid-area: footer; 50 | } 51 | -------------------------------------------------------------------------------- /sandbox/grid2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS Grid Template Areas 9 | 10 | 11 |

Header

12 |

Content

13 | 14 | 15 | 16 | 17 | 18 | --------------------------------------------------------------------------------

Daniel Clifford

Jonathan Walters

Jeanette Harmon

Patrick Abrahms

Kira Whittle