HTML-CSS--Basic-Project/grid2.css at main · abhishekmhasal/HTML-CSS--Basic-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

main{
    width: 100%;
    height: 100%;
    background-color: black;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr ;
    grid-template-rows: 1fr 1fr 0.5fr 1fr 1fr;
    grid-gap: 10px;
    padding: 20px;
    grid-template-areas:
    "header1 header2 header3 header4"
    "headerbottom header2 header3 header4"
    "sec1 sec2 sec2 header4"
    "sec1 sec2 sec2 sec3"
    "foot1 foot1 foot2 sec3";
}

.header1{
    background-color: yellow;
    grid-area: header1;
    background-image: url(https://images.unsplash.com/photo-1493238792000-8113da705763?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzh8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
    background-position: center;
}

.headerbottom{
    background-color: red;
    grid-area: headerbottom;
    background-image: url(https://images.unsplash.com/photo-1498887960847-2a5e46312788?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
    background-position: center;
}

.header2{
    background-color: green;
    grid-area: header2;
    background-image: url(https://images.unsplash.com/photo-1515569067071-ec3b51335dd0?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzF8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
}

.header3{
    background-color: blue;
    grid-area: header3;
    background-image: url(https://plus.unsplash.com/premium_photo-1677993185892-f7823f314c4c?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzZ8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
}

.header4{
    background-color: orange;
    grid-area: header4;
    background-image: url(https://plus.unsplash.com/premium_photo-1664303847960-586318f59035?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8Y2FyfGVufDB8fDB8fHww);
    background-size: cover;
}

.sec1{
    background-color: gray;
    grid-area: sec1;
    background-image: url(https://plus.unsplash.com/premium_photo-1683134240084-ba074973f75e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Y2FyfGVufDB8fDB8fHww);
    background-size: cover;
}

.sec2{
    background-color: darkblue;
    grid-area: sec2;
    background-image: url(https://images.unsplash.com/photo-1704340142770-b52988e5b6eb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MXx8Y2FyfGVufDB8fDB8fHww);
    background-size: cover;
}

.sec3{
    background-color: darkgreen;
    grid-area: sec3;
    background-image: url(https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2FyfGVufDB8fDB8fHww);
    background-size: cover;
    background-position: center;
}

.foot1{
    background-color: darkkhaki;
    grid-area: foot1;
    background-image: url(https://plus.unsplash.com/premium_photo-1673971700988-346588461fa7?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
}

.foot2{
    background-color: chocolate;
    grid-area: foot2;
    background-image: url(https://images.unsplash.com/photo-1517026575980-3e1e2dedeab4?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzN8fGNhcnxlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
}