├── README.md ├── images ├── lamp.png ├── logo.png ├── menu.png └── light.png ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # VueLamp 2 | VueLamp lighting on and off 3 | -------------------------------------------------------------------------------- /images/lamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Althaf-Nazeer/VueLamp/HEAD/images/lamp.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Althaf-Nazeer/VueLamp/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Althaf-Nazeer/VueLamp/HEAD/images/menu.png -------------------------------------------------------------------------------- /images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Althaf-Nazeer/VueLamp/HEAD/images/light.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modern Website 6 | 7 | 8 | 9 |
10 | 21 | 22 |
23 | 24 | 25 |
26 | 27 |
28 |

Latest
in Lighting

29 |

This is the first lamp from our company. We're making a huge collection of modern lamps in all categories from home use to office use.

30 | 31 |
32 |

04

33 |
34 |

05

35 |
36 |
37 | 38 | 39 | 40 |
41 | 42 | 51 | 52 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'poppins', sans-serif; 5 | box-sizing: border-box; 6 | } 7 | 8 | .hero{ 9 | background: #1d2026; 10 | min-height: 100vh; 11 | width: 100%; 12 | color: #fff; 13 | position: relative; 14 | } 15 | nav{ 16 | display: flex; 17 | align-items: center; 18 | padding: 20px 8%; 19 | } 20 | nav .menu-img{ 21 | width: 25px; 22 | margin-right: 20px; 23 | cursor: pointer; 24 | } 25 | nav .logo{ 26 | width: 160px; 27 | cursor: pointer; 28 | } 29 | nav ul{ 30 | flex: 1; 31 | text-align: right; 32 | } 33 | nav ul li{ 34 | display: inline-block; 35 | list-style: none; 36 | margin: 0 20px; 37 | } 38 | nav ul li a{ 39 | text-decoration: none; 40 | color: #fff; 41 | } 42 | button{ 43 | background: #efefef; 44 | height: 30px; 45 | width: 60px; 46 | border-radius: 20px; 47 | border: 0; 48 | outline: 0; 49 | cursor: pointer; 50 | transition: background 0.5s; 51 | } 52 | button span{ 53 | display: block; 54 | background: #999; 55 | height: 26px; 56 | width: 26px; 57 | border-radius: 50%; 58 | margin-left: 2px; 59 | transition: background 0.5s, margin-left 0.5s; 60 | } 61 | .lamp-container{ 62 | position: absolute; 63 | top: -20px; 64 | left: 22%; 65 | width: 200px; 66 | } 67 | .lamp{ 68 | width: 100%; 69 | } 70 | .light{ 71 | position: absolute; 72 | top: 97%; 73 | left: 50%; 74 | transform: translateX(-50%); 75 | width: 700px; 76 | margin-left: -10px; 77 | opacity: 0; 78 | transition: opacity 0.5s; 79 | } 80 | .text-container{ 81 | max-width: 600px; 82 | margin-top: 7%; 83 | margin-left: 50%; 84 | } 85 | .text-container h1{ 86 | font-size: 80px; 87 | font-weight: 400; 88 | } 89 | .text-container a{ 90 | text-decoration: none; 91 | background: #00986f; 92 | padding: 14px 40px; 93 | display: inline-block; 94 | color: #fff; 95 | font-size: 18px; 96 | margin-top: 30px; 97 | border-radius: 30px; 98 | } 99 | .control{ 100 | display: flex; 101 | align-items: center; 102 | justify-content: flex-end; 103 | margin-top: 150px; 104 | } 105 | .control .line{ 106 | width: 250px; 107 | height: 4px; 108 | background: #fff; 109 | margin: 0 20px; 110 | border-radius: 2px; 111 | } 112 | .control .line span{ 113 | width: 50%; 114 | height: 8px; 115 | margin-top: -2px; 116 | border-radius: 4px; 117 | background: #00986f; 118 | display: block; 119 | } 120 | .active{ 121 | background: green; 122 | } 123 | .active span{ 124 | background: #fff; 125 | margin-left: 31px; 126 | } 127 | .on{ 128 | opacity: 1; 129 | } --------------------------------------------------------------------------------