ChatGPT4.0 디자인 To HTML

Overview : 이미지를 주고 HTML 을 요청 해봤다.

html 으로 만들어 줘 css 도 만들어 주세요.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Web Page</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #eee;
  }
  .nav {
    list-style: none;
    display: flex;
  }
  .nav li {
    padding: 0 15px;
  }
  .brand {
    text-align: center;
    font-size: 32px;
    padding: 40px 0;
  }
  .features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 20px;
  }
  .feature {
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
  .login-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #eee;
  }
  .login-form input[type="text"],
  .login-form input[type="password"] {
    padding: 5px;
  }
  .login-form button {
    padding: 5px 15px;
  }
  .video {
    height: 100px;
    background: #ddd;
    text-align: center;
    padding: 20px;
  }
  .map {
    height: 150px;
    background: url('map-placeholder.png') no-repeat center center;
    background-size: cover;
  }
</style>
</head>
<body>
  <header class="header">
    <ul class="nav">
      <li>Features</li>
      <li>Learn</li>
      <li>More</li>
      <li>FAQ</li>
      <li>About</li>
    </ul>
    <div class="login-form">
      <input type="text" placeholder="Login">
      <input type="password" placeholder="password">
      <button>Login</button>
    </div>
  </header>
  <div class="brand">A Big Brand</div>
  <div class="features">
    <div class="feature">Some feature</div>
    <div class="feature">
      Yes, web video is so hot right now
      <div class="video">Video player</div>
    </div>
    <div class="feature">Some other feature</div>
    <div class="feature">Maps? Maps are cool, right?
      <div class="map">Map</div>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

}

.header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px;

background: #eee;

}

.nav {

list-style: none;

display: flex;

}

.nav li {

padding: 0 15px;

}

.brand {

text-align: center;

font-size: 32px;

padding: 40px 0;

}

.features {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 20px;

padding: 0 20px;

}

.feature {

border: 1px solid #000;

padding: 20px;

text-align: center;

}

.login-form {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px;

background: #eee;

}

.login-form input[type="text"],

.login-form input[type="password"] {

padding: 5px;

}

.login-form button {

padding: 5px 15px;

}

.video {

height: 100px;

background: #ddd;

text-align: center;

padding: 20px;

}

.map {

height: 150px;

background: url('map-placeholder.png') no-repeat center center;

background-size: cover;

}

</style>

</head>

<body>

<li>Features</li>

<li>Learn</li>

<li>About</li>

</ul>

<button>Login</button>

</div>

</header>

<div class="brand">A Big Brand</div>

<div class="feature">Some feature</div>

Yes, web video is so hot right now

<div class="video">Video player</div>

</div>

<div class="feature">Some other feature</div>

<div class="feature">Maps? Maps are cool, right?

</div>

</body>

</html>