├── images ├── logo.png ├── pink.png ├── green.png └── orange.png ├── README.md ├── script.js ├── index.html └── style.css /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Starbuck-Landing-Page/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Starbuck-Landing-Page/HEAD/images/pink.png -------------------------------------------------------------------------------- /images/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Starbuck-Landing-Page/HEAD/images/green.png -------------------------------------------------------------------------------- /images/orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Starbuck-Landing-Page/HEAD/images/orange.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Starbuck-Landing-Page 2 | Starbucks' landing page invites you into a world of aromatic blends and cozy ambiance, promising a delightful coffee experience just a click away 3 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | const gcfe = document.querySelector('.gcfe'); 3 | const ocfe = document.querySelector('.ocfe'); 4 | const pcfe = document.querySelector('.pcfe'); 5 | const green = document.querySelector('.green'); 6 | const orange = document.querySelector('.orange'); 7 | const pink = document.querySelector('.pink'); 8 | 9 | gcfe.addEventListener('click', ()=>{ 10 | green.style.opacity = '1' 11 | green.style.transform = 'rotate(0deg)' 12 | 13 | pink.style.opacity = '0' 14 | pink.style.transform = 'rotate(-90deg)' 15 | orange.style.opacity = '0' 16 | orange.style.transform = 'rotate(-90deg)' 17 | }) 18 | 19 | ocfe.addEventListener('click', ()=>{ 20 | orange.style.opacity = '1' 21 | orange.style.transform = 'rotate(0deg)' 22 | 23 | pink.style.opacity = '0' 24 | pink.style.transform = 'rotate(-90deg)' 25 | green.style.opacity = '0' 26 | green.style.transform = 'rotate(-90deg)' 27 | }) 28 | 29 | pcfe.addEventListener('click', ()=>{ 30 | pink.style.opacity = '1' 31 | pink.style.transform = 'rotate(0deg)' 32 | 33 | green.style.opacity = '0' 34 | green.style.transform = 'rotate(-90deg)' 35 | orange.style.opacity = '0' 36 | orange.style.transform = 'rotate(-90deg)' 37 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CODE AASHU | Starbuck Website 9 | 10 | 11 | 12 | 25 |

26 |

27 |

It's not just Coffee It's Starbuck's

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aliquid vitae nihil id, inventore error corporis hic dolore, optio dignissimos iure beatae dolores possimus porro cumque. Quos delectus vitae itaque?

29 | 30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 | 43 | 44 | 50 | 51 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600&family=Lemon&family=Patua+One&family=Poppins:wght@200;400;500;600;700;800;900&display=swap'); 2 | /* ===( CODE AASHU )=== */ 3 | *{ 4 | padding: 0; 5 | margin: 0; 6 | font-family: 'Poppins', sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | width: 100%; 12 | height: 100vh; 13 | overflow: hidden; 14 | } 15 | 16 | nav{ 17 | width: 100%; 18 | height: 10%; 19 | } 20 | 21 | nav .wrapper{ 22 | width: 100%; 23 | height: 100%; 24 | display: flex; 25 | justify-content: space-around; 26 | } 27 | 28 | nav .wrapper .logo img{ 29 | width: 100%; 30 | height: 90%; 31 | margin-top: 7%; 32 | 33 | } 34 | 35 | nav .wrapper .links{ 36 | display: flex; 37 | align-items: center; 38 | } 39 | 40 | nav .wrapper .links a{ 41 | color: black; 42 | text-decoration: none; 43 | margin: 0 25px; 44 | position: relative; 45 | font-size: 1.4rem; 46 | } 47 | 48 | nav .wrapper .links a::before{ 49 | content: ""; 50 | position: absolute; 51 | bottom: -4px; 52 | left: 0; 53 | height: 4px; 54 | background-color: #288315; 55 | width: 0%; 56 | transition: 0.3s ease; 57 | } 58 | 59 | nav .wrapper .links a:hover::before{ 60 | width: 100%; 61 | } 62 | 63 | /* Section start */ 64 | 65 | section{ 66 | width: 100%; 67 | height: 90%; 68 | display: flex; 69 | justify-content: space-around; 70 | } 71 | 72 | section .content{ 73 | width: 120%; 74 | } 75 | 76 | section .content h1{ 77 | font-size: 4.5rem; 78 | margin: 7rem 2rem 0 5rem; 79 | } 80 | 81 | section .content h1 span{ 82 | color: #007146; 83 | font-size: 5rem; 84 | font-weight: 800; 85 | } 86 | 87 | section .content p{ 88 | font-size: 1.2rem; 89 | margin: 1rem 2rem 0 5rem; 90 | } 91 | 92 | section .content button{ 93 | font-size: 1.2rem; 94 | width: 200px; 95 | height: 50px; 96 | background: #007146; 97 | border-radius:10px ; 98 | color: white; 99 | font-weight: 700; 100 | margin: 1.5rem 0 0 5.5rem; 101 | transition: 0.3s linear; 102 | } 103 | 104 | section .content button:hover{ 105 | color: #007146; 106 | background-color: transparent; 107 | border: none; 108 | box-shadow: 3px 3px black; 109 | border-right: 2px solid #007146 ; 110 | border-bottom: 2px solid #007146 ; 111 | } 112 | 113 | section .image{ 114 | width: 100%; 115 | } 116 | 117 | section .image .box{ 118 | position: absolute; 119 | background: #007146; 120 | width: 900px; 121 | height: 900px; 122 | right: -370px; 123 | bottom: -370px; 124 | border-radius: 100%; 125 | pointer-events: none; 126 | transition:0.3s ease-in ; 127 | } 128 | 129 | section .image .box img{ 130 | width: 300px; 131 | height: 450px; 132 | margin: -50px 0 0 0; 133 | } 134 | 135 | section .image .green{ 136 | opacity: 1; 137 | transform: rotate(0deg); 138 | filter: drop-shadow(2px 2px 50px #007146); 139 | 140 | } 141 | section .image .green img{ 142 | width: 330px; 143 | transform: rotate(-20deg); 144 | filter: drop-shadow(2px 2px 50px #007146); 145 | } 146 | 147 | section .image .orange img{ 148 | width: 330px; 149 | transform: rotate(-20deg); 150 | filter: drop-shadow(2px 2px 50px orange); 151 | } 152 | section .image .orange{ 153 | opacity: 0; 154 | background: #a6661a; 155 | transform: rotate(-90deg); 156 | filter: drop-shadow(2px 2px 50px orange); 157 | } 158 | 159 | 160 | section .image .pink { 161 | opacity: 0; 162 | transform: rotate(-90deg); 163 | background-color: #91116a; 164 | filter: drop-shadow(2px 2px 50px pink); 165 | } 166 | section .image .pink img{ 167 | transform: rotate(-30deg); 168 | height: 520px; 169 | margin: -130px 0 0 -20px; 170 | filter: drop-shadow(2px 2px 50px pink); 171 | } 172 | 173 | 174 | /* lower images */ 175 | 176 | .img-links{ 177 | width: 20%; 178 | height: 10vh; 179 | position: absolute; 180 | bottom: 20px; 181 | margin: 0 40%; 182 | display: flex; 183 | justify-content: space-between; 184 | } 185 | 186 | .img-links a{ 187 | width: 100%; 188 | height: 100%; 189 | margin: 0 20px; 190 | cursor: pointer; 191 | transition: 0.2s linear; 192 | } 193 | 194 | .img-links a img{ 195 | width: 50px; 196 | height: 90px; 197 | } 198 | 199 | .img-links a:hover{ 200 | margin-top: -20px; 201 | filter: drop-shadow(2px 2px 10px #007146); 202 | } 203 | 204 | .img-links a:nth-child(2){ 205 | margin: -6px 0 0 -20px; 206 | } 207 | .img-links a:nth-child(2):hover{ 208 | margin-top: -24px; 209 | filter: drop-shadow(2px 2px 10px orange); 210 | } 211 | 212 | .img-links a:nth-child(3){ 213 | margin: -16px 0 0 0; 214 | } 215 | .img-links a:nth-child(3):hover{ 216 | margin-top: -40px; 217 | filter: drop-shadow(2px 2px 10px rgb(191,73,177)); 218 | } 219 | 220 | .img-links a:nth-child(3) img{ 221 | height: 90px; 222 | } --------------------------------------------------------------------------------