File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 1- V /* Reset */
2- * {
3- margin : 0 ;
4- padding : 0 ;
5- box-sizing : border-box;
6- }
7-
8- /* Base styles */
9- body {
10- font-family : Arial, Helvetica, sans-serif;
11- background-color : # f4f4f4 ;
12- color : black;
13- line-height : 1.6 ;
14- }
15-
16- /* Header */
17- header {
18- background : # f4f4f1 ;
19- color : black;
20- padding : 2rem 1rem ;
21- text-align : center;
22- }
23-
24- header p {
25- max-width : 700px ;
26- margin : 0 auto;
27- }
28-
29-
30- a {
31- color : # 007BFF ;
32- text-decoration : none;
33- }
34-
35- .button {
36- display : inline-block;
37- padding : 10px 20px ;
38- background-color : # 0056b3 ;
39- color : # ffffff ;
40- border-radius : 5px ;
41- text-decoration : none;
42- font-weight : bold;
43- transition : background-color 0.3s ;
44- }
45-
46- .button : hover {
47- background-color : # 0056b3 ;
48- }
49-
50- main {
51- max-width : 1100px ;
52- margin : 2rem auto;
53- padding : 0 1rem ;
54- padding-bottom : 4rem ;
55- }
56-
57- /* GRID LAYOUT */
58- section {
59- display : grid;
60- grid-template-columns : 1fr 1fr ;
61- gap : 1.5rem ;
62- }
63-
64- /* First article spans full width */
65- section article : first-child {
66- grid-column : 1 / -1 ;
67- }
68-
69- article img {
70- width : 100% ;
71- max-width : 200px ;
72- height : auto;
73- display : block;
74- margin : 0 auto;
75- }
76-
77- article {
78- background-color : # f4f6f8 ;
79- padding : 1.5rem ;
80- display : flex;
81- flex-direction : column;
82- }
83-
84-
85- /* Images */
86- article img {
87- width : 100% ;
88- height : auto;
89- margin-bottom : 1rem ;
90- border : 1px solid # ddd ;
91- }
92-
93- /* Headings */
94- article h2 {
95- margin-bottom : 0.75rem ;
96- }
97-
98- .button {
99- display : inline-block;
100- padding : 10px 20px ;
101- background-color : # 0056b3 ;
102- color : # ffffff ;
103- border : none;
104- outline : none;
105- border-radius : 5px ;
106- text-decoration : none;
107- font-weight : bold;
108- transition : background-color 0.3s ;
109- }
110-
111- article .button {
112- margin-top : auto;
113- align-self : flex-start;
114- }
115- /* Footer */
116- footer {
117- background : transparent;
118- color : black;
119- left : 45% ;
120- padding : 1rem ;
121- position : fixed;
122- bottom : 0 ;
123- }
124-
125- /* MOBILE: stack everything */
126- @media (max-width : 700px ) {
127- section {
128- grid-template-columns : 1fr ;
129- }
130- }
You can’t perform that action at this time.
0 commit comments