├── .DS_Store ├── img ├── logo.png ├── menu.png ├── pic-1.png ├── pic-2.png ├── pic-3.png ├── pic-4.png └── shara desert.jpg ├── index.html └── style └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/.DS_Store -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/logo.png -------------------------------------------------------------------------------- /img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/menu.png -------------------------------------------------------------------------------- /img/pic-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/pic-1.png -------------------------------------------------------------------------------- /img/pic-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/pic-2.png -------------------------------------------------------------------------------- /img/pic-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/pic-3.png -------------------------------------------------------------------------------- /img/pic-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/pic-4.png -------------------------------------------------------------------------------- /img/shara desert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/CSS_hanson6/c2a6947964d343b556bdb6b9cdd3813f1d71fe9a/img/shara desert.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 | 41 | 42 | 43 | 44 |

45 | 46 |

47 |

SAHARA

48 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus Voluptatum voluptates

49 |

deserunt excepturi consequatur ullam

50 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse, sed?

51 | 52 |

53 | 54 | 55 |

56 | 57 |

58 |

Western Desert

59 |

Lorem ipsum dolor sit amet.

60 |

Lorem ipsum dolor sit amet.

61 |

62 | 63 |

64 |

AI Bagawat

65 |

Lorem ipsum dolor sit amet consectetur.

66 |

Lorem ipsum dolor sit amet.

67 |

68 | 69 |

70 |

Pyramid Of Giza

71 |

Lorem ipsum dolor sit amet.

72 |

Lorem ipsum dolor sit amet.

73 |

74 | 75 |

76 |

Kalahari Desert

77 |

Lorem ipsum dolor sit amet.

78 |

Lorem ipsum dolor sit amet.

79 | 80 |

81 | 82 |

83 | 84 |

85 | 86 |

87 | 88 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-image: url(../img/shara\ desert.jpg); 8 | background-size: cover; 9 | } 10 | /* Header Style */ 11 | .logo img{ 12 | width: 90px; 13 | height: 80px; 14 | } 15 | .header{ 16 | display: flex; 17 | flex-direction: row; 18 | justify-content: space-between; 19 | margin-top: 20px; 20 | align-items: center; 21 | } 22 | .logo{ 23 | margin-left: 100px; 24 | } 25 | .nav-items{ 26 | align-items: center; 27 | display: flex; 28 | margin-right: 100px; 29 | } 30 | .list ul li { 31 | display: inline-block; 32 | list-style: none; 33 | margin-right: 60px; 34 | } 35 | .list a{ 36 | text-decoration: none; 37 | color: #ffff; 38 | font-size: 18px; 39 | } 40 | .barger{ 41 | padding: 40px; 42 | 43 | } 44 | 45 | .second-section{ 46 | display: flex; 47 | flex-direction: row; 48 | justify-content: space-around; 49 | align-items: center; 50 | gap: 20px; 51 | } 52 | 53 | /* Left-Contanier style */ 54 | .left-conatiner{ 55 | margin-left: 100px; 56 | } 57 | .left-conatiner h1{ 58 | text-align: start; 59 | font-size: 110px; 60 | color: #ffff; 61 | } 62 | .left-conatiner p{ 63 | text-align: justify; 64 | color: #ffff; 65 | margin-top: 20px; 66 | font-size: 18px; 67 | } 68 | .btn{ 69 | width: 200px; 70 | height: 40px; 71 | border: none; 72 | border-radius: 20px; 73 | /* font-weight: 700; */ 74 | font-size: 15px; 75 | padding: 5px; 76 | margin-top: 40px; 77 | } 78 | 79 | /* right-contanier style */ 80 | 81 | 82 | /* grid Style */ 83 | .right-contanier{ 84 | display: grid; 85 | grid-template-columns: 250px 250px; 86 | grid-template-rows: 300px 300px; 87 | gap: 30px; 88 | row-gap: 40px; 89 | margin-bottom: 150px; 90 | margin-top: 40px; 91 | margin-right: 100px; 92 | 93 | } 94 | .child{ 95 | width: 250px; 96 | height: 300px; 97 | border: 2px solid grey; 98 | border-radius: 20px; 99 | padding: 20px 0 0 20px; 100 | text-align: start; 101 | color: #ffff; 102 | line-height: 30px; 103 | } 104 | .child:hover{ 105 | transform: translateY(-15px); 106 | transition: 0.5s ease; 107 | 108 | } 109 | 110 | .child1{ 111 | background-image: url(../img/pic-1.png); 112 | background-position: center; 113 | background-size: cover; 114 | } 115 | .child2{ 116 | background-image: url(../img/pic-2.png); 117 | background-position: center; 118 | background-size: cover; 119 | } 120 | .child3{ 121 | background-image: url(../img/pic-3.png); 122 | background-position: center; 123 | background-size: cover; 124 | } 125 | .child4{ 126 | background-image: url(../img/pic-4.png); 127 | background-position: center; 128 | background-size: cover; 129 | } 130 | 131 | 132 | 133 | 134 | /* Tablet View */ 135 | @media screen and (min-width:650px) and (max-width:900px){ 136 | .list ul li { 137 | margin-right: 35px; 138 | 139 | } 140 | .barger{ 141 | padding: 0px; 142 | 143 | } 144 | .left-conatiner h1 { 145 | text-align: start; 146 | font-size: 70px; 147 | color: #ffff; 148 | } 149 | 150 | .second-section{ 151 | display: flex; 152 | flex-direction: column; 153 | justify-content: space-around; 154 | align-items: center; 155 | } 156 | 157 | .right-contanier{ 158 | display: grid; 159 | justify-content: center; 160 | align-items: center; 161 | grid-template-columns: 400px; 162 | grid-template-rows: 250px; 163 | } 164 | .child{ 165 | width: 500px; 166 | height: 250px; 167 | } 168 | 169 | } 170 | 171 | /* Mobile View */ 172 | @media screen and (min-width:240px) and (max-width:650px){ 173 | .logo{ 174 | margin-left: 10px; 175 | } 176 | .logo img{ 177 | width: 50px; 178 | height: 50px; 179 | } 180 | .nav-items{ 181 | margin-right: 10px; 182 | font-size: 15px; 183 | } 184 | .list ul li { 185 | display: block; 186 | margin-right: 10px; 187 | } 188 | .barger{ 189 | padding: 1px; 190 | } 191 | .left-conatiner{ 192 | margin-left: 10px; 193 | } 194 | 195 | .left-conatiner h1 { 196 | text-align: start; 197 | font-size: 40px; 198 | color: #ffff; 199 | } 200 | 201 | .second-section{ 202 | display: flex; 203 | flex-direction: column; 204 | justify-content: space-around; 205 | align-items: center; 206 | } 207 | 208 | .right-contanier{ 209 | display: grid; 210 | justify-content: center; 211 | flex-wrap: wrap; 212 | align-items: center; 213 | grid-template-columns: 250px; 214 | grid-template-rows: 300px; 215 | margin-right: 10px; 216 | } 217 | .child{ 218 | width: 250px; 219 | height: 300px; 220 | } 221 | 222 | } --------------------------------------------------------------------------------