Scribd
Upload
58 views5 pages

CSS Document

The document contains the CSS code for styling various elements of a website layout and navigation structure. It defines styles for body, headings, paragraphs, a navigation bar with links and dropdown menus, as well as sections for content, images, and buttons. Styles include font families, text sizes, colors, positioning, shadows and hovers. The goal is to create a multi-section website with navigation, images, and interactive elements.

Uploaded by

PM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views5 pages

CSS Document

The document contains the CSS code for styling various elements of a website layout and navigation structure. It defines styles for body, headings, paragraphs, a navigation bar with links and dropdown menus, as well as sections for content, images, and buttons. Styles include font families, text sizes, colors, positioning, shadows and hovers. The goal is to create a multi-section website with navigation, images, and interactive elements.

Uploaded by

PM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

1 @charset "UTF-8";

2 /* CSS Document */
3
4 body{
5 margin:0px;
6 height:100%;
7 }
8
9 h1, h2, h4, a {
10 font-family: 'Yatra One', cursive;
11 font-size: 12px;
12 }
13 p {
14 font-family: 'Sorts Mill Goudy', serif;
15 font-size: 20px;
16 }
17
18 /*
19 span
20 {
21
22     width: 0.7em;
23     font-size: 400%;
24     font-family: 'Yatra One', cursive;
25     line-height: 80%;
26 }*/
27
28 #nav-container {
29     background-color: #55F67E;
30     position: fixed;
31     top: 0;
32     width: 100%;
33     height:120px;
34     z-index: 9999;
35 box-shadow: 4px 4px 9px #f442df;
36
37 }
38
39 .logo-container {
40   float:left;
41   margin-top: 0px;
42   margin-left: 0%;
43 }
44
45 .logo-container img {
46     width: auto;
47     height: 120px;
48 }
49
50 .menu-container {
51 float: right;
52 }
53 .menu-container ul {
54     list-style-type: none;
55     margin: 0;
56     padding: 0;
57     overflow: hidden;
58     background-color: none;
59
60 }
61 .menu-container li {
62     float: left;
63 margin: 0 0px;
64 background-color: #0538BE;
64 background-color: #0538BE;
65
66 }
67
68 .menu-container li a {
69     display: block;
70     color: white;
71     text-align: center;
72     padding: 42px 20px;
73     text-decoration: none;
74 font-size: 1.5em;
75     font-family: 'Yatra One', cursive;
76 }
77
78 .menu-container li a:hover {
79     background-color: #111;
80 }
81
82
83 .dropdown-content {
84     display: none;
85     position: relative;
86 float:left;
87     background-color: #10F5E9;
88     width: 100%;
89     box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
90     z-index: 900;
91 }
92 .dropdown-content a {
93     margin: 0;
94     color: black;
95     text-decoration: none;
96     display: block;
97     text-align: left;
98 }
99
100 .menu-link-one:hover .dropdown-content {
101 display: block;
102 }
103
104 /*li.menu-link-one, li.menu-link-two {
105     display: inline-block;
106 }
107 */
108
109 .full-panel {
110 margin: auto;
111 height: 100vh;
112 width: auto;
113     position: relative;
114 /*background-image: url("IMAGES/PostcardMint.jpg");*/
115 background-color:aqua;
116     background-size: auto;
117     background-repeat: no-repeat;
118 padding: 0px;
119 }
120
121 .container {
122 margin: auto;
123     position: absolute;
124     top: 20%; left: 0; bottom: 0; right: 0;
125     width: 80vw;
126     height: 40%;
127 overflow:hidden;
127 overflow:hidden;
128     background-color: white;
129 padding: 0px;
130 display:block;
131 }
132
133
134 .headline {
135 position: relative;
136 margin: auto;
137 top:20%;
138 width:50%;
139 text-align: center;
140 font-size:3em;
141 }
142
143
144 .left-panel {
145     width: 50%;
146     height: auto;
147 background-color:cornflowerblue;
148     margin-top: 0%;
149     text-align: center;
150     display: inline-block;
151     float: left;
152 }
153 .about-container {
154     height: 850px;
155     display:inline-block;
156     margin-top: 5%;
157     width: 70%;
158     text-align: left;
159
160 }
161 .about-container h2 {
162     font-size: 3em;
163     text-shadow: 3px 0px #10F5E9;
164     padding: 0px;
165     margin: 10% 0px 50px 0px;
166     text-align: left;
167 }
168
169 .about-container h4 {
170 /*  box-sizing: border-box;*/
171     font-size: 2em;
172     padding: 0;
173     margin: 0;
174     text-align: left;
175 transition: text-shadow 0.2s;
176 }
177 .about-container h4:hover {
178     text-shadow: 2px 0px #10F5E9;
179 }
180
181 .about-container p{
182 margin-top:2em;
183 }
184
185 /*
186 .about-container a{
187     background-color: black;
188     text-decoration: none;
189     font-size: 1.2em;

190     color: white;


190     color: white;
191     margin: 50px 0px 0px 0px;
192     padding: 15px 40px 15px 40px;
193     display: inline-block;
194     letter-spacing: 1px;
195     box-shadow: 4px 4px #f442df;
196     transform-origin: 0 50%;
197     -webkit-transition: box-shadow 0.3s;
198     transition-timing-function: ease-out;
199     text-align: left;
200 }
201 .about-container a:hover {
202     transform: perspective(1px) translateZ(0);
203     transition-property: color, box-shadow;
204     box-shadow: 10px 10px #f442df;
205    
206 }*/
207
208 .button{
209 font-family: 'Yatra One', cursive;
210 background-color: black;
211     text-decoration: none;
212     font-size: 1.2em;
213     color: white;
214     margin: 50px 0px 0px 0px;
215     padding: 15px 40px 15px 40px;
216     display: inline-block;
217     letter-spacing: 1px;
218     box-shadow: 4px 4px #f442df;
219   transition: box-shadow 0.3s;
220     text-align: left;
221
222 }
223
224 .button:hover{
225     box-shadow: 10px 10px #f442df;
226
227 }
228
229 /*
230 .right-panel {
231     margin-top: 0%;
232     width: 40%;
233     min-height: 100vh;
234     display: inline-block;
235     position: relative;
236     text-align: center;
237     float: left;
238 }
239 */
240
241 .right-panel {
242     width: 50%;
243     height: auto;
244 background-color:gold;
245     margin-top: 0%;
246     text-align: center;
247     display: inline-block;
248     float: right;
249 }
250 .about-image-container {
251     height: 850px;
252     display:inline-block;

253     margin-top: 2%;


253     margin-top: 2%;
254 padding-bottom:3%;
255     text-align: center;
256 width: 70%;
257 }
258 .about-image-container img{
259 width:auto;
260 height:300px;
261 }
262
263 .img-hover {
264 box-shadow: 4px 4px #f442df;
265     transition: box-shadow 0.3s;
266 margin-top: 15%;
267     -webkit-filter: drop-shadow(10px 10px 15px gray);
268 }
269
270
271 .img-hover:hover {
272     transition-property: box-shadow;
273     box-shadow: 10px 10px #f442df;
274 }
275
276
277
278

You might also like