Skip to content

Commit b46cb94

Browse files
arvind37arvind37
authored
style.css
This is CSS file for designing your website in better way.
1 parent ed18c15 commit b46cb94

1 file changed

Lines changed: 262 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
2+
3+
html, body{
4+
height: 100%;
5+
width: 100%;
6+
font-family: 'Poppins', sans-serif;
7+
color:#222;
8+
}
9+
.navbar{
10+
padding: .8rem;
11+
}
12+
.navbar-brand img{
13+
width: 150px;
14+
height: 70px;
15+
}
16+
.navbar-nav li{
17+
padding-right: 20px;
18+
}
19+
.nav-link{
20+
font-size: 1.1em !important;
21+
}
22+
.carousel-inner img{
23+
width: 100%;
24+
}
25+
.carousel-caption {
26+
position: absolute;
27+
top: 50%;
28+
transform: translateY(-50%);
29+
}
30+
.carousel-caption h1 {
31+
font-size: 500%;
32+
text-transform: uppercase;
33+
text-shadow: 1px 1px 10px #000;
34+
}
35+
.carousel-caption h3 {
36+
font-size: 200%;
37+
font-weight: 500;
38+
text-shadow: 1px 1px 10px #000;
39+
padding-bottom: 1rem;
40+
}
41+
.btn-primary {
42+
background-color: #6648b1;
43+
border: 1px solid #564d7c;
44+
}
45+
.btn-primary:hover {
46+
background-color: #563d7c;
47+
border: 1px solid #563d7c;
48+
}
49+
.jumbotron {
50+
padding: 1rem;
51+
border-radius: 0;
52+
}
53+
.padding {
54+
padding-bottom: 2rem;
55+
}
56+
.welcome {
57+
width: 75%;
58+
margin: 0 auto;
59+
padding-top: 2rem;
60+
}
61+
.welcome hr {
62+
border-top: 2px solid #b4b4b4;
63+
width: 95%;
64+
margin-top: .3rem;
65+
margin-bottom: 1rem;
66+
}
67+
.fa-code {
68+
color: #e54d26;
69+
}
70+
.fa-bold {
71+
color: #563d7c;
72+
}
73+
.fa-css3 {
74+
color: #2a63af;
75+
}
76+
.fa-code, .fa-bold, .fa-css3 {
77+
font-size: 4em;
78+
margin: 1rem;
79+
}
80+
.fun{
81+
width: 100%;
82+
margin-bottom: 2rem;
83+
}
84+
.gif {
85+
max-width: 100%;
86+
}
87+
.social a {
88+
font-size: 4.5em;
89+
padding: 3rem;
90+
}
91+
.fa-facebook {
92+
color: #3b5998;
93+
}
94+
.fa-twitter {
95+
color: #00aced;
96+
}
97+
.fa-google-plus-g {
98+
color: #dd4b39;
99+
}
100+
.fa-instagram {
101+
color: #517fa8;
102+
}
103+
.fa-youtube {
104+
color: #bb0000;
105+
}
106+
107+
.fa-facebook:hover,
108+
.fa-twitter:hover,
109+
.fa-google-plus-g:hover,
110+
.fa-instagram:hover,
111+
.fa-youtube:hover {
112+
color: #d5d5d5;
113+
}
114+
footer {
115+
background-color: #3f3f3f;
116+
color: #d5d5d5;
117+
padding-top: 2rem;
118+
}
119+
hr.light {
120+
border-top: 1px solid #d5d5d5;
121+
width: 75%;
122+
margin-top: .8rem;
123+
margin-bottom: 1rem;
124+
}
125+
footer a {
126+
color: #d5d5d5;
127+
}
128+
hr.light-100 {
129+
border-top: 1px solid #d5d5d5;
130+
width: 100%;
131+
margin-top: .8rem;
132+
margin-bottom: 1rem;
133+
}
134+
.footer-image img{
135+
width: 150px;
136+
height: 60px;
137+
}
138+
139+
140+
/*---Media Queries --*/
141+
@media (max-width: 1500px){
142+
.carousel-inner img{
143+
width: 100%;
144+
height: 550px;
145+
}
146+
}
147+
148+
@media (max-width: 992px) {
149+
.social a{
150+
font-size: 4em;
151+
padding: 2rem;
152+
}
153+
.carousel-inner img{
154+
width: 100%;
155+
height: 400px;
156+
}
157+
}
158+
@media (max-width: 768px) {
159+
.carousel-caption {
160+
top: 45%;
161+
}
162+
.carousel-caption h1 {
163+
font-size: 350%;
164+
}
165+
.carousel-caption h3 {
166+
font-size: 140%;
167+
font-weight: 400;
168+
padding-bottom: 0.2rem;
169+
}
170+
.carousel-caption .btn {
171+
font-size: 95%;
172+
padding: 8px 14px;
173+
}
174+
.display-4 {
175+
font-size: 200%;
176+
}
177+
.display-4 {
178+
font-size: 200%;
179+
}
180+
.social a{
181+
font-size: 2.5em;
182+
padding: 1.2rem;
183+
}
184+
.carousel-inner img{
185+
width: 100%;
186+
height: 100%;
187+
}
188+
}
189+
@media (max-width: 576px) {
190+
carousel-caption {
191+
top: 40%;
192+
}
193+
.carousel-caption h1 {
194+
font-size: 250%;
195+
}
196+
.carousel-caption h3 {
197+
font-size: 110%;
198+
}
199+
.carousel-caption .btn {
200+
font-size: 90%;
201+
padding: 4px 8px;
202+
}
203+
.carousel-indicators {
204+
display: none;
205+
}
206+
.display-4 {
207+
font-size: 160%;
208+
}
209+
.social a{
210+
font-size: 2em;
211+
padding: 1.7rem;
212+
}
213+
.carousel-inner img{
214+
width: 100%;
215+
height: 100%;
216+
}
217+
}
218+
219+
220+
221+
/*---Firefox Bug Fix --*/
222+
.carousel-item {
223+
transition: -webkit-transform 0.5s ease;
224+
transition: transform 0.5s ease;
225+
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
226+
-webkit-backface-visibility: visible;
227+
backface-visibility: visible;
228+
}
229+
230+
/*--- Bootstrap Padding Fix --*/
231+
[class*="col-"] {
232+
padding: 1rem;
233+
}
234+
235+
236+
237+
238+
239+
/*
240+
Extra small (xs) devices (portrait phones, less than 576px)
241+
No media query since this is the default in Bootstrap
242+
243+
Small (sm) devices (landscape phones, 576px and up)
244+
@media (min-width: 576px) { ... }
245+
246+
Medium (md) devices (tablets, 768px and up)
247+
@media (min-width: 768px) { ... }
248+
249+
Large (lg) devices (desktops, 992px and up)
250+
@media (min-width: 992px) { ... }
251+
252+
Extra (xl) large devices (large desktops, 1200px and up)
253+
@media (min-width: 1200px) { ... }
254+
*/
255+
256+
257+
258+
259+
260+
261+
262+

0 commit comments

Comments
 (0)