<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><a href="https://www.geeksforgeeks.org/how-to-make-a-website-using-chatgpt/" target="_blank" class="ke-link">https://www.geeksforgeeks.org/how-to-make-a-website-using-chatgpt/</a></b></span></p><p> </p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">index_html & css  tag  A</span></b></p><p><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><br><!DOCTYPE html>  <br><html>  <br><head>  <br><title>My Portfolio</title>  <br><meta name="viewport" content="width=device-width, initial-scale=1.0">  <br><link rel="stylesheet" href="styles.css"> <br>    <style> <br>    /* Global Styles */ <br>* {  <br>box-sizing: border-box;  <br>margin: 0;  <br>padding: 0;  <br>font-family: Arial, sans-serif;  <br>}  <br><br>body {  <br>background-color: #f5f5f5;  <br>}  <br><br>h1, h2 {  <br>margin-top: 40px;  <br>text-align: center;  <br>color: #333;  <br>}  <br><br>h1 {  <br>font-size: 3rem;  <br>}  <br><br>h2 {  <br>font-size: 2rem;  <br>}  <br><br>p {  <br>margin: 20px 0;  <br>line-height: 1.5;  <br>text-align: justify;  <br>}  <br><br>ul {  <br>list-style: none;  <br>margin: 20px 0;  <br>padding: 0;  <br>}  <br><br>li {  <br>margin-bottom: 10px;  <br>}  <br><br>nav {  <br>background-color: #333;  <br>color: #fff;  <br>display: flex;  <br>justify-content: center;  <br>}  <br><br>nav ul {  <br>display: flex;  <br>}  <br><br>nav ul li {  <br>margin: 0 10px;  <br>}  <br><br>nav ul li a {  <br>color: #fff;  <br>text-decoration: none;  <br>padding: 10px;  <br>transition: all 0.3s ease;  <br>}  <br><br>nav ul li a:hover {  <br>background-color: #fff;  <br>color: #333;  <br>}  <br><br>section {  <br>margin: 40px;  <br>}  <br><br>#home {  <br>background-image: url("<a href="https://images.unsplash.com/photo-1492684223066-81342ee5ff52" target="_blank" class="ke-link">https://images.unsplash.com/photo-1492684223066-81342ee5ff52</a>");  <br>background-size: cover;  <br>background-position: center;  <br>height: 600px;  <br>display: flex;  <br>flex-direction: column;  <br>justify-content: center;  <br>align-items: center;  <br>text-align: center;  <br>}  <br><br>#home h1 {  <br>color: #fff;  <br>font-size: 5rem;  <br>text-shadow: 2px 2px 0 #333;  <br>}  <br><br>#home p {  <br>color: #fff;  <br>font-size: 1.5rem;  <br>margin-top: 20px;  <br>text-shadow: 2px 2px 0 #333;  <br>}  <br><br>form {  <br>display: flex;  <br>flex-direction: column;  <br>margin-top: 20px;  <br>}  <br><br>label {  <br>margin-top: 10px;  <br>font-size: 1.2rem;  <br>color: #333;  <br>}  <br><br>input[type="text"], input[type="email"], textarea {  <br>padding: 10px;  <br>border-radius: 5px;  <br>border: none;  <br>margin: 5px 0;  <br>}  <br><br>input[type="submit"] {  <br>background-color: #333;  <br>color: #fff;  <br>border: none;  <br>padding: 10px;  <br>border-radius: 5px;  <br>margin-top: 10px;  <br>cursor: pointer;  <br>transition: all 0.3s ease;  <br>}  <br><br>input[type="submit"]:hover {  <br>background-color: #fff;  <br>color: #333;  <br>}  <br><br>footer {  <br>background-color: #333;  <br>color: #fff;  <br>display: flex;  <br>justify-content: center;  <br>align-items: center;  <br>height: 80px;  <br>}  <br><br>footer p {  <br>font-size: 1.2rem;  <br>}  <br><br>     <br>     <br>     <br>     <br>    </style> <br></head>  <br><body>  <br><nav>  <br><ul>  <br><li><a href="#home">Home</a></li>  <br><li><a href="#about">About</a></li>  <br><li><a href="#services">Services</a></li>  <br><li><a href="#contact">Contact</a></li>  <br></ul>  <br></nav>  <br><br><section id="home">  <br><h1>Welcome to My Portfolio</h1>  <br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br>Vivamus ultricies erat id odio ullamcorper, eget bibendum  <br>neque elementum. Nam sodales, sapien vel fermentum faucibus,  <br>nibh tortor laoreet neque, sed tincidunt velit velit a quam.</p>  <br></section>  <br><br><section id="about">  <br><h2>About Me</h2>  <br><p>My name is John Doe and I'm a web developer based in San Francisco.  <br>I specialize in creating responsive websites that are optimized for mobile devices.</p>  <br></section>  <br><br><section id="services">  <br><h2>My Services</h2>  <br><ul>  <br><li>Website Design</li>  <br><li>Website Development</li>  <br><li>Search Engine Optimization</li>  <br><li>Social Media Marketing</li>  <br></ul>  <br></section>  <br><br><section id="contact">  <br><h2>Contact Me</h2>  <br><form>  <br><label for="name">Name:</label>  <br><input type="text" id="name" name="name" required>  <br><br><label for="email">Email:</label>  <br><input type="email" id="email" name="email" required>  <br><br><label for="message">Message:</label>  <br><textarea id="message" name="message" required></textarea>  <br><br><button type="submit">Send Message</button>  <br></form>  <br></section>  <br><br><footer>  <br><p>© 2023 My Portfolio</p>  <br></footer>  <br><br><script src="script.js"></script>  <br></body>  <br></html>  <br></span></b></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><a href="https://www.geeksforgeeks.org/how-to-make-a-website-using-chatgpt/" target="_blank" class="ke-link">https://www.geeksforgeeks.org/how-to-make-a-website-using-chatgpt/</a></b></span></p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>HTML</b></span></p>
<!-- -->]]>
카페 게시글
검색이 허용된 게시물입니다.
다음검색
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default
https://www.google.com/search?client=avast-a-1&sca_esv=583328628&sxsrf=AM9HkKlEDx3fEY0VD8KBcsVnCZHpuCplOw:1700224924188&q=How+I+Built+a+Complete+Website+Using+ChatGPT+%7C+Make+Website+Easily+With+AI&tbm=isch&source=univ&fir=m3wX_97GzOKfpM%252C0wnwxSoUtx6_xM%252C_%253BKPm6oQasl10CqM%252CwbuLmJvL6Vg5sM%252C_%253BS4ArnNDbh0U2gM%252CwbuLmJvL6Vg5sM%252C_%253B4XUor63VdEURSM%252CZ9Htp-m11Hu2uM%252C_%253BgBQD_P0Bv13AtM%252Cyw6JSBh7HvBFzM%252C_%253B1kG9VRXKLk9RkM%252Cyw6JSBh7HvBFzM%252C_%253BcdjSKUe3Q_qmvM%252CwbuLmJvL6Vg5sM%252C_%253B27RSr9ekELdPCM%252C4u7lW3A-Abd3PM%252C_%253B7-J65lZ1nUhfOM%252CiKytq