JSFiddle - React, Tailwind, and code Playground

by 973224

HTML

<!DOCTYPE html>
<html>
<body>
<div class='background'>
<div class='ikea'>
  <a href='https://www.ikea.com.tw/zh'><img src='https://1000logos.net/wp-content/uploads/2017/02/IKEA-Logo.png' width='10%'></a>
</div>
<div class='help'>
<a class='wee' href='https://www.ikea.com.tw/zh/customerservice/contact-us'>Help</a>
</div>
<div class='sign'>
<a class='wee' href='https://www.ikea.com.tw/zh/about/working-at-the-ikea-group'>SignUp</a>
</div>
<div class='login'>
<a class='wee' href='https://www.ikea.com.tw/zh/client'>Login</a>
</div>



<h3 class='h3'>
The BASTUA collection
</h3>
<h1 class='h1'>
Marimekko  IKEA
</h1>


<button class='cute' type='button' onclick="alert('新品尚未推出')">Go Shopping!</button>

<div class='email'>
<div class='talk'>
請留下您的電子信箱，將會有專人聯絡您
</div>
<input class='gmail' type='text' name='email' placeholder='Your E-mail'>
</div>
<button class='ugly' type='button' onclick="alert('請稍等，將會有專人為您服務')">Submit</button>

</div>



</body>
</html>

CSS

.background{
  background-image: url("https://images.unsplash.com/photo-1678933632079-d29d876dbc0e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" );
    
    background-size: cover;
    background-repeat: no-repeat;
    background-size:100% 100%; 
    height:500px;
    text-align: center;
    margin:0;
}
.help,.sign,.login{
  display:inline-block;
  position:relative;
  top:-35px;
  left:190px;
  color:yellow;
    font-size:12px;
    font-family:arial;
}
.sign{
  position:relative;
  left:215px;
  
}

.login{
  position:relative;
  left:240px;

}
.wee{
  color:yellow;
}

.cute{
  position:relative;
  top:30px;
  width:120px;
  height:30px;
  border-radius:30px;
  background-color:blue;
  color:yellow;
  border:none;
}
.cute:hover {
    background-color:yellow;
    color: blue;}  
 .ugly{
  position:relative;
  top:30px;
  width:120px;
  height:30px;
  border-radius:30px;
  background-color:blue;
  color:yellow;
  border:none;
 }
 .ugly:hover {
    background-color:yellow;
    color: blue;}  
 .talk{
   font-size:12px;
   position:relative;
   top:40px;
   color:white;
width:250px;
height:25px;
left:215px;
display:flex;
justify-content:center;
align-content:center;
flex-wrap:wrap;
background:rgba(0,0,0,0.5);
 }
.ugly{
  position:relative;
  top:80px;
}
.gmail{
    position:relative;
  top:50px;
  height:40px;
  width:380px;
}
*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-decoration: none;
}

.h3{
  font-size:25px;
  padding-top:50px;
  color:white;
  text-shadow: black 0.1em 0.1em 0.1em
}
.h1{
  font-size:50px;
  color:white;
  text-shadow: black 0.1em 0.1em 0.1em
}

/*未被訪問的連結*/
a:link{color:pink;}

/*已被訪問的連結*/
a:visited{color:lightyellow;}

/*將屬標懸停在連結上*/
a:hover{color:yellow;}

/*被選擇的連結*/
a:active{color:none;}