Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- </head>
- <body>
- <style>
- body {
- font-family: sans-serif;
- }
- .box_wrapper {
- background-color:grey;
- width: 100%;
- min-height: 200px;
- text-align: center;
- margin-top: 20px;
- }
- .box_wrapper_image {
- display: inline-block;
- width: 360px;
- height: 200px;
- background-color: #666;
- margin: 30px;
- }
- @media only screen and (max-width: 768px) {
- .box_wrapper_image {
- display: block;
- text-align: center;
- width: 80%;
- margin-top: 10px;
- }
- }
- .text_wrapper {
- display: inline-block;
- vertical-align: bottom;
- margin: 30px 30px 50px 30px;
- }
- .text_wrapper_text {
- display: block;
- height: 24px;
- font-size: 18px;
- text-align: left;
- }
- .text_wrapper_title {
- font-weight: 600;
- }
- .enter_button {
- display: block;
- background-color: black;
- padding: 5px;
- text-align: center;
- color:#fff;
- }
- .enter_button:hover {
- opacity: 0.8;
- cursor:pointer;
- }
- </style>
- <div class="box_wrapper">
- <div class="box_wrapper_image">
- <img src=""></img>
- </div>
- <div class="text_wrapper">
- <span class="text_wrapper_text text_wrapper_title">Lorem ipsum</span><br/>
- <span class="text_wrapper_text text_wrapper_price">Price 25 THB</span><br/>
- <span class="text_wrapper_text text_wrapper_points">Points</span><br/>
- <div class="enter_button">ENTER</div>
- </div>
- </div>
- <div class="box_wrapper">
- <div class="box_wrapper_image">
- <img src=""></img>
- </div>
- <div class="text_wrapper">
- <span class="text_wrapper_text text_wrapper_title">Lorem ipsum</span><br/>
- <span class="text_wrapper_text text_wrapper_price">Price 25 THB</span><br/>
- <span class="text_wrapper_text text_wrapper_points">Points</span><br/>
- <div class="enter_button">ENTER</div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment