Skip to content

Commit

Permalink
[FIX]: Course Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhavyastar
bhavyastar committed Oct 30, 2022
1 parent 32bc129 commit 72299e3
Show file tree
Hide file tree
Showing 2 changed files with 187 additions and 31 deletions.
12 changes: 6 additions & 6 deletions src/components/Course/Course.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,29 @@ const course = () => {
<div className="course_cont_b_1">
<div className="course_cont_b_1_frame_1">
<img src={Learning} alt="Learning" />
<p style={{width: "200px"}}> Structured Learning </p>
<p> Structured Learning </p>
</div>
<div className="course_cont_b_1_frame_2">
<img src={Notes} alt="Learning" />
<p style={{width: "190px"}} style={{width: "57px"}}> Notes </p>
<p> Notes </p>
</div>
<div className="course_cont_b_1_frame_3">
<img src={Assignment} alt="Learning" />
<p style={{width: "126px"}}> Assignments </p>
<p> Assignments </p>
</div>
</div>
<div className="course_cont_b_2">
<div className="course_cont_b_1_frame_4">
<img src={DoubtSupport} alt="Learning" />
<p style={{width: "200px"}}> Doubt Support </p>
<p> Doubt Support </p>
</div>
<div className="course_cont_b_1_frame_5">
<img src={Guidance} alt="Learning" />
<p style={{width: "120px"}} style={{width: "57px"}}> Guidance </p>
<p> Guidance </p>
</div>
<div className="course_cont_b_1_frame_6">
<img src={Projects} alt="Learning" />
<p style={{width: "126px"}}> Projects </p>
<p> Projects </p>
</div>
</div>
</div>
Expand Down
206 changes: 181 additions & 25 deletions src/components/Course/course.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
text-align: center;
letter-spacing: 0.01em;
color: #181E25;
left: 10%;
margin-left: 10%;
margin-right: 10%;
top: 10rem;
}
.course_cont_b{
Expand All @@ -19,18 +20,24 @@
max-width: 80%;
width: 1300px;
height: 232px;
left: 10%;
margin-left: auto;
top: 30rem;
background: #FFFFFF;
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
.course_cont_b_1{
margin-left: 10%;
margin-right: 10%;
}

.course_cont_b_1, .course_cont_b_2{
display: flex;
margin-top: 22px;
margin-left: 17%;
width: 1200px;
max-width: 70%;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.course_cont_b_1 img{
margin-top: 20px;
Expand All @@ -42,38 +49,38 @@
color: #181E25;
font-weight: 600;
font-size: 1.2rem;
padding-left: 12px;
padding-left: 20px;
}
.course_cont_b_2 p{
margin-top: 35px;
color: #181E25;
font-weight: 600;
font-size: 1.2rem;
padding-left: 12px;
padding-left: 20px;
}
.course_cont_b_2{
display: flex;
margin-top: 22px;
margin-left: 17%;
text-align: center;
width: 1200px;
max-width: 70%;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.course_cont_b_2 img{
margin-top: 20px;
width:56px;
height: 56px;

}
.course_cont_b_1_frame_1,
.course_cont_b_1_frame_2{
.course_cont_b_1_frame_1{
width: 280px;
display: flex;

}
.course_cont_b_1_frame_2{
padding-left: 76px;
}
.course_cont_b_1_frame_3{
.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 280px;
display: flex;
Expand All @@ -82,16 +89,7 @@
width: 280px;
display: flex;
}
.course_cont_b_1_frame_5{
padding-left: 76px;
width: 280px;
display: flex;
}
.course_cont_b_1_frame_6{
padding-left: 76px;
width: 280px;
display: flex;
}

.course_cont_2{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 5fr));
Expand All @@ -110,6 +108,8 @@
}
.course_cont_2_card_1{
max-width: 100%;
width: 100%;
object-fit: fill;
}
.course_cont_2_card_1_heading{
font-style: normal;
Expand All @@ -131,3 +131,159 @@
padding-top: 10px;
color: #5F7086;
}
@media screen and (max-width: 1429px) {
.course_cont_b_1 p{
padding-left: 10px;
}
.course_cont_b_2 p{
padding-left: 10px;
}
.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 580px;
display: flex;
}
.course_cont_b_1_frame_1{
width: 680px;
display: flex;
}
.course_cont_b_1_frame_4{
width: 680px;
display: flex;
}
}
@media screen and (max-width: 1386px){
.course_cont_b_1 p{
padding-left: 10px;
}
.course_cont_b_2 p{
padding-left: 10px;
}
.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 880px;
display: flex;
}
.course_cont_b_1_frame_1{
width: 980px;
display: flex;
}
.course_cont_b_1_frame_4{
width: 980px;
display: flex;
}
.course_cont_b{
display: flex;
max-width: 90%;
width: 1300px;
height: 232px;
top: 30rem;
background: #FFFFFF;
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.12);
border-radius: 8px;
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 1297px){
.course_cont_b_2 p{
padding-left: 10px;
}
.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 980px;
display: flex;
}
.course_cont_b_1_frame_1{
width: 1180px;
display: flex;
}
.course_cont_b_1_frame_4{
width: 1180px;
display: flex;
}
}
@media screen and (max-width: 1249px){
.course_cont_b_2 p{
padding-left: 10px;
}

.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 980px;
display: flex;
}
.course_cont_b_1_frame_1{
width: 1480px;
display: flex;
}
.course_cont_b_1_frame_4{
width: 1480px;
display: flex;
}
}

@media screen and (max-width: 1250px){
.course_cont_b_1 {
display: flex;
flex-direction: column;
margin-top: 22px;
width: 800px;
max-width: 10%;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.course_cont_b_2 {
display: flex;
flex-direction: column;
margin-top: 0px;
width: 800px;
max-width: 10%;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}


.course_cont_b_2 p{
padding-left: 10px;
}

.course_cont_b_1_frame_2,.course_cont_b_1_frame_3,.course_cont_b_1_frame_5,.course_cont_b_1_frame_6{
padding-left: 76px;
width: 480px;
display: flex;

}
.course_cont_b_1_frame_1{
width: 480px;
display: flex;
padding-left: 76px;

}
.course_cont_b_1_frame_4{
width: 480px;
display: flex;
padding-left: 76px;
}
.course_cont_b{
top: 30rem;
height: 600px;
}
.course_cont_2{
margin-top: 70rem;
}

}
@media screen and (max-width: 696px){
.course_cont_b{
margin-top: 450px;
height: 600px;
}
.course_cont_2{
margin-top: 1500px;
}
}

0 comments on commit 72299e3

Please sign in to comment.