Bhairahawa Multiple Campus

Demo questions

Practice rounds for the contest: ten core programs in C, ten output prediction puzzles, and five design tasks built with HTML and CSS.

start practicing about the contest

0 core programs

0 output puzzles

0 design tasks

Practice questions from Code Olympiad 2081.

Core Programming

10 questions

Here you can learn about core programming concepts such as algorithms, data structures, and more!

q01

Question 1: Write a function to find the factorial of a number.

#include <stdio.h>
    // Function to calculate factorial
    unsigned long long factorial(int n) {
        if (n < 0) {
            printf("Factorial is not defined for negative numbers.\\n");
            return 0;
        }
        unsigned long long result = 1;
        for (int i = 1; i <= n; i++) {
            result *= i;
        }
        return result;
    }
    
    int main() {
        int num;
        printf("Enter a number to find its factorial: ");
        scanf("%d", &num);
    
        unsigned long long fact = factorial(num);
        if (fact != 0) {
            printf("The factorial of %d is %llu\\n", num, fact);
        }
        return 0;
    }

q02

Question 2: Write a function to check if a number is prime.

#include <stdio.h>
    
    int isPrime(int n) {
        if (n < 2) {
            return 0;
        }
        for (int i = 2; i * i <= n; i++) {
            if (n % i == 0) {
                return 0;
            }
        }
        return 1;
    }
    
    int main() {
        int num;
        printf("Enter a number: ");
        scanf("%d", &num);
    
        if (isPrime(num)) {
            printf("%d is prime.\\n", num);
        } else {
            printf("%d is not prime.\\n", num);
        }
        return 0;
    }

q03

Question 3: Write a function to reverse a string.

#include <stdio.h>
    #include <string.h>
    
    void reverseString(char str[]) {
        int n = strlen(str);
        for (int i = 0; i < n / 2; i++) {
            char temp = str[i];
            str[i] = str[n - i - 1];
            str[n - i - 1] = temp;
        }
    }
    
    int main() {
        char str[100];
        printf("Enter a string: ");
        scanf("%s", str);
    
        reverseString(str);
        printf("Reversed string: %s\\n", str);
        return 0;
    }

q04

Question 4: Write a function to find the maximum of two numbers.

#include <stdio.h>
    
    int max(int a, int b) {
        return (a > b) ? a : b;
    }
    
    int main() {
        int num1, num2;
        printf("Enter two numbers: ");
        scanf("%d %d", &num1, &num2);
    
        printf("The maximum number is: %d\\n", max(num1, num2));
        return 0;
    }

q05

Question 5: Write a function to find the sum of an array of numbers.

#include <stdio.h>
    
    int sumArray(int arr[], int size) {
        int sum = 0;
        for (int i = 0; i < size; i++) {
            sum += arr[i];
        }
        return sum;
    }
    
    int main() {
        int arr[] = {1, 2, 3, 4, 5};
        int size = sizeof(arr) / sizeof(arr[0]);
    
        printf("Sum of array elements: %d\\n", sumArray(arr, size));
        return 0;
    }

q06

Question 6: Write a function to find the Fibonacci sequence up to a given number.

#include <stdio.h>
    
    void fibonacci(int n) {
        int a = 0, b = 1, next;
        for (int i = 0; i < n; i++) {
            printf("%d ", a);
            next = a + b;
            a = b;
            b = next;
        }
    }
    
    int main() {
        int n;
        printf("Enter a number: ");
        scanf("%d", &n);
    
        fibonacci(n);
        return 0;
    }

q07

Question 7: Write a function to find the length of a string.

#include <stdio.h>
    #include <string.h>
    
    int stringLength(char str[]) {
        return strlen(str);
    }
    
    int main() {
        char str[100];
        printf("Enter a string: ");
        scanf("%s", str);
    
        printf("Length of the string: %d\\n", stringLength(str));
        return 0;
    }

q08

Question 8: Write a function to count the number of vowels in a string.

#include <stdio.h>>
    #include <string.h>
    
    int countVowels(char str[]) {
        int count = 0;
        for (int i = 0; i < strlen(str); i++) {
            if (str[i] == 'a' || str[i] == 'e' || str[i] == 'i' || str[i] == 'o' || str[i] == 'u' || 
                str[i] == 'A' || str[i] == 'E' || str[i] == 'I' || str[i] == 'O' || str[i] == 'U') {
                count++;
            }
        }
        return count;
    }
    
    int main() {
        char str[100];
        printf("Enter a string: ");
        scanf("%s", str);
    
        printf("Number of vowels: %d\\n", countVowels(str));
        return 0;
    }

q09

Question 9: Write a function to check if a string is a palindrome.

#include <stdio.h>
    #include <string.h>
    
    int isPalindrome(char str[]) {
        int len = strlen(str);
        for (int i = 0; i < len / 2; i++) {
            if (str[i] != str[len - i - 1]) {
                return 0;
            }
        }
        return 1;
    }
    
    int main() {
        char str[100];
        printf("Enter a string: ");
        scanf("%s", str);
    
        if (isPalindrome(str)) {
            printf("The string is a palindrome.\\n");
        } else {
            printf("The string is not a palindrome.\\n");
        }
        return 0;
    }

q10

Question 10: Write a function to calculate the power of a number.

#include <stdio.h>
    
    double power(double base, int exponent) {
        double result = 1;
        for (int i = 0; i < exponent; i++) {
            result *= base;
        }
        return result;
    }
    
    int main() {
        double base;
        int exponent;
        printf("Enter base and exponent: ");
        scanf("%lf %d", &base, &exponent);
    
        printf("Result: %lf\\n", power(base, exponent));
        return 0;
    }

Output Prediction

10 questions

In this section, we focus on predicting the output of various code examples in different languages.

q01

Question 1

#include <stdio.h>
int main() {
    int num = 6;
    if(num){
        printf("num");
    }
    else{
        printf("%d",num);
    }
    return 0;
}

output num

q02

Question 2

#include <stdio.h>
int main() {
    int num = 5;
    printf("%d", num++);
    return 0;
}

output 5

q03

Question 3

#include <stdio.h>
int main() {
    int x = 10;
    if (x = 5) {
        printf("True");
    } else {
        printf("False");
    }
    return 0;
}

output True

q04

Question 4

#include <stdio.h>
int main() {
    int x = 5;
    int y = 10;
    if (x == 5 && y == 10) {
        printf("Both are correct");
    } else {
        printf("One is incorrect");
    }
    return 0;
}

output Both are correct

q05

Question 5

#include <stdio.h>
int main() {
    char str[] = "Hello";
    printf("%c", str[1]);
    return 0;
}

output e

q06

Question 6

#include <stdio.h>
int main() {
    int num = 0;
    if (num) {
        printf("True");
    } else {
        printf("False");
    }
    return 0;
}

output False

q07

Question 7

#include <stdio.h>
int main() {
    int x = 5;
    printf("%d", ++x + x++); 
    return 0;
}

output 11

q08

Question 8

#include <stdio.h>
int main() {
    int a = 10;
    int b = 20;
    if (a++ == 10 && ++b == 21) {
        printf("Condition True");
    } else {
        printf("Condition False");
    }
    return 0;
}

output Condition True

q09

Question 9

#include <stdio.h>
int main() {
    int i = 10;
    int sum = 0;
    while (i-- > 0) {
        sum += i;
    }
    printf("%d", sum);
    return 0;
}

output 45

q10

Question 10

#include <stdio.h>
int main() {
    int x = 5, y = 2;
    x *= y++;
    printf("%d", x);
    return 0;
}

output 10

Design

5 tasks

This section is all about designing user interfaces and enhancing visual experience using html and css.

design 1

Form

open preview

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sign Up / Registration Form </title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Roboto;
            background-repeat: no-repeat;
            background-size: cover;
            background: linear-gradient(120deg, #007bff, #d0314c);
            height: 100vh;
            overflow: hidden;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 29vw;
            background: white;
            border-radius: 10px;
        }

        .center h1 {
            text-align: center;
            padding: 0 0 20px 0;
            border-bottom: 1px solid silver;
        }

        .center form {
            padding: 0 40px;
            box-sizing: border-box;
        }

        form .txt_field {
            position: relative;
            border-bottom: 2px solid #adadad;
            margin: 30px 0;
        }

        .txt_field input {
            width: 100%;
            padding: 0 5px;
            height: 40px;
            font-size: 16px;
            border: none;
            background: none;
            outline: none;
        }

        .txt_field label {
            position: absolute;
            top: 50%;
            left: 5px;
            color: #adadad;
            transform: translateY(-50%);
            font-size: 16px;
            pointer-events: none;
        }

        .txt_field span::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 0;
            width: 0px;
            height: 2px;
            background: #2691d9;
            transition: .5s;
        }

        .txt_field input:focus~label,
        .txt_field input:valid~label {
            top: -5px;
            color: #2691d9;
        }

        .txt_field input:focus~span::before,
        .txt_field input:Valid~span::before {
            width: 100%;
        }

        .pass {
            margin: -5px 0 20px 5px;
            color: #a6a6a6;
            cursor: pointer;
        }

        .pass:hover {
            text-decoration: underline;
        }

        input[type="Submit"] {
            width: 100%;
            height: 50px;
            border: 1px solid;
            border-radius: 25px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;

        }

        input[type="Submit"]:hover {
            background: #2691d9;
            color: #e9f4fb;
            transition: .5s;
        }

        .signup_link {
            margin: 30px 0;
            text-align: center;
            font-size: 16px;
            color: #666666;
        }

        .signup_link a {
            color: #2691d9;
            text-decoration: none;
        }

        .signup_link a:hover {
            text-decoration: underline;
        }

        .HomeAbout {
            width: 100vw;
            height: 25vh;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="center">
            <h1>Register</h1>
            <form method="POST" action="">
                <div class="txt_field">
                    <input type="text" name="name" required>
                    <span></span>
                    <label>Name</label>
                </div>
                <div class="txt_field">
                    <input type="email" name="email" required>
                    <span></span>
                    <label>Email</label>
                </div>
                <div class="txt_field">
                    <input type="password" name="password" required>
                    <span></span>
                    <label>Password</label>
                </div>
                <div class="txt_field">
                    <input type="password" name="cpassword" required>
                    <span></span>
                    <label>Confirm Password</label>
                </div>
                <input name="submit" type="Submit" value="Sign Up">
                <div class="signup_link">
                    Have an Account ? <a href="#">Login Here</a>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

design 2

Footer

open preview

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer</title>
    <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .footer {
            background-color: black;
            color: #fefefe;
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
        }

        .footer .heading {
            color: #fefefe;
            max-width: 1010px;
            width: 90%;
            text-transform: uppercase;
            margin: 0 auto;
            margin-bottom: 3rem;
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        }

        .footer .content {
            display: flex;
            justify-content: space-evenly;
            margin: 1.5rem;
        }

        .footer .content p {
            margin-bottom: 1.3rem;
        }

        .footer .content a {
            text-decoration: none;
            color: #fefefe;
        }

        .footer .content a:hover {
            border-bottom: 1px solid #971717;
        }

        .footer .content h4 {
            margin-bottom: 1.3rem;
            font-size: 19px;
        }

        footer {
            text-align: center;
            margin-bottom: 2rem;
        }

        footer hr {
            margin: 2rem 0;
        }

        @media (max-width: 767px) {
            .footer .content {
                display: flex;
                flex-direction: column;
                font-size: 14px;
            }

            .footer {
                position: unset;
            }
        }

        @media (min-width: 768px) and (max-width: 1024px) {
            .footer .content,
            .footer {
                font-size: 14px;
            }
        }

        @media (orientation: landscape) and (max-height: 500px) {
            .footer {
                position: unset;
            }
        }
    </style>
</head>

<body>
    <div class="footer">
        <div class="heading">
            <h2>Arun<sup>Γäó</sup></h2>
        </div>
        <div class="content">
            <div class="services">
                <h4>Services</h4>
                <p><a href="#">App development</a></p>
                <p><a href="#">Web development</a></p>
                <p><a href="#">DevOps</a></p>
                <p><a href="#">Web designing</a></p>
            </div>
            <div class="social-media">
                <h4>Social</h4>
                <p>
                    <a href="#"><i class="fab fa-linkedin"></i> Linkedin</a>
                </p>
                <p>
                    <a href="#"><i class="fab fa-twitter"></i> Twitter</a>
                </p>
                <p>
                    <a href="https://github.com/arundada9000"><i class="fab fa-github"></i> Github</a>
                </p>
                <p>
                    <a href="https://www.facebook.com/arunneupane9000"><i class="fab fa-facebook"></i> Facebook</a>
                </p>
                <p>
                    <a href="https://www.instagram.com/arundada9000"><i class="fab fa-instagram"></i> Instagram</a>
                </p>
            </div>
            <div class="links">
                <h4>Quick links</h4>
                <p><a href="#">Home</a></p>
                <p><a href="#">About</a></p>
                <p><a href="#">Blogs</a></p>
                <p><a href="#">Contact</a></p>
            </div>
            <div class="details">
                <h4 class="address">Address</h4>
                <p>
                    Bhairahawa, Dadagau-8, Rupandehi, Nepal
                </p>
                <h4 class="mobile">Mobile</h4>
                <p><a href="#">+9779811420975</a></p>
                <h4 class="mail">Email</h4>
                <p><a href="#">bmcitclub01@gmail.com</a></p>
            </div>
        </div>
        <footer>
            <hr />
            ┬⌐ 2022 BMC IT Club.
        </footer>
    </div>
</body>

</html>

design 3

Modal

open preview

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Modal Popup Window</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
        html,
        body {
            height: 100%;
        }

        html {
            font-size: 18px;
            line-height: 1.4;
        }

        body {
            font-family: "Segoe UI";
            font-weight: 600;
            background-image: linear-gradient(#e66465, #9198e5);
            color: black;
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .container {
            display: grid;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .modal-window {
            position: fixed;
            background-color: rgba(255, 255, 255, 0.25);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s;
        }

        .modal-window:target {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        .modal-window>div {
            border-radius: 1rem;
        }

        .modal-window div:not(:last-of-type) {
            margin-bottom: 15px;
        }

        .btn {
            background-color: white;
            padding: 1em 1.5em;
            border-radius: 0.5rem;
            text-decoration: none;
        }

        button {
            font: inherit;
        }

        *::-webkit-scrollbar {
            background-color: transparent;
            width: 12px;
        }

        *::-webkit-scrollbar-thumb {
            border-radius: 99px;
            background-color: #ddd;
            border: 4px solid #fff;
        }

        .modal-container {
            max-height: 90vh;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: #fff;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 600px) {
            .modal-container {
                width: 90%;
            }
        }

        .modal-container-header {
            padding: 16px 32px;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-container-title {
            display: flex;
            align-items: center;
            gap: 8px;
            line-height: 1;
            font-weight: 700;
            font-size: 1.125;
        }

        .modal-container-body {
            padding: 24px 32px 51px;
            overflow-y: auto;
        }

        .modal-container-footer {
            padding: 20px 32px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            border-top: 1px solid #ddd;
            gap: 12px;
            position: relative;
        }

        .modal-container-footer:after {
            content: "";
            display: block;
            position: absolute;
            top: -51px;
            left: 24px;
            right: 24px;
            height: 50px;
            flex-shrink: 0;
            background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);
            pointer-events: none;
        }

        .button {
            padding: 12px 20px;
            border-radius: 8px;
            background-color: transparent;
            border: 0;
            font-weight: 600;
            cursor: pointer;
            transition: 0.15s ease;
        }

        .button.is-ghost:hover,
        .button.is-ghost:focus {
            background-color: #dfdad7;
        }

        .button.is-primary {
            background-color: #e66465;
            color: #fff;
        }

        .button.is-primary:hover,
        .button.is-primary:focus {
            background-color: #db4848;
        }

        .icon-button {
            padding: 0;
            border: 0;
            background-color: transparent;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            cursor: pointer;
            border-radius: 8px;
            transition: 0.15s ease;
        }

        .icon-button svg {
            width: 24px;
            height: 24px;
        }

        .icon-button:hover,
        .icon-button:focus {
            background-color: #dfdad7;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="interior">
            <a class="btn" href="#open-modal">Terms and Conditions</a>
        </div>
    </div>
    <div id="open-modal" class="modal-window">
        <div>
            <article class="modal-container">
                <header class="modal-container-header">
                    <h1 class="modal-container-title">
                        Terms and Conditions
                    </h1>
                    <button class="icon-button" onclick="location.href='#';">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path fill="currentColor"
                                d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
                        </svg>
                    </button>
                </header>
                <section class="modal-container-body">
                    <h2>Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si
                        luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor </p>

                    <h3>Ut proverbia non nulla veriora sint quam vestra dogmata.</h3>

                    <p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera
                        cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec
                        necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per
                        me nihilo, si potest; </p>

                    <p>Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur?
                        Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit;
                        Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, </p>

                    <h2>An hoc usque quaque, aliter in vita?</h2>
                    <ol>
                        <li>Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.</li>
                        <li>Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.</li>
                        <li>Certe nihil nisi quod possit ipsum propter se iure laudari.</li>
                        <li>Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad
                            naturam videntur.</li>
                    </ol>

                    <p>Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae
                        ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat.
                        Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. </p>

                    <h3>Claudii libidini, qui tum erat summo ne imperio, dederetur.</h3>

                    <p>Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute,
                        ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum
                        amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere
                        naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non
                        contra leges, sed etiam legibus partam. </p>

                    <h2>Sed nimis multa.</h2>

                    <p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre
                        incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. </p>

                </section>
                <footer class="modal-container-footer">
                    <button class="button is-ghost">Decline</button>
                    <button class="button is-primary">Accept</button>
                </footer>
            </article>
        </div>
    </div>
</body>

</html>

design 4

Landing page

open preview

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,300;1,700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        section {
            position: relative;
            width: 100%;
            min-width: 100vh;
            padding: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
        }

        header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header .logo {
            position: relative;
            max-width: 80px;
        }

        header ul {
            position: relative;
            display: flex;
        }

        header ul li {
            list-style: none;
        }

        header ul li a {
            display: inline-block;
            color: #333;
            font-weight: 800;
            margin-left: 40px;
            text-decoration: none;
        }

        .container {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .text-box {
            position: relative;
            max-width: 600px;
        }

        .container .text-box h2 {
            color: #333;
            font-size: 4em;
            font-weight: 500px;
        }

        .container .text-box h2 span {
            color: #017143;
            font-size: 1.2em;
            font-weight: 900;
        }

        .container .text-box p {
            color: #333;
        }

        .container .text-box a {
            display: inline-block;
            margin-top: 20px;
            padding: 8px 20px;
            background: #017143;
            color: #fff;
            border-radius: 40px;
            font-weight: 500;
            letter-spacing: 1px;
            text-decoration: none;
        }

        .container .img-box {
            width: 600px;
            display: flex;
            justify-content: flex-end;
            padding-right: 50px;
            margin-top: 50px;
        }

        .container .img-box img {
            max-width: 340px;
        }

        .thumb {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            display: flex;
        }

        .thumb li {
            list-style: none;
            display: inline-block;
            margin: 0 20px;
            padding: ;
            cursor: pointer;
            transition: 0.5s;
        }

        .thumb li:hover {
            transform: translateY(-15px);
        }

        .thumb li img {
            max-width: 600px;
        }

        .social {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .social li {
            list-style: none;
        }

        .social li a {
            display: inline-block;
            margin: 5px 0;
            transform: scale(0.6);
            filter: invert(1);
        }

        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #017143;
            clip-path: circle(600px at right 800px);
        }
    </style>
    <title>Starbucks Coffee Website Landing Page</title>
</head>

<body>
    <section>
        <div class="circle"></div>
        <header>
            <a href="#"><img src="./images/starbucks-logo.png" class="logo"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">What's New</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="container">
            <div class="text-box">
                <h2>Its not just a Coffee <br>Its <span>Starbucks</span></h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor modi consequatur nulla, fugit odit
                    rerum quaerat illo at! Nihil velit tempore debitis. Doloribus quasi perspiciatis fuga nulla
                    aspernatur necessitatibus adipisci.</p>
                <a href="#">learn More</a>
            </div>
            <div class="img-box">
                <img src="./images/img1.png" class="starbucks" alt="">
            </div>
        </div>
        <ul class="thumb">
            <li><img src="./images/thumb1.png"
                    onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img1.png');changeCircleColor('#017143')">
            </li>
            <li><img src="./images/thumb2.png"
                    onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img2.png');changeCircleColor('#0eb7495')">
            </li>
            <li><img src="./images/thumb3.png"
                    onclick="imgSlider('https://raw.githubusercontent.com/farazc60/Project-Images/main/starbucks/img3.png');changeCircleColor('#d752b1')">
            </li>
        </ul>
        <ul class="social">
            <li><a href="#"><img src="./images/facebook.png"></a>
            </li>
            <li><a href="#"><img src="./images/instagram.png"></a>
            </li>
            <li><a href="#"><img src="./images/twitter.png"></a>
            </li>
        </ul>
    </section>
    <script src="script.js"></script>
</body>

</html>

design 5

Blog card

open preview

html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Responsive Blog Card</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <style>
    @import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');

    :root {
      --color: #3c3163;
      --transition-time: 0.5s;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Open Sans';
      background: #fafafa;
    }

    a {
      color: inherit;
    }

    .cards-wrapper {
      display: grid;
      justify-content: center;
      align-items: center;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 4rem;
      padding: 4rem;
      margin: 0 auto;
      width: max-content;
    }

    .card {
      font-family: 'Heebo';
      --bg-filter-opacity: 0.5;
      background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))), var(--bg-img);
      height: 20em;
      width: 15em;
      font-size: 1.5em;
      color: white;
      border-radius: 1em;
      padding: 1em;
      /*margin: 2em;*/
      display: flex;
      align-items: flex-end;
      background-size: cover;
      background-position: center;
      box-shadow: 0 0 5em -1em black;
      transition: all, var(--transition-time);
      position: relative;
      overflow: hidden;
      border: 10px solid #ccc;
      text-decoration: none;
    }

    .card:hover {
      transform: rotate(0);
    }

    .card h1 {
      margin: 0;
      font-size: 1.5em;
      line-height: 1.2em;
    }

    .card p {
      font-size: 0.75em;
      font-family: 'Open Sans';
      margin-top: 0.5em;
      line-height: 2em;
    }

    .card .tags {
      display: flex;
    }

    .card .tags .tag {
      font-size: 0.75em;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 0.3rem;
      padding: 0 0.5em;
      margin-right: 0.5em;
      line-height: 1.5em;
      transition: all, var(--transition-time);
    }

    .card:hover .tags .tag {
      background: var(--color);
      color: white;
    }

    .card .date {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.75em;
      padding: 1em;
      line-height: 1em;
      opacity: .8;
    }

    .card:before,
    .card:after {
      content: '';
      transform: scale(0);
      transform-origin: top left;
      border-radius: 50%;
      position: absolute;
      left: -50%;
      top: -50%;
      z-index: -5;
      transition: all, var(--transition-time);
      transition-timing-function: ease-in-out;
    }

    .card:before {
      background: #ddd;
      width: 250%;
      height: 250%;
    }

    .card:after {
      background: white;
      width: 200%;
      height: 200%;
    }

    .card:hover {
      color: var(--color);
    }

    .card:hover:before,
    .card:hover:after {
      transform: scale(1);
    }

    .card-grid-space .num {
      font-size: 3em;
      margin-bottom: 1.2rem;
      margin-left: 1rem;
    }

    .info {
      font-size: 1.2em;
      display: flex;
      padding: 1em 3em;
      height: 3em;
    }

    .info img {
      height: 3em;
      margin-right: 0.5em;
    }

    .info h1 {
      font-size: 1em;
      font-weight: normal;
    }

    /* MEDIA QUERIES */
    @media screen and (max-width: 1285px) {
      .cards-wrapper {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media screen and (max-width: 900px) {
      .cards-wrapper {
        grid-template-columns: 1fr;
      }

      .info {
        justify-content: center;
      }

      .card-grid-space .num {
        margin-left: 0;
        text-align: center;
      }
    }

    @media screen and (max-width: 500px) {
      .cards-wrapper {
        padding: 4rem 2rem;
      }

      .card {
        max-width: calc(100vw - 4rem);
      }
    }

    @media screen and (max-width: 450px) {
      .info {
        display: block;
        text-align: center;
      }

      .info h1 {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <section class="cards-wrapper">
    <div class="card-grid-space">
      <div class="num">01</div>
      <a class="card" style="--bg-img: url('./images/squid-game-loader.png')">
        <div>
          <h1>Squid Game Loaders</h1>
          <p>Loaders are one of the classic components used to create an attractive websiteΓÇª</p>
          <div class="date">22 July 2022</div>
          <div class="tags">
            <div class="tag">CSS</div>
          </div>
        </div>
      </a>
    </div>
    <div class="card-grid-space">
      <div class="num">02</div>
      <a class="card" style="--bg-img: url('./images/glowing.png')">
        <div>
          <h1>Glowing Pulse Search Bar</h1>
          <p>When it comes to website elements that are beautiful and must-havesΓÇª</p>
          <div class="date">13 July 2022</div>
          <div class="tags">
            <div class="tag">CSS</div>
          </div>
        </div>
      </a>
    </div>
    <div class="card-grid-space">
      <div class="num">03</div>
      <a class="card" style="--bg-img: url('./images/digitalclock.png')">
        <div>
          <h1>Digital Clock</h1>
          <p>A digital clock means it shows time in number formatΓÇª</p>
          <div class="date">12 July 2022</div>
          <div class="tags">
            <div class="tag">CSS</div>
          </div>
        </div>
      </a>
    </div>
  </section>
</body>

</html>