Last active
April 26, 2023 00:48
-
-
Save palevell/08dc1b709472951dadae70bde46976c9 to your computer and use it in GitHub Desktop.
ChatGPT Responsive Home Page #1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta charset="UTF-8"> | |
| <title>My Blog Homepage</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <div class="logo-container"> | |
| <img src="logo.png" alt="Logo"> | |
| </div> | |
| <div class="menu-container"> | |
| <ul class="menu"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| <div class="hamburger" onclick="toggleMenu()"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="hero-container"> | |
| <div class="hero-content"> | |
| <h1>Welcome to My Blog</h1> | |
| <p>Discover exciting articles on various topics</p> | |
| <a href="#" class="cta-button">Read More</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="card-container"> | |
| <div class="card"> | |
| <img src="card1.png" alt="Card 1"> | |
| <h2>Article Title 1</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra venenatis enim.</p> | |
| </div> | |
| <div class="card"> | |
| <img src="card2.png" alt="Card 2"> | |
| <h2>Article Title 2</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra venenatis enim.</p> | |
| </div> | |
| <div class="card"> | |
| <img src="card3.png" alt="Card 3"> | |
| <h2>Article Title 3</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra venenatis enim.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| function toggleMenu() { | |
| var menu = document.getElementsByClassName("menu")[0]; | |
| menu.classList.toggle("active"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* General Styles */ | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| margin: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| /* Navbar Styles */ | |
| nav { | |
| background-color: white; | |
| z-index: 999; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .logo-container { | |
| float: left; | |
| padding: 20px; | |
| } | |
| .menu-container { | |
| float: right; | |
| padding: 20px; | |
| } | |
| .menu { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .menu li { | |
| margin: 0 10px; | |
| } | |
| .hamburger { | |
| display: none; | |
| } | |
| @media only screen and (max-width: 767px) { | |
| .menu { | |
| display: none; | |
| } | |
| .hamburger { | |
| display: block; | |
| cursor: pointer; | |
| padding: 20px; | |
| } | |
| .hamburger span { | |
| display: block; | |
| width: 30px; | |
| height: 4px; | |
| background-color: black; | |
| margin-bottom: 5px; | |
| } | |
| .menu.active { | |
| display: block; | |
| } | |
| } | |
| /* Hero Styles */ | |
| .hero-container { | |
| background-image: url('hero-bg.jpg'); | |
| background-position: center; | |
| background-size: cover; | |
| height: calc(100vh - 70px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero-content { | |
| text-align: center; | |
| color: white; | |
| } | |
| .hero-content h1 { | |
| font-size: 3rem; | |
| margin-bottom: 20px; | |
| } | |
| .hero-content p { | |
| font-size: 1.2rem; | |
| margin-bottom: 20px; | |
| } | |
| .cta-button { | |
| background-color: #03a9f4; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| } | |
| /* Card Styles */ | |
| .card-container { | |
| display: flex; | |
| justify-content: space-between; | |
| margin: 50px; | |
| } | |
| .card { | |
| background-color: #f5f5f5; | |
| box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); | |
| text-align: center; | |
| padding: 20px; | |
| width: 30%; | |
| margin: 0 10px; | |
| } | |
| .card img { | |
| width: 100%; | |
| max-height: 200px; | |
| object-fit: cover; | |
| margin-bottom: 20px; | |
| } | |
| .card h2 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment