The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need pointers making a page responsive
JUI43555
post May 15 2023, 04:49 AM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Having trouble knowing where to begin with making this page responsive.

Any pointers would be greatly appreciated.

Main issues are the hero image needing to change to mobile size when on a screen.
remove logo and keep The Marketplace text logo when responsive.
Featured items to be in a column.
brands in a grid of 4 or column.

Please note this HTML / CSS is FAR from finished and I have lots of tweaking to do (alt tags / font sizes/ spacing etc)


CODE
<!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" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css" />
        <title>The MarketPlace | Home</title>
    </head>
    <body>
        <header class="header">
            <img src="images/logo_theMarketPlace.svg" alt="The Market Place Logo" class="logo" />
            <nav>
                <ul class="nav__links">
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact</a></li>
                    <li>
                        <a href="#"><img src="images/search icon.png" alt="search" /> </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/shopping-cart icon.png" alt="cart" /></a>
                    </li>
                </ul>
            </nav>
        </header>

        <section class="cta-section-container">
            <div class="cta-content">
                <img src="images/logo_theMarketPlaceTEXT.svg" alt="" />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </p>
                <a href="#" type="button">Click Here</a>
            </div>

            <div class="image-container">
                <img src="images/home_dark.jpg" alt="a living room filled with furniture and a large window" />
                <img src="images/home_light.jpg" alt="a living room filled with furniture and a large window" />
            </div>
        </section>

        <div class="featured-titles">
            <h2>Featured items</h2>
            <p>hundreds of new products - Proud Australian</p>
        </div>

        <div class="card-container">
            <div class="product-cards">
                <div class="card">
                    <img src="images/product_washingmachine_white.png" alt="" class="prod-img" />
                    <p class="fi-title-headings">8kg EasyCare front load washer</p>
                    <p>$69.00 <span>$715.00</span></p>
                    <img src="images/stars.png" alt="" class="stars" />
                </div>
                <div class="card">
                    <img src="images/product_washingmachine_grey.png" alt="" class="prod-img" />
                    <p class="fi-title-headings">8kg Darth Vaders dish washer</p>
                    <p>$420.00 <span>$550.00</span></p>
                    <img src="images/stars.png" alt="" class="stars" />
                </div>
                <div class="card">
                    <img src="images/product_lawnmower.png" alt="" class="prod-img" />
                    <p class="fi-title-headings">9728hp Man-mower lawny thing</p>
                    <p>$416.00 <span>$750.00</span></p>
                    <img src="images/stars.png" alt="" class="stars" />
                </div>
            </div>
        </div>

        <section class="featured-items-cta">
            <div class="fi-cta-container">
                <div class="fi-content">
                    <h2>Featured Items</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati nostrum pariatur a dolorem, id temporibus fugiat sapiente rem quibusdam quos.</p>
                    <a href="#" type="button">Click here</a>
                </div>
            </div>
        </section>

        <section class="brands">
            <img src="images/brand_Samsung Electronics - jpeg.jpg" alt="link to Samsung.com" />
            <img src="images/brand_dyson_logo.jpg" alt="logo" />
            <img src="images/brand_RYOBI_Logo_1_.png" alt="logo" />
            <img src="images/brand_Ozito DIY - png 0.png" alt="logo" />
        </section>

        <footer>
            <div class="footer-container">
                <div class="footer">
                    <div class="footer-heading footer-1">
                        <img src="images/theMarketPlacefooter.png" alt="the MarketPlace" class="footer-logo" />
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam, eligendi?</p>
                        <p class="footer_signoff">© 2023 theMarketPlace</p>
                    </div>
                    <div class="footer-heading footer-2">
                        <h2>Helpful links</h2>
                        <a href="#">Catalogue</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact us</a>
                        <a href="#">Home</a>
                    </div>
                    <div class="footer-heading footer-3">
                        <h2>Information</h2>
                        <a href="#">Community</a>
                        <a href="#">Terms & Conditions</a>
                        <a href="#">Privacy Policy</a>
                        <a href="#">Events</a>
                    </div>
                    <div class="footer-4">
                        <a href=""><img src="images/icon_Facebook - Negative.png" alt="Facebook" /></a>
                        <a href=""><img src="images/icon_Twitter - Negative.png" alt="Twitter" /></a>
                        <a href=""><img src="images/icon_Instagram - Negative.png" alt="Instagram" /></a>
                        <a href=""><img src="images/icon_YouTube - Negative.png" alt="Youtube" /></a>
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>


CODE
:root {
    /* primary */
    --dark-grey-background: #909090;
    --red-cta-button: #a60000;
    --paragraph-light-grey: #c6b8b8;
    /* neutral */
    --white: #fff;
    --black: #000;
}

@font-face {
    font-family: Blippo;
    src: url(/fonts/Blippo\ Black\ Regular.otf);
}

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

body {
    max-width: 1600px;
    margin: 0 auto;
}

.header {
    height: 500px;
    background-image: url(/images/Rectangle\ 14.png);
    background-repeat: no-repeat;
    background-size: fill;
    background-position: cover;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 30px 10%;
}

.logo {
    width: 322px;
    cursor: pointer;
}

.nav__links {
    list-style: none;
}

.nav__links li {
    display: inline-block;
    padding: 0px 10px;
}

.nav__links li a {
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover {
    color: var(--dark-grey-background);
}

/* .header-container {
    margin: 50px 180px auto 180px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}



.main-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 453px;
}

.main-nav a {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
} */

.cta-section-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
    margin: 20px 100px;
}

.cta-content {
    margin: auto auto;
    width: 429px;
    height: 444px;
}

.cta-content p {
    line-height: 40px;
    padding: 30px 0px 10px 0px;
    margin-bottom: 50px;
    font-size: 16px;
}

.cta-content a {
    font-weight: 700;
    background-color: var(--red-cta-button);
    padding: 16px 67px;
    color: var(--white);
    border-radius: 8px;
    text-decoration: none;
}

.image-container {
    display: flex;
    gap: 35px;
}

.image-container img {
    border-radius: 8px;
    width: 330px;
}

/* .featured-items {
    background-color: rgb(126, 176, 219);
} */

.featured-titles {
    text-align: center;
    margin: 70px 0px 34px 0px;
}

.featured-titles h2 {
    padding: 5px;
    font-family: Blippo;
    font-size: 48px;
}

.featured-titles p {
    color: var(--paragraph-light-grey);
    font-size: 20px;
}

.card-container {
    margin-bottom: 65px;
}

.product-cards {
    gap: 50px;
    margin: auto 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.prod-img {
    margin-bottom: 22px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.product-cards p {
    text-align: center;
}

.fi-title-headings {
    margin-bottom: 20px;
}

.stars {
    display: block;
    margin: 22px auto 0px auto;
    /* margin-left: auto;
    margin-right: auto;
    margin-top: 10px; */
}

/* Featured items CTA box women gardening */

.featured-items-cta {
    width: 1180px;
    padding: 50px 0;
    margin: 50px auto;
    align-self: center;
    background-image: url(/images/featured-item-background-garden.png);
    background-repeat: no-repeat;
}

.fi-cta-container {
    background-color: rgba(245, 245, 245, 0.7);
    width: 570px;
    margin-left: 100px;
    border-radius: 8px;
}

.fi-content {
    padding: 36px;
}

.fi-content h2 {
    font-family: Blippo;
    font-size: 45px;
}

.fi-content p {
    line-height: 36px;
    margin-bottom: 30px;
}

.fi-content a {
    font-weight: 700;
    background-color: var(--red-cta-button);
    padding: 16px 67px;
    color: var(--white);
    border-radius: 8px;
    text-decoration: none;
}

.brands {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 50px 100px;
}

.brands img {
    width: auto;
}

/* .footer {
    background-color: var(--dark-grey-background);
    height: 370px;
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.footer-marketplace {
    background-color: #c6b8b8;
    height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
} */

.footer-container {
    background-color: var(--dark-grey-background);
}

.footer {
    width: 80%;
    height: 370px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.footer ul {
    text-decoration: none;
}

.footer-logo {
    max-width: 250px;
}

.footer-heading {
    display: flex;
    flex-basis: 25%;
    flex-direction: column;
}

.footer-heading h2 {
    margin-bottom: 0.5rem;
    font-size: 18px;
}

.footer-heading a {
    text-decoration: none;
    color: var(--black);
    margin-top: 10px;
}

.footer-heading a:hover {
    color: var(--paragraph-light-grey);
}

.footer-1 img {
    margin: 20px;
}

.footer-1 p {
    margin: 20px;
}

.footer-2 {
    text-align: center;
}

@media only screen and (min-width: 600px) {
    header {
        background-image: url(/images/hero-image-mobile.png);
    }
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post May 15 2023, 05:17 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743

I cannot see any of the images in your code. IPB Image

I also had a similar problem here...

https://forums.htmlhelp.com/index.php?s=&am...st&p=145857 IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post May 15 2023, 05:22 AM
Post #3


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
QUOTE(coothead @ May 15 2023, 06:17 PM) *


I cannot see any of the images in your code. IPB Image

I also had a similar problem here...

https://forums.htmlhelp.com/index.php?s=&am...st&p=145857 IPB Image


coothead


What would be the best way for me to get them on here? I'm not the best at navigating this site sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 15 2023, 08:27 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
See here https://forums.htmlhelp.com/index.php?showtopic=60737 . Or if they are online, just link to them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 28th April 2024 - 11:04 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC