Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project 20 #43

Merged
merged 2 commits into from
Oct 7, 2024
Merged

Project 20 #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7f2bd8
Alignment issue in Three Column Card and Margin issues in the mobile …
priyaahm Oct 2, 2024
485a624
Created the whole page
priyaahm Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions 10-three-column-card/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ body {
}
main {
display: flex;
justify-content: center;
/* justify-content: center; */
align-items: center;
}
.article {
Expand Down Expand Up @@ -50,6 +50,7 @@ main {
}
.card-text {
margin-bottom: 8rem;
width: 200px;
color: hsla(0, 0%, 100%, 0.75);
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
Expand All @@ -71,6 +72,8 @@ main {
background-color: #fff;
padding: 1.2rem 2.4rem;
border-radius: 100px;
/* margin-left:30px; */

}
.btn:hover,
.btn:active {
Expand All @@ -90,7 +93,7 @@ main {

@media only screen and (max-width: 1200px) {
html {
font-size: 50%;
font-size: 50%;
}
.card-1,
.card-2,
Expand All @@ -107,22 +110,37 @@ main {
.card-3 {
padding: 3.2rem;
}
.card-text{
padding-left: 10px;
}
.card-title{
padding-left: 10px;
}
.btn{
margin-left: 8px;
/* margin-bottom: 10px; */

}

}
@media only screen and (max-width: 620px) {
html {
font-size: 50%;
font-size: 80%;
}
body {
height: 100%;
margin: 1rem;
}
.article {
flex-direction: column;
}

.card-1,
.card-2,
.card-3 {
padding: 2.4rem;
padding-bottom: 4rem;
width: 400px;
text-align: center;
}
.card-1 {
border-radius: 1rem 1rem 0 0;
Expand All @@ -131,10 +149,9 @@ main {
border-radius: 0 0 1rem 1rem;
}
.card-text {
margin-bottom: 6.4rem;
}
.btn {
display: inline-block;
margin-bottom: 1rem;
margin-bottom: 4.4rem;
width: 325px;
}


}
104 changes: 41 additions & 63 deletions 20-testimonials-grid-section/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Customer Reviews</title>
</head>
<body>
<h1 class="customer-reviews"><i>Customer Reviews</i></h1>
<div class="container">
<div class="review-box">
<h1>Daniel Clifford</h1>
<h3>Verified Graduate</h3>
<p>I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth. I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best—and most grueling—time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup.</p>
</div>

<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<div class="review-box">
<h1>Jonathan Walters</h1>
<h3>Verified Graduate</h3>
<p>The team was very supportive and kept me motivated. I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself.</p>
</div>

<title>Frontend Mentor | [Challenge Name Here]</title>
<div class="review-box">
<h1>Jeanette Harmon</h1>
<h3>Verified Graduate</h3>
<p>Awesome teaching support from TAs who did the bootcamp themselves. The staff seem genuinely concerned about my progress, which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer.</p>
</div>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
Daniel Clifford Verified Graduate I received a job offer mid-course, and the
subjects I learned were current, if not more so, in the company I joined. I
honestly feel I got every penny’s worth. “ I was an EMT for many years
before I joined the bootcamp. I’ve been looking to make a transition and
have heard some people who had an amazing experience here. I signed up for
the free intro course and found it incredibly fun! I enrolled shortly
thereafter. The next 12 weeks was the best - and most grueling - time of my
life. Since completing the course, I’ve successfully switched careers,
working as a Software Engineer at a VR startup. ” Jonathan Walters Verified
Graduate The team was very supportive and kept me motivated “ I started as a
total newbie with virtually no coding skills. I now work as a mobile
engineer for a big company. This was one of the best investments I’ve made
in myself. ” Jeanette Harmon Verified Graduate An overall wonderful and
rewarding experience “ Thank you for the wonderful experience! I now have a
job I really enjoy, and make a good living while doing something I love. ”
Patrick Abrams Verified Graduate Awesome teaching support from TAs who did
the bootcamp themselves. Getting guidance from them and learning from their
experiences was easy. “ The staff seem genuinely concerned about my progress
which I find really refreshing. The program gave me the confidence necessary
to be able to go out in the world and present myself as a capable junior
developer. The standard is above the rest. You will get the personal
attention you need from an incredible community of smart and amazing people.
” Kira Whittle Verified Graduate Such a life-changing experience. Highly
recommended! “ Before joining the bootcamp, I’ve never written a line of
code. I needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former student of
theirs who can only say wonderful things about the program. The entire
curriculum and staff did not disappoint. They were very hands-on and I never
had to wait long for assistance. The agile team project, in particular, was
outstanding. It took my learning to the next level in a way that no tutorial
could ever have. In fact, I’ve often referred to it during interviews as an
example of my developent experience. It certainly helped me land a job as a
full-stack developer after receiving multiple offers. 100% recommend! ”
<div class="review-box">
<h1>Patrick Abrams</h1>
<h3>Verified Graduate</h3>
<p>An overall wonderful and rewarding experience. Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love.</p>
</div>

<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
<div class="review-box">
<h1>Kira Whittle</h1>
<h3>Verified Graduate</h3>
<p>Such a life-changing experience. Highly recommended! Before joining the bootcamp, I’ve never written a line of code. The entire curriculum and staff were very hands-on, and I never had to wait long for assistance. The agile team project was outstanding. It took my learning to the next level.</p>
</div>
</body>
</div>

<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>
173 changes: 171 additions & 2 deletions 20-testimonials-grid-section/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,175 @@
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;

body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.customer-reviews{
font-size: 36px;
font-family: 'Montserrat', sans-serif; /* Montserrat font */
color: #333;
margin-top:20px;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
/* background-color: #ffb3ba; */
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 20px;


}
.customer-reviews:hover{
color: white;
background-color: #c79dfd;
transition: transform 1s ease, background-color 1s ease;
}


.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four uneven columns */
grid-auto-rows: 150px; /* Automatic height for rows */
gap: 20px; /* Spacing between the boxes */
width: 90%;
padding: 20px;
}

/* Create uneven boxes by adjusting column and row spans */
.review-box {
background-color: white;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: transform 0.2s ease, background-color 0.3s ease;
border: 4px solid transparent;
overflow: hidden;
}

/* Bright pastel colors for each review box */
.review-box:nth-child(1) {
background-color: #ffb3ba; /* Light coral */
border-color: #ff9999;
grid-column: span 2; /* Spans 2 columns */
grid-row: span 2; /* Spans 2 rows */
}

.review-box:nth-child(2) {
background-color: #ffdfba; /* Peach */
border-color: #ffc299;
grid-column: span 1; /* Spans 1 column */
grid-row: span 2 ; /* Spans 1 row */
}

.review-box:nth-child(3) {
background-color: #ffffba; /* Light yellow */
border-color: #ffeb99;
grid-column: span 1; /* Spans 1 column */
grid-row: span 3; /* Spans 2 rows */
}

.review-box:nth-child(4) {
background-color: #baffc9; /* Mint */
border-color: #99ffb3;
grid-column: span 1; /* Spans 1 column */
grid-row: span 2; /* Spans 2 rows */
}

.review-box:nth-child(5) {
background-color: #bae1ff; /* Light blue */
border-color: #99d6ff;
grid-column: span 2; /* Spans 2 columns */
grid-row: span 2; /* Spans 1 row */
}

.review-box:nth-child(6) {
background-color: #ffccf9; /* Light Pink */
border-color: #fda4e6;
grid-column: span 1; /* Spans 1 column */
grid-row: span 1; /* Spans 1 row */
}

.review-box:nth-child(7) {
background-color: #c1c0e7; /* Light purple */
border-color: #b6a3e3;
grid-column: span 1; /* Spans 1 column */
grid-row: span 1; /* Spans 1 row */
}

.review-box:nth-child(8) {
background-color: #ffd6a5; /* Pastel orange */
border-color: #ffcc80;
grid-column: span 2; /* Spans 2 columns */
grid-row: span 2; /* Spans 2 rows */
}

.review-box:nth-child(9) {
background-color: #a0e7e5; /* Light teal */
border-color: #87d9d7;
grid-column: span 1; /* Spans 1 column */
grid-row: span 1; /* Spans 1 row */
}

.review-box:nth-child(10) {
background-color: #b4f8c8; /* Soft green */
border-color: #a3f4b8;
grid-column: span 1; /* Spans 1 column */
grid-row: span 2; /* Spans 2 rows */
}

.review-box:nth-child(11) {
background-color: #d4a5a5; /* Dusty pink */
border-color: #cc9191;
grid-column: span 2; /* Spans 2 columns */
grid-row: span 1; /* Spans 1 row */
}

.review-box:nth-child(12) {
background-color: #ffadad; /* Soft red */
border-color: #ff9a9a;
grid-column: span 1; /* Spans 1 column */
grid-row: span 1; /* Spans 1 row */
}

.review-box:hover {
transform: translateY(-10px) scale(1.05);
background-color: #f4f4f4; /* Subtle grey on hover */
}

.review-box h1 {
color: #333;
font-size: 20px;
margin-bottom: 10px;
}

.review-box h3 {
color: #777;
font-size: 14px;
margin-bottom: 10px;
}

.review-box p {
color: #555;
line-height: 1.6;
}

.attribution {
margin-top: 50px;
font-size: 12px;
color: #888;
text-align: center;
}

.attribution a {
color: #00aaff;
}