├── header.css
└── header.html
/header.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: whitesmoke;
3 | }
4 | .back-image {
5 | background-image: url(https://www.bing.com/images/blob?bcid=ROvF0TIycF4F.o7ZSs8j014mayfH.....yg);
6 | background-repeat: no-repeat;
7 | background-size: cover;
8 | padding: 20px;
9 | margin: -8px;
10 | }
11 | .img1 {
12 | margin: -0.1%;
13 | width: 2700px;
14 | height: 1000px;
15 | }
16 | .header {
17 | padding-top: 0%;
18 | padding: 25px;
19 | font-size: 1.1rem;
20 | line-height: 0.01rem;
21 | word-spacing: normal;
22 | text-align: center;
23 | background-color: 475657;
24 | color: whitesmoke;
25 | cursor: pointer;
26 | margin: -5px;
27 | }
28 | .header-2 {
29 | font-size: 1.1rem;
30 | line-height: 0.01rem;
31 | word-spacing: normal;
32 | text-align: center;
33 | background-color: 475657;
34 | color: whitesmoke;
35 | cursor: pointer;
36 | }
37 | nav {
38 | display: flex;
39 | justify-content: space-between;
40 | }
41 |
42 | .BTN1 {
43 | padding: 3px;
44 | font-size: large;
45 | font-family: fantasy;
46 | border: none;
47 | color: maroon;
48 | background-color: transparent;
49 | }
50 | .BTN2 {
51 | font-weight: 600;
52 | font-size: 16px;
53 | font-family: Arial, Helvetica, sans-serif;
54 | border: none;
55 | color: maroon;
56 | background-color: transparent;
57 | cursor: pointer;
58 | }
59 | .BTN3 {
60 | font-weight: 600;
61 | font-size: 16px;
62 | font-family: Arial, Helvetica, sans-serif;
63 | border: none;
64 | color: maroon;
65 | background-color: transparent;
66 | cursor: pointer;
67 | }
68 | .BTN4 {
69 | font-weight: 600;
70 | font-size: 16px;
71 | font-family: Arial, Helvetica, sans-serif;
72 | border: none;
73 | color: maroon;
74 | background-color: transparent;
75 | cursor: pointer;
76 | }
77 | .BTN5 {
78 | margin: 10px;
79 | padding: 8px;
80 | padding-inline: 15px;
81 | font-size: 15px;
82 | font-weight: bold;
83 | font-family: Arial, Helvetica, sans-serif;
84 | color: whitesmoke;
85 | border-color: transparent;
86 | border-radius: 10px;
87 | background-color: maroon;
88 | cursor: pointer;
89 | flex-grow: initial;
90 | }
91 | h1 {
92 | justify-content: left;
93 | justify-self: right;
94 | padding: px;
95 | font-size: 45px;
96 | font-weight: 400;
97 | word-spacing: 10px;
98 | color: maroon;
99 | }
100 | .order-btn {
101 | cursor: pointer;
102 | padding: 12px;
103 | padding-inline: 100px;
104 | color: white;
105 | font-size: 20px;
106 | font-weight: bold;
107 | font-family: Arial, Helvetica, sans-serif;
108 | background-color: maroon;
109 | border: none;
110 | border-radius: 15px;
111 | }
112 | .main {
113 | padding: 20px;
114 | padding-top: 50px;
115 | display: flex;
116 | justify-content: space-between;
117 | }
118 | .main2 {
119 | padding-top: 100px;
120 | }
121 |
--------------------------------------------------------------------------------
/header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Pasta Evangelists
7 |
8 |
9 |
10 |
11 |
19 |
20 |
35 |
36 |
37 |
38 |
39 | The Freshest, Artisan
40 | Pasta, Delivered.
41 |
42 |
45 |
47 |
48 |
52 |
53 |
54 |
55 |
61 |
62 |
63 |
64 |