├── README.md ├── 7.jpg ├── index.html └── index.css /README.md: -------------------------------------------------------------------------------- 1 | # Simple webpage 2 | WEBPAGE WITH JOKER WALLPAPER 3 | -------------------------------------------------------------------------------- /7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mehulrajdev/Simple_webpage/HEAD/7.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Web Page 13 | 14 | 15 | 29 |
30 |
31 |
Amazing Website
32 |
Pure HTML and CSS
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; 6 | } 7 | 8 | ::selection { 9 | color: #000; 10 | background: #fff; 11 | } 12 | 13 | nav { 14 | position: fixed; 15 | background: #1b1b1b; 16 | width: 100%; 17 | padding: 12px 0; 18 | z-index: 12; 19 | } 20 | 21 | nav .menu { 22 | max-width: 1250px; 23 | margin: auto; 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | padding: 0 20px; 28 | } 29 | 30 | .menu .logo a { 31 | text-decoration: none; 32 | color: #fff; 33 | font-size: 36px; 34 | font-weight: 600; 35 | } 36 | 37 | .menu ul { 38 | display: inline-flex; 39 | } 40 | 41 | .menu ul li { 42 | list-style: none; 43 | margin-left: 8px; 44 | } 45 | 46 | .menu ul li:first-child { 47 | margin-left: 0px; 48 | } 49 | 50 | .menu ul li a { 51 | text-decoration: none; 52 | color: #fff; 53 | font-size: 20px; 54 | font-weight: 500; 55 | padding: 8px 16px; 56 | border-radius: 4px; 57 | transition: all 0.3s ease; 58 | } 59 | 60 | .menu ul li a:hover { 61 | background: #fff; 62 | color: black; 63 | } 64 | 65 | .img { 66 | background: url("7.jpg"); 67 | width: 100%; 68 | height: 100vh; 69 | background-size: cover; 70 | background-position: center; 71 | position: relative; 72 | } 73 | 74 | .img::before { 75 | content: ""; 76 | position: absolute; 77 | height: 100%; 78 | width: 100%; 79 | background: rgba(0, 0, 0, 0.4); 80 | } 81 | .center { 82 | position: absolute; 83 | top: 80%; 84 | left: 50%; 85 | transform: translate(-50%, -50%); 86 | width: 100%; 87 | padding: 0 20px; 88 | text-align: center; 89 | } 90 | .center .title { 91 | color: #fff; 92 | font-size: 56px; 93 | font-weight: 600; 94 | } 95 | .center .sub_title { 96 | color: #fff; 97 | font-size: 52px; 98 | font-weight: 600; 99 | } 100 | .center .bttn { 101 | margin-top: 20px; 102 | } 103 | .center .bttn button { 104 | height: 56px; 105 | width: 170px; 106 | border-radius: 4px; 107 | border: none; 108 | margin: 0 10px; 109 | border: 2px solid white; 110 | font-size: 20px; 111 | font-weight: 500; 112 | padding: 0 12px; 113 | cursor: pointer; 114 | outline: none; 115 | transition: all 0.3s ease; 116 | } 117 | .center .bttn button:first-child { 118 | color: #fff; 119 | background: none; 120 | } 121 | .bttn button:first-child:hover { 122 | background: white; 123 | color: black; 124 | } 125 | .center .bttn button:last-child { 126 | background: white; 127 | color: black; 128 | } 129 | --------------------------------------------------------------------------------