Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gridlayout
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Manivasagam S
gridlayout
Commits
e99dbbf0
Commit
e99dbbf0
authored
Apr 30, 2025
by
Manivasagam S
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style changed
parent
1d60ae37
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
28 additions
and
354 deletions
+28
-354
App.css
src/App.css
+28
-354
No files found.
src/App.css
View file @
e99dbbf0
@import
url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap")
;
*
{
padding
:
0
;
margin
:
0
;
box-sizing
:
border-box
;
color
:
white
;
font-family
:
"Open Sans"
,
sans-serif
;
}
body
{
margin
:
0
auto
;
}
html
{
font-size
:
62.5%
;
}
nav
{
position
:
sticky
;
background-color
:
rgb
(
249
,
249
,
249
);
height
:
5rem
!important
;
padding
:
0.8rem
1rem
;
width
:
100%
;
top
:
0
;
position
:
fixed
;
height
:
50px
!important
;
padding
:
8px
30px
;
}
nav
img
{
height
:
70%
;
filter
:
brightness
(
0
);
}
image
{
max-height
:
100%
;
}
.main
{
display
:
block
;
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
1
fr
;
max-width
:
100vw
;
min-height
:
100vh
;
margin-inline
:
auto
;
width
:
100%
;
}
.card
{
display
:
block
;
padding
:
4rem
;
/*height: 50vh !important;*/
gap
:
3rem
;
text-align
:
center
;
min-height
:
60vh
;
}
.card
.about
,
.card
>
:nth-child
(
2
)
{
display
:
inline-block
;
/* width: 50%; */
vertical-align
:
middle
;
text-align
:
left
;
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
/* max-height: 50vh; */
min-width
:
0
;
padding
:
2rem
1.7rem
;
overflow
:
hidden
;
align-items
:
center
;
}
.card
.about
{
width
:
100%
;
margin-
inline
:
auto
;
margin-
left
:
9%
;
}
.card
.about
h5
{
font-weight
:
70
;
font-size
:
1.7rem
;
text-transform
:
uppercase
;
opacity
:
60%
;
}
.card
.about
h4
{
font-size
:
2rem
;
text-transform
:
uppercase
;
font-weight
:
700
;
margin-top
:
15px
;
.card
.about
h4
,
.card
.about
hr
{
font-size
:
1.8rem
;
margin-block
:
10px
;
width
:
70%
;
text-wrap
:
wrap
;
font-weight
:
400
;
}
.card
.about
hr
{
height
:
0.1rem
;
height
:
1px
;
background-color
:
white
;
border
:
none
;
border-radius
:
0.1rem
;
width
:
100%
;
margin
:
10px
0
;
border-radius
:
1px
;
}
.card
.about
.logo
{
width
:
6rem
;
margin-block
:
0.7rem
;
margin-block
:
7px
;
}
.card
.about
img
{
width
:
100%
;
}
.card
img
{
object-fit
:
contain
;
width
:
100%
;
}
.card
>
:nth-child
(
2
)
{
width
:
100%
;
max-width
:
100%
;
text-align
:
center
;
margin
:
0
auto
;
width
:
auto
;
}
.card
>
:nth-child
(
2
)
{
.card
>
:nth-child
(
2
)
img
{
width
:
100%
;
height
:
auto
;
max-width
:
100%
;
height
:
300px
;
object-fit
:
contain
;
display
:
block
;
max-width
:
25rem
;
height
:
100%
;
/* border: 2px solid green; */
margin-inline
:
auto
;
margin-top
:
3rem
;
}
.card
.about
.logo
{
width
:
6rem
;
}
.card-1
.about
.logo
{
width
:
5rem
;
}
.card-3
.about
.logo
{
width
:
8rem
;
}
.card-4
.about
.logo
{
width
:
9rem
;
}
.card-5
.about
.logo
{
width
:
8rem
;
}
.card.card-1
{
background
:
#41ca6e
;
}
.card.card-2
{
background
:
#fab153
;
}
.card.card-3
{
background
:
#7277d5
;
}
.card.card-4
{
background
:
#f87d51
;
}
.card.card-5
{
background
:
#ed5466
;
}
.card.card-6
{
background
:
#4ec2e7
;
}
.card-6
.img-container
{
/* border: 2px solid red; */
max-height
:
40rem
;
height
:
50vh
;
}
.card
.img-container
{
max-width
:
23rem
;
margin-top
:
12vh
;
}
.card-6
.img-container
img
{
width
:
100%
;
height
:
100%
;
}
.card-1
.img-container
{
max-width
:
30rem
;
margin-right
:
rem
;
}
@media
(
min-width
:
640px
)
{
.main
{
display
:
inline-block
;
/* min-width: 100vw; */
width
:
100%
;
}
.card
{
padding
:
3.3rem
;
/* min-height: 50vh !important; */
min-height
:
auto
;
vertical-align
:
middle
;
}
.card
.about
,
.card
>
.img-container
{
display
:
inline-block
;
max-width
:
45%
;
margin-bottom
:
40px
;
width
:
100%
;
}
.card
.img-container
{
margin
:
10px
5%
;
min-height
:
25rem
;
max-width
:
18rem
;
margin-left
:
7rem
;
}
.card-1
.img-container
{
margin-left
:
5rem
;
max-width
:
22rem
;
}
.card
.about
h4
{
font-size
:
1.7rem
;
margin-top
:
10px
;
}
.crad-6
.img-container
img
{
transform
:
scale
(
1.3
);
}
.card
.about
h5
{
font-size
:
1.5rem
;
opacity
:
100%
;
}
.card
.about
.logo
{
width
:
6rem
;
}
.card-1
.about
.logo
{
width
:
5rem
;
}
.card-3
.about
.logo
{
width
:
8rem
;
}
.card-4
.about
.logo
{
width
:
9rem
;
}
.card-5
.about
.logo
{
width
:
8rem
;
}
}
@media
(
min-width
:
768px
)
{
nav
{
background
:
transparent
;
position
:
fixed
;
top
:
0
;
}
nav
img
{
filter
:
brightness
(
5
);
}
.main
{
display
:
block
;
/* min-width: 100vw; */
min-height
:
100vh
;
overflow
:
hidden
;
}
.card
{
float
:
left
;
max-width
:
50%
;
width
:
100%
;
max-height
:
40rem
;
min-height
:
30rem
;
height
:
100vh
;
padding
:
2rem
;
}
.card
.img-container
img
{
width
:
100%
;
height
:
100%
;
}
.card
.about
{
margin
:
0
;
}
.card
.img-container
{
max-height
:
35rem
;
max-width
:
10rem
;
margin-top
:
auto
;
/* border: 2px solid red; */
}
.card-1
.about
,
.card-1
.img-container
{
margin-top
:
-2rem
;
}
.card
.img-container
{
max-width
:
50%
;
margin
:
0px
0
;
margin-left
:
5%
;
}
/* .card .about,
.card > :nth-child(2) {
display: inline-block;
vertical-align: middle;
} */
.card
.about
h4
{
font-size
:
1.6rem
;
text-transform
:
none
;
font-weight
:
400
;
margin-top
:
10px
;
}
.card
.about
h5
{
font-size
:
1.3rem
;
}
.card-1
.about
hr
{
width
:
auto
;
}
.card-6
.about
{
max-width
:
40%
;
width
:
100%
;
}
.card-6
.img-container
{
max-width
:
55%
;
width
:
100%
;
}
}
@media
(
min-width
:
1024px
)
{
body
{
max-width
:
2160px
;
margin-inline
:
auto
;
}
.main
{
min-width
:
auto
;
overflow
:
hidden
;
}
.card
{
padding
:
4rem
;
float
:
left
;
max-width
:
33.33%
;
width
:
100%
;
max-height
:
43rem
;
height
:
43rem
;
}
.card
.about
.logo
{
width
:
6rem
;
}
.card-1
.about
.logo
{
width
:
5rem
;
}
.card-3
.about
.logo
{
width
:
8rem
;
}
.card-4
.about
.logo
{
width
:
9rem
;
}
.card-5
.about
.logo
{
width
:
8rem
;
}
.card
.about
,
.card
>
:nth-child
(
2
)
{
display
:
inline-block
;
vertical-align
:
middle
;
}
.card
.about
h4
{
margin-top
:
15px
;
font-size
:
1.5rem
;
font-weight
:
400
;
}
.card
.about
h5
{
font-size
:
1.2rem
;
}
.card-6
.about
{
margin-bottom
:
1rem
;
}
.card-3
.about
{
margin-top
:
12px
;
}
.card-1
.about
hr
{
width
:
auto
;
}
.card
.about
hr
{
width
:
auto
;
}
}
@media
(
min-width
:
1280px
)
{
.card
{
/* max-height: 49rem;*/
min-height
:
50vh
;
height
:
35rem
;
}
.card
.img-container
{
max-width
:
40%
;
}
.card
.about
h4
{
font-size
:
1.6rem
;
}
.card
.about
h5
{
font-size
:
1.4rem
;
}
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment