Quora Clone Website | TemplateXYZ

Seeking assistance to create a Quora clone website. Need guidance on essential features, programming languages, and frameworks. Thanks!

Asked by: Hacker_Boy
html css javascript

Answers:

You can use this code for your project.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Quora Clone</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Quora</div>
            <div class="menu-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Explore</a></li>
                <li><a href="#">Notifications</a></li>
                <li><a href="#">Profile</a></li>
            </ul>
        </nav>
    </header>

    <div class="post">
        <div class="profile">
            <img src="https://via.placeholder.com/50" alt="Profile Picture">
            <div class="profile-info">
                <h4>John Doe</h4>
                <p>June 14, 2023</p>
            </div>
            <div class="menu-dots"></div>
        </div>
        <div class="post-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet risus vitae felis sagittis, a pretium risus scelerisque.</p>
            <img src="https://via.placeholder.com/400" alt="Post Image">
        </div>
        <div class="post-actions">
            <button class="like-button">Like</button>
            <button class="comment-button">Comment</button>
            <button class="share-button">Share</button>
        </div>
    </div>

    <div class="answer-editor">
        <textarea placeholder="Write your answer..."></textarea>
        <button class="submit-button">Submit</button>
    </div>

    <footer>
        <p>&copy; 2023 Quora Clone. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

CSS code (style.css):

/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Header Styles */
header {
    background-color: #F44336;
    padding: 10px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.menu-icon {
    display: none;
    cursor: pointer;
}

.menu-icon span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: white;
    margin-bottom: 6px;
}

.menu {
    display: flex;
    list-style-type: none;
}

.menu li {
    margin-left: 20px;
}

.menu li a {
    color: white;
    text-decoration: none;
}

/* Post Styles */
.post {
    margin: 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile {
    display: flex;
    align-items: center;
}

.profile img {
    border-radius: 50%;
    margin-right: 10px;
}

.profile-info h4 {
    margin: 0;
}

.post-content p {
    margin: 10px 0;
}

.post-actions {
    margin-top: 10px;
}

.like-button, .comment-button, .share-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    background-color: #F44336;
    cursor: pointer;
}

/* Answer Editor Styles */
.answer-editor {
    margin: 20px;
}

.answer-editor textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #CCC;
    padding: 10px;
    resize: none;
}

.answer-editor .submit-button {
    margin-top: 10px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    background-color: #F44336;
    cursor: pointer;
}

/* Footer Styles */
footer {
    background-color: #F44336;
    color: white;
    padding: 10px;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu {
        display: none;
    }

    .menu-icon {
        display: block;
    }

    .menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 10px;
        background-color: #F44336;
        padding: 10px;
        border-radius: 4px;
    }

    .menu.active li {
        margin: 10px 0;
    }
}

JavaScript code (script.js):

// Toggle mobile menu
const menuIcon = document.querySelector('.menu-icon');
const menu = document.querySelector('.menu');

menuIcon.addEventListener('click', () => {
    menu.classList.toggle('active');
});
Answered by: Wouadud Al Reon

Answer:

Related Pages: