├── 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 |

12 | 16 | Hungary? Enjoy $5 off your first order with code: TAKES 18 |

19 |
20 | 35 | 36 |
37 |
38 |

39 | The Freshest, Artisan
40 | Pasta, Delivered. 41 |

42 | 45 | 47 |
48 | logo 52 |
53 | 54 |
55 | 61 |
62 |
63 |
64 |
65 | 66 | 67 | --------------------------------------------------------------------------------