Responsive Club Website (CSS)

Not quite sure how I did here but, this is my club page focused on Pokemon Go
Pokemon Go Club Webpage
I even did different color schemes but I could still do some work on my media queries

Hi Guys,

I tried my best to create this responsive website.
Please take a look: Responsive Club Website (dineshbalaji-s.github.io)

Hey all,

Here is my second project that I submit, I have a long way to go, but I think I am making good progress.

Here’s my site: O'Tigers
Here’s my code: GitHub - BobRo55/local_team

Share your feedback :smiley:

1 Like

hello everyone,
I tried small responsive website,
please give feedback on that.

my github site : Document

Hi, I attempted a responsive website
Club Page

This is my page

I love the color palette, and great hover effect on images and icons!

1 Like

This time I finished much faster.
This is my live version
This is my github code

Any feedback appreciate

Hello! For this project, I created a Studio Ghibli Club responsive homepage. Check out the README file on my GitHub to see screenshots of my website from desktop, tablet, and mobile views. Let me know what you think! :smile:

Hi everyone :slight_smile:

I’d love some feedback on this project. I struggled a lot on the last project using flex box, but this time around I finally have a fully responsive site (I think?)!

Live site: Brunswick Chess Club
Github Repository:My repository

Thank you to anyone who provides any feedback !

hello, this is my project for a responsive web site

https://trikumia.github.io/athensbookclub/

<!DOCTYPE html>
<HTML>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1" >
        <link href="./styles.css" rel="stylesheet">
        <title>A. B. C.</title>

    </head>
    <body>
        <nav>
            <div class="container">
                <div class="navContainer">
                    <ul>
                        <li><a href="#ABC">Home</a></li>
                        <li><a href="#EVENTS">Events</a></li>
                        <li><a href="#CONTACT">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <header>
            <div class="container">
                <div class="headerContainer">
                    <div class="headerTitle" id="ABC"><h1>Athens Book Club</h1></div>
                <div class="headerArticle"><p><span>A.B.C.</span> is a group of people who love to read and discuss about books.<br/>You can come and visit our place, and join our group.
                <br/>Bring your books together, your smile and your good mood.<br/>It's always time to read and relax!</p></div>
            </div>


        </header>
        <main>
            <div class="container">
                <div class="books">
                    <h2>Latest Book Readings</h2>
                    <div class="book1">
                        <div class="bookTitle">
                            <h3>Cloud Atlas</h3>
                        </div>
                        <div class="bookDescription">
                            <p><i>Cloud Atlas</i> is a polyphonic compendium of interlacing but nonlinear parables.
                                Divided into six different accounts spanning several centuries, Mitchell ranges from
                                 the journal of a 19th-century American notary to the post-apocalyptic memoir of a herdsman,
                                  Zachry. Each testament breaches time and space.</p>
                        </div>
                    </div>
                    <div class="book2">
                        <div class="bookTitle">
                            <h3>Lord of the Flies</h3>
                        </div>
                        <div class="bookDescription">
                            <p><i>Lord of the Flies</i>, novel by William Golding, published in 1954. 
                                The book explores the dark side of human nature and stresses the importance of 
                                reason and intelligence as tools for dealing with the chaos of existence. 
                                In the novel, children are evacuated from Britain because of a nuclear war. 
                                One airplane, with adults and prep-school boys as passengers, crashes on an 
                                uninhabited island, and all the adults are killed. As the boys fashion their own society,
                                 their attempts at establishing a social order gradually devolve into savagery.</p>
                        </div>                        
                    </div>
                    <div class="book3">
                        <div class="bookTitle">
                            <h3>The Phantom of the Opera</h3>
                        </div>
                        <div class="bookDescription">
                            <p><i>The Phantom of the Opera</i> tells the tale of a disfigured musical genius who haunts 
                                the Paris Opera House. Mesmerised by the talents and beauty of the young soprano
                                 Christine, the Phantom lures her as his protégé and falls fiercely in love with her.
                                  When’s Christine childhood sweetheart comes back into her life, the Phantom’s 
                                  obsession sets the scene for a dramatic turn of events where jealousy, 
                                  madness and passions collide.</p>
                        </div>                        
                    </div>
                </div>
                <div class="events" id="EVENTS">
                    <h2>Events</h2>
                    <div class="event1">
                        <div class="eventTitle">
                            <h3>Book Presentation</h3>
                        </div>
                        <div class="eventDescription">
                            <p><strong>Jo Nesbo</strong>, the famous author of Harry Hole stories, is here for you.
                                Take your chance to meet him and hear about his new book release <i>The Night House</i>, that
                                will be presented from the author.
                                You can find the new book in our place or bring yours and get your signature from the author.
                            You can ask your questions about the book and get to know Jo Nesbo, the most successful Norwegian
                        author of all time!  </p>
                        </div>                        
                    </div>
                    <div class="event2">
                        <div class="eventTitle">
                            <h3>Meet Robin Hobb Author </h3>
                        </div>
                        <div class="eventDescription">
                            <p><strong>Robin Hobb</strong> is comming to Greece! Meet the author in our place and bring your books for signature. 
                                For those who does not know her, Robin Hobb is best known for her fantasy novels and <i>The Realm of the Elderlings</i> series.</p>
                        </div>                            
                    </div>
                    <div class="event3">
                        <div class="eventTitle">
                            <h3>Book Bazaar</h3>
                        </div>
                        <div class="eventDescription">
                            <p>It is time for all the book lovers to meet again! Our love and passion about reading is endless.
                                 This event will have lots of books for all tastes, but this is not all. 
                                 You will get the chance to meet and talk with authors you love. We are looking forward to meet you all!</p>
                        </div>    
                    </div>
                </div>
                <div class="articles">
                    <h2>About Βooks...</h2>
                    <div class="article">
                        <div class="articleTitle">
                            <h3>Comming Soon...</h3>
                        </div>
                        <div class="articleContent">
                            <div class="articleDescription">
                                <p>New story of Harry Hole is comming for the fans!</p>
                            </div>
                            <div class="articleIMG">
                                <img src="./resources/aung-soe-min-f6UX-It1N7g-unsplash.jpg">
                            </div>  
                        </div>                           
                    </div>
                    <div class="article">
                        <div class="articleTitle">
                            <h3>The Good About Reading</h3>
                        </div>
                        <div class="articleContent">                           
                            <div class="articleDescription">
                                <p>For most people, reading is boring and hard to stay focused. Studies have show that reading have benefits,
                                     so you may read about them and think next time you are about to close a book. This is the list of reading benefits:
                                    <ol>
                                        <li>Reduces Stress</li>
                                        <li>Promotes Wellness</li>
                                        <li>Helps Combat Alzheimer's and Dementia</li>
                                        <li>Helps with Sleep</li>
                                        <li>Improves Relationships</li>
                                        <li>Inspires Success</li>
                                        <li>Decreases Loneliness and Social Isolation </li>
                                    </ol></p>
                            </div> 
                            <div class="articleIMG">
                                <img src="./resources/ellie-ellien-2sJ_9nbUpFc-unsplash.jpg">
                            </div>
                        </div>                          
                    </div>
                    <div class="article">
                        <div class="articleTitle">
                            <h3>Old Books Are Not a Trash</h3>
                        </div>
                        <div class="articleContent">
                            <div class="articleDescription">
                                <p>Most of us have a lot  of books in our house, and when years are passing through we may think to get rid of some.
                                    So this is a list of what to do with them:
                                <ol>
                                    <li>Donate to Thrift Stores and Secondhand Bookstores</li>
                                    <li>Find a Little Free Library</li>
                                    <li>Host a Book Swap</li>
                                    <li>Donate to Schools, Charities, or Libraries</li>
                                    <li>Leave Them on Your Stoop</li>
                                </ol></p>
                            </div>
                            <div class="articleIMG">
                                <img src="./resources/quinten-de-graaf-jpHAQk3KSAM-unsplash.jpg">
                            </div>  
                        </div>                          
                    </div>
                    <div class="article">
                        <div class="articleTitle">
                            <h3>How To Organize Your Books</h3>
                        </div>
                        <div class="articleContent">
                            <div class="articleDescription">
                                <p>Take a big breath and read the list below. Chose a way you like to organize your books.
                                    <ol>
                                        <li>Separate your hardcovers and paperbacks</li>
                                        <li>Arrange your books by color</li>
                                        <li>Don’t be afraid to stack books</li>
                                        <li>Organize books by genre or subject</li>
                                        <li>Display your favorite books front and center</li>
                                        <li>Organize your books alphabetically</li>
                                        <li>Organize your books according to how they made you feel</li>
                                        <li>Group together the books you haven’t read yet</li>
                                        <li>Arrange your books by height and size</li>
                                        <li>Separate your books by author: contemporary or classic</li>
                                        <li>Organize books by the condition of their covers</li>
                                        <li>Separate fiction and nonfiction</li>
                                    </ol>
                                </p>
                            </div>
                            <div class="articleIMG">
                                <img src="./resources/tim-van-cleef-1JBOZwuW7sI-unsplash.jpg">
                            </div> 
                        </div>   
                    </div>  
                    <div class="article">
                        <div class="articleTitle">
                            <h3>Make a Book a Gift</h3>
                        </div>
                        <div class="articleContent">
                            <div class="articleDescription">
                                <p>A book is always a good gift for friends or family. But what book do i choose?
                                    Here is a list that can help you out:
                                <ol>
                                    <li>Think about what’s going on in their life</li>
                                    <li>Expand on known favourites</li>
                                    <li>Consider their aesthetic</li>
                                    <li>Commemorate something you’ve done together</li>
                                    <li>If all else fails, choose something you love</li>
                                </ol> </p>
                            </div>
                            <div class="articleIMG">
                                <img src="./resources/daria-shevtsova-d7v2EXFJcWY-unsplash.jpg">
                            </div>  
                        </div>  
                    </div>                                          
                </div>

            </div>

        </main>
        <footer>
            <div class="box1">
                <div class="footerTitle">
                    <h3>Find Us</h3>
                </div>
                <div class="media">
                    <div class="social"><span>Facebook</span><img src="./resources/facebook.png"></a></div>
                    <div class="social"><span>Instagram</span><a href=""><img src="./resources/instagram.png"></a></div>
                    <div class="social"><span>Twitter</span><a href=""><img src="./resources/twitter.png"></a></div>
                    <div class="social"><span>Youtube</span><a href=""><img src="./resources/youtube.png"></a></div>
                </div>
            </div>
            <div class="box2" id="CONTACT">
                <div class="footerTitle" >
                    <h3>Contact Us</h3>
                </div>
                <div class="contact">
                    <div class="adress">
                        <h4>Andrea Metaksa 12, Echarxeia, Athens</h4>
                    </div>
                    <div class="number">
                        <h4>210-0123567</h4>
                    </div>
                    <div class="email">
                        <h4>[email protected]</h4>
                    </div>
                </div>
                
            </div>

        </footer>

    </body>

</HTML>
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html{
    font-size: 16px;
}
body {
    background-color: #ffcbcb;
}
.container, .box1, .box2{
    background-color: white;
    margin: 0 1.875rem 3.125rem 1.875rem;
}

/* -----------------NAVIGATION BAR------------------------------*/
nav .container {
    margin: 0;
    background-color:#407088;
}
nav li {
    display: inline;
    padding: 0 3.125rem ;
}
.navContainer {
    text-align: center;
    line-height: 2.5rem;
    font-size: 1.25rem;  
}
a {
    color: #ffb5b5;
    text-decoration: none;
}
a:hover {
    color: #ffb5b5;
    opacity: 0.6;
}

@media only screen and (max-width: 1024px) {
    nav {
        height: 9.375rem;
        background-color: #407088;
        padding: 3.125rem; 
    }
    .navContainer li {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 480px) {
    nav {
        height: 12.5rem;
        background-color: #407088;
        font-size: 2rem;
    }
    .navContainer li {
        font-size: 2rem;
    }    

}
/* -----------------HEADER------------------------------*/


.headerTitle {
    background-image: url("resources/ashim-d-silva-P8gLaJ-PZL0-unsplash.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 9.375rem;
}
.headerArticle p {
    text-align: center;
}
h1 {
    text-align: center;
    color: #132743;
    background-color: #ffb5b5;
    opacity: 0.6;
    line-height: 3.125rem;
    margin-top: 2.5rem;
    position: relative;
    top: 3rem;
}
h2 {
    text-align: center;
    color: #132743;
    padding-top: 1.875rem;
    padding-bottom: 2rem;
}
span {
    font-size: large;
}
ol {
    list-style-position: inside;
}

@media only screen and (max-width: 1024px) {
    h1 {
        font-size: 2.5rem;
    }

}
@media only screen and (max-width: 480px) {

    header .container{
        margin: -20px 0px 10px 0px;
    }
    .headerArticle p {
        text-align: justify;
    }
    ol {
        padding-left: 2rem;
    }

}

/* -----------------MAIN------------------------------*/


h3 {
    background-color: #ffb5b5;
    color: #407088;
    padding-left: 1.875rem;

}
p {
    padding: 0.3125rem;
    text-align: justify;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.375rem;
    margin-bottom: 1.25rem;
}
.article {
    display: flex;
    flex-direction: column;
}
.articleContent {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
}
.articles img  {
    width: 9.375rem;
    height: 12.5rem;
    margin: 20px;
}

@media only screen and (max-width: 1024px) {
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 4rem;
        margin-top: 1rem; 
    }
    h2 {
        font-size: 2rem;
        padding-top: 3rem;
    }
    main .container{
        margin: 0px 0px 10px 0px;      
    }
    .bookTitle, .eventTitle, .articleTitle {
        text-align: center;
        line-height: 2rem;
        font-size: 1.25rem;
    }
    .articleContent {
        flex-direction: column;
    }
    .articleIMG {
        display: flex;
        justify-content: center;
    }
}

/* -----------------footer------------------------------*/

.footerTitle h3{
    font-size: 1rem;
    background-color: white;
    color: #ffb5b5;
}
.contact, .media {
    text-align: center;
}
.adress, .email, .number, .social {
    font-size: 0.9rem;
    display: inline-block;
    padding-left: 2rem;
}
.social img{
    display: none;
}

@media only screen and (max-width: 1024px) {
    .social img {
        display: none;
    }
    .footerTitle {
        text-align: center;
    }
    .footerTitle h3 {
        font-size: 1.2rem;
    }
}
@media only screen and (max-width: 480px) {

    .box1, .box2 {
        background-color:#ffcbcb;  
        display: flex;
        justify-content: center;
    }
    .box2{
        flex-direction: column;
        align-items: center;
    }
    .footerTitle {
        display: none;
    }
    .social img{
        display:unset;
        width: 2.2rem;
        height: 2.2rem;
    }
    .media {
        justify-content: center;
    }
    span {
        display: none;
    }
    .contact {
        display: flex;
        flex-direction: column;
    }
}```

Hello everyone, here’s my solution to this task.

Sausage Club

I fully acknowledge the first rule about this sort of thing but any and all feedback welcome! :wink:

Happy coding!

1 Like

Hello Friends!
Here is my take on a responsive club website. any feedback in greatly appreciated!!

https://www.codecademy.com/workspaces/6632bfb4fbc6c34f924440c3

Hi, My name is Mohawk. Here is my try at the club website. MCU club site/ The design is not the best. However we’ re all just practicing. Take a look and say what you think :grin:

Have a nice weekend everyone btw!

1 Like

Hello,

This is my work:

LIVE: Food Club
CODE: GitHub - luixsx/foodclub

hello! I made this very simple website Brew Society
I’m open to feedback!

2 Likes

This is my project: GitHub - klutz4/responsive-site-proj

Solid Esports Organization - MY RESPONSIVE SITE

Tried my best to made this site responsive as much as i can :robot:

Git Hub Link - CODE

Hi everyone! Here’s my site
code : GitHub - a-lebel/FoodiesBCN
Live site: Bcn Foodies Club

Any comments or tips are greatly appreciated!

Hello!

Here’s my Club website! → Wolf Protection Club
Here’s my code → GitHub

Thanks!

1 Like