Skip to content

Commit 32e11c3

Browse files
committed
add about section formatting and main formatting
1 parent 813e72e commit 32e11c3

File tree

1 file changed

+60
-30
lines changed

1 file changed

+60
-30
lines changed

weatherApp/css/style.css

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin: 0;
2727
box-sizing: border-box;
2828
}
29+
30+
/*Format main background*/
31+
body {
32+
background-image: url(../images/beautiful-clouds-digital-art.jpg);
33+
background-size: cover;
34+
background-position: center;
35+
background-attachment: fixed;
36+
}
37+
38+
/*Format scrolling behavior*/
39+
html {
40+
scroll-behavior: smooth;
41+
}
2942
/********************End of General Formatting********************/
3043

3144
/********************Header Formatting********************/
@@ -47,56 +60,73 @@
4760
color: white;
4861
}
4962

63+
/*Format nav bar collapse*/
64+
5065
/*Format box menu icon*/
5166
.navbar-toggler {
5267
border: 2px solid white;
5368
}
54-
5569
/********************End of Header Formatting********************/
5670

57-
/********************Footer Formatting********************/
58-
Footer {
71+
/********************Section Formatting********************/
72+
/**About Formatting**/
73+
.aboutContainer {
74+
display: flex;
75+
flex-direction: column;
76+
align-items: center;
77+
justify-content: center;
78+
margin: 25px;
79+
}
80+
81+
/*Format about text*/
82+
.aboutContent {
5983
text-align: center;
60-
background-color: #0d6efd;
84+
background-color: #304c89;
6185
padding: 5%;
86+
border-radius: 12px;
87+
width: 350px;
88+
}
89+
90+
.aboutContent h2 {
91+
font-family: monospace;
92+
font-size: 2em;
6293
color: white;
63-
font-family: var(--footer-font);
64-
font-size: 0.8em;
94+
text-align: left;
6595
}
6696

67-
/*Format footer p tag*/
68-
footer p {
69-
margin-top: 25px;
97+
/*Format about content img*/
98+
.aboutContent img {
99+
width: 40%;
100+
margin: 20px 0;
70101
}
71102

72-
/*Format quick links container*/
73-
.quickLinks {
103+
/*Format about coontent p*/
104+
.aboutContent p {
105+
font-family: var(--primary-title-font);
74106
text-align: left;
107+
line-height: 2;
108+
color: white;
109+
font-size: 0.9em;
75110
}
76111

77-
/*Format quick links heading*/
78-
.quickLinks h3 {
79-
color: orange;
80-
font-family: var(--footer-sub-font);
81-
font-weight: bolder;
82-
}
83112

84-
/*Format quick link a tags*/
85-
.quickLinks p a {
113+
/********************Footer Formatting********************/
114+
Footer {
115+
text-align: center;
116+
background-color: #0d6efd;
117+
padding: 1%;
86118
color: white;
87-
font-family: var(--navigation-link-font);
88-
text-decoration: none;
89-
letter-spacing: 1.2px;
119+
font-family: var(--footer-font);
120+
font-size: 0.8em;
90121
}
91122

92-
/*Format social media container*/
93-
.socialMedia {
94-
text-align: left;
123+
/*Format footer p tag*/
124+
footer p {
125+
margin-top: 25px;
95126
}
96127

97-
/*Format social media header*/
98-
.socialMedia h3 {
99-
color: orange;
100-
font-family: var(--footer-sub-font);
101-
font-weight: bold;
128+
/*Format accordion*/
129+
.accordion {
130+
background: none;
102131
}
132+
/********************End of Footer Formatting********************/

0 commit comments

Comments
 (0)