CODEWITHSUNDEEP
htmlcss
Fuze 360
Fuze 360

Reputation: 101

Background of the website is not covering the left and right side of the menu bar

I added a background to my website however the background image is not covering the left and right-hand side of the menu, I thought it was because the menu border being extended so I added a coloured border to see if this is true but the border of the menu is only around the menu so I'm confused why the background image is not showing

enter image description here

* {
        margin: 0;
        padding: 0;
    }
    
    body {
        width: 100%;
        height: 100%;
        background: url(https://placekitten.com/200/300);
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        
        background-size: cover;
        background-attachment: fixed;
    }
    
    p {
        font-family: 'Karla', sans-serif;
        margin: 2.5%;
        padding:0;
    }
    .title {
        text-align: center;
    }
    .container {
        
        margin: 0 auto;
        background: #f9f9f9;
        font-size: 24px;
        object-fit: cover;
        
    }
    
    .parallax {
        background: url('https://placekitten.com/400/300') no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        height: 400px;
        min-height: 400px;
        z-index:-1;
        
       
    }
    
    .b1{
        text-align: center;
    }
    
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        position: absolute;
        top: 82%;
        left: 42.5%;
    }
    
    .pic-1{
        height:280px; 
        width:420px;
        float: left;
        padding-left: 100px;
    }
    
    
    .pic-2{
        height:280px; 
        width:420px;
        float: right;
        padding-right: 100px;  
        
    }
    
    #Header-1 {
        font-family: 'Lobster', cursive;
        font-size: 35px;
    }
    
    ul {
        margin: 0 auto;
        width: 350px;
        border: 2px solid  red;
        overflow: hidden;
    }
    
    ul li{
        list-style: none;
        display: inline-block;
        float: left;
        line-height: 100px;
        
    
    }
    
    ul li a{
        display: block;
        text-decoration: none;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        color: #1e1e1e;
        padding:0px 20px;
        
    }
    
    
    
    #nav {
        width:100%;
        height:80px;
        background-color:#fff;
    }
<html>
    
    <head>
        <title>Croydon Cycles</title>
        <link rel="shortcut icon" type="image/png" href="images/favicon.png">
        <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="style.css" rel= "stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="parallax.min.js"></script>
    </head>
    
    <body background="background.jpg" z-index="1">
    
        <div class="title">
            <h1>Croydon Cycles</h1>
        </div>
        <div class="menu">
    
            <nav id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="location.html">Location</a></li>
    
                </ul>
            </nav>
    
        </div>
        
        
        <div class="container">
                
            
                
            <div class="parallax" data-parallax="scroll" data-z-index="-1">
                <div class="b1">
                    <a href="shop.html">
                        
                        <input type="button" class="button" value="view all bikes" >
                    </a>
                </div>
    
            
                    
                
            </div>
            
            
            
        </div>
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
            all areas of cyclesports. The club has a rich history of racing both on the 
            road and track. We also have an active social side and regular training trips away. 
            Croydon Cycles is located in mostly around Thornton heath pond, 
            however we still are active around all of Croydon.</p>
    
    
        <div class="profiles">
    
                <p id="Header-1">Here are some of the members of Croydon Cycles:</p>
            
            <div class="pic-1">
                <img src="images/profile-1.jpg" alt="Proffesional biker"  height="280px" width="420px">
                <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                        all areas of cyclesports. The club has a rich history of racing both on the 
                        road and track. We also have an active social side and regular training trips away. 
                        Croydon Cycles is located in mostly around Thornton heath pond, 
                        however we still are active around all of Croydon.</p>
            </div>
    
    
            
            <div class="pic-2">
            <img src="images/profile-2.jpg" alt="Proffesional biker"  height="280px" width="420px">
            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                    all areas of cyclesports. The club has a rich history of racing both on the 
                    road and track. We also have an active social side and regular training trips away. 
                    Croydon Cycles is located in mostly around Thornton heath pond, 
                    however we still are active around all of Croydon.</p>
            </div>
        </div>
    
    </body>

    </html>

Upvotes: 2

Views: 51

Answers (1)

Sinto
Sinto

Reputation: 3997

There where 2 issues:

1) background: url(images/background.jpg); single quotes missing

2) background-color:#fff; in #nav

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBUSEBIPEBIQDw8QDw8PDw8QDxAQFRUWFhUVFRUYHiggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OFxAQFysdHR0tLS0tLS0tLS0tLS0tKy0tLS0tLS0rLSstLS0tLS0tLS0rLS0rLS0tLS0tLSstLS0tLf/AABEIALUBFwMBIgACEQEDEQH/xAAbAAADAQEBAQEAAAAAAAAAAAACAwQBAAUHBv/EAEQQAAIBAQQHBAgBCgQHAAAAAAECABEDITFBBBJRYXGBkQVSobETIjJywdHh8EIGIzNic4KSorLxFUPC0hQWJFNjg7P/xAAaAQADAQEBAQAAAAAAAAAAAAAAAQIDBQQG/8QAIxEBAQABAwQDAQEBAAAAAAAAAAERAgNRExQxUgQhQRJxYf/aAAwDAQACEQMRAD8A/dkQCIyYRNHjsKIgkRpEEiNNhJExhGEQSJUqbCSsAiOIgESmVhBWARHkRZEqVnYQVgFZQRAIl5RYQyxTLKSItllSosTMsUwlLLFOsuVCdhFMJQwiyJcJOyxbLKWEWyxnlKyxZWUssWyyjlTssWVlBEBlguVOyxbLKGEWRBUqcrMKx5WCwiwuaiNSZqRtJhEWFZKKxliLxxmGN0UAsATQVxiGX6fsjsxLZalaUOFMeM96y0RbPBAN4AFJ5fY/a9lZDUDaxuvpQT3DpQa/1T1ng3br/r78PXszR/P/AEVlbbrts2JtLeguHhOmP85b/wB4enBIhTpbPBZEEiMIgkQTYURBIjSIBEaLCyIBEaRAIlZTYUwiyI8iARKZWEEQSI0iARKlZ2FNFmOIglZcRYQyxTLKCIDCVKzsSusUwlTLFMk0lQmIiyJQVgESsknYRbLKGWLKxmmZYsiUssUyylSkMIsiPYRbCNUpJEwiGRMIgrJZWAwjTAaJUpJEykYRMAiwrJ2jWmqQRcQa1n6Ps3tK0ZqNqm67ZPzdm1MQJWNIVb0FDmKmRr0f1BNVl+n6c9rBTqsMN4pOn5O10nWNTjOmXb6WnX1vq1JkIzCJ43tCYJhzCIFSyIJEYRBME2FGCRGEQTKRYWRAIjSIBjiLCiIDCOIgESmdhBEEiOIiyJUrKwllgERxEBhLlRYSViiJQRFsJUqLE7LFMspIi2E0lQnIi2WUEQbQkgbsI8klZYpllJEBllGkZYsrKmWLZZRypmWAVlBEWRGqUhhAIjmEArBcpVJlI3VmasDyWJ0PVjbGwriQo20rAZSmdKrTRSDcVYbVnRfR5fWJkOkEzkuoEiZCmERkEiCRDmEQKwsiARGEQSIIsLIgkRhEAyk0BEAiMMEykWEkQSI0iCRGysTkQGEoIi2EuVnYQRAYRziKpLjOwphFtHkRbLKlZ2EkQCI4rBKy8pTssWRKGEWRGCCsXaWZBoZWt061VSK5+ceTecyzDYnZdKWSCa75WRKjKQCsr1IDWceVZSlZmrKgtJgsozynCRqry3xuqBviXiGSqzoWrMjVl9ZImGGRBInHdgBmQiJlIyCZkKYRGQCIEbBIgmwsiARGkQSI02FEQCI0iCRGmwoiCRGETCJTOwlhAIjiIsiOM7CSItlj2EAiXKysTkTCI4rFsJUqLCmWARHEQSsrKbCdWa2jmlZrCCSdsrNT9TyQRFkR7CLIlpIIgER5WC6UjyCdUQGAyjSJmqIwQROpHsoyijGZZEBljDAaOGXSdNrOjN9WMww6QSJxnbBSdSFSZGAEQYwwSIEAiDDgkSiCRBIhmCYFgBgGMaAw++RjRgBEEwzBIjTYWRAIjDMMrKLpJIiyI9hBK/KOVldKciYF8iabYxh5E+EFvukqVF0gdRS7kfV+H3hFERzY5nia50gEff3wlSp1TJTCAUOw9JRZC/EDZXrLB2lq3UBux2wuqzxMjTt6bM6rhJo2jKVJYNUXjISC2W+erpmlhxQdMJ5lose3b5pb00zE0/n6SqjOGoXhvnNZXVimmvlh4dbIK3X74krDrBYyoVpJEW0aYppQC0WxmtAMuGGbMmwPL6zMpCpOnGd0BEEiMMEwAKQSIZEEiMgGZDIgUjIJgmGYJECwAiDSMmERpL1YBWNIgkRpperAKx1IJgRJH30+U5hGEQDKRSWWKcR5iyJUY6iG++tYB+Xx+cawiyJbKl/TypAtIwwSJcRSJlY1li2EqM7ktmi2MYwimEtIDAYwzFsJUItosxpEHVjMkrB1Y8rO1JWQn1J0fqToZD6jMk57QTeeEH/jx3W8Jwuto5fS9LXwpmRI0obCONJp0kQ6ujlPS18GGCRFnSl3zRbVwBj6ujkdLXw0iDSFrQS42iPq6eS6WvgJEwzfSDK+Z6QbDDraOR0dfAaTqQ6jO7dnFPbAfLOHW0cl0dfDaTNWCNIGw7sK9I0Wt3HBcSYdfRyOhr4K1YBEpY3VJAiWF1TcN8fW0cpuxr4KpAYRurdjgKndGtoppWouFc5U3tHKL8fc9UDCLaXNohpWo8Yh9H3j6bZXX2+WV+Lu+qMwDLW0I41BG0VM49ntS5lPWXPkbfsyvxN71eeRBIlraCwFbjtAxEAaITmN+N0O62vZPZb/AKomizPT/wAOJwZfGvSd/hTZMh4Vr0lz5W17Jvwt/wBXkkRTCeweym7y+ME9kHN1HJpU+VteyL8Hf9HiEQSs90dhMcHs/GYewH7yfzSu62vYuy3/AErwiszVntnsN+8vQwf8Ebvp4w7va9h2O/6V41JlJ7P+BWneTxmt2I+1d9L4d3s+w7H5Ho8Wk6eyOxTmw6NOh3mz7H2O/wCj0xa7BXjT6wgzcOZgtbDZ1NPKKS3fI1vu1ECimyfP4fUKlU5k9KfKHrKP718pCxbFiFG1vkYPqnK0tDtANBzAwga86Uo2eE707nAUG03DxiApAxVNyCp/iN3hBFqMxXex1j44coWkpDE5190V8TdNIpiQOJ1j0ktppZpjqjCp+7+VIkPaHAAbXYEV4Lj1pJzweHo+kGwnjh0gm2r7NT7twHOSMwAq7Fr/AMR9Wu4Z+M0WjsLhqrtIvPAfOANetL2A3Cv9zDs1J/VHAV+kV6RUvxY7b2hLrNe9QO4DfzMMA1SK0S/axvH1jKKg1ieJzP3si2tAgvupQBQM8gBJ01rQ67YD2VyHzP3xeCUpVjrNcPwrs3nfEW1vrMQMEx97EDlj0maTpRC3YsdVQdu3gLzyibKypdjQVNaHWJ28SawpxU73Ad5lHjf4VlptruU84Xug2a79AF/1+EvoJemVNdYPrKN4B5ydmoaZHD4ibZNqkjYx8b/jA0xCcDS8EGlaGK+Dhfpih2jMDzHyj1NfWsyL76fhaS+0NhwO0EffjFKWQ1W8fiUeY+75JvRForGh9Vh+E48jnF2qU2neMREsy2gGN/ssMa7jkZo0hkutLxk4x5j7+MLMhrHYQ3QHrgfCbZvlUV7rCh5QVcONZL8bwCpNOIvG+Lt9Yi+8DEEVHPZFgKvS7dYfzL85qMMr/dPwN088O6+yajEB7wRuYX+cL0w/ECh21u/iHx6QlGFtRkRwNVP3ymnWGZHKo8JMXbc42Nj1Hygf8SB3k3Gmr1N0YVi3bc3Ch+s06WPxCnG7ziC5N5UMNoxHX5zPSrhrMu5rx/N8DHklHpFMw0yJ85O9juU+6Sp6G6LYUxJX31+MArLNtB43ecyTa7jad4NR4zo5YVldqjJTXIuTXpj0hBHOJI3L6v18owv3RT72D5wWFfaJpnhTnlEbAEXAAnb7R6mc1o2yg2n7+EjftJNbVswbQ1oSgqq7avh0rB9IXNNbEE0TWAuxqw+Y4QyeDba3UGhJLZKKlumXgIvWZtijYKM3yHjOsbMKCWCgC8fhUDMk4dJodrS6zX1e+wK2fJcW8t8WAyytFWpIpT8bsCTxOyGto75ai95hSvBceZ8Y+w0IKQzEuwwLZcBgsO3tgNl3TZzjwCFsgpLVOFAWoTvuy4Ck2ztHaqrU33s1wX72Yw10Yve9QMlvDH/aPHhK1QAUAAAwAuA4RzSWSLKxCX4nNzltps+75ptwo1iKDBe8x3Db93TdIdVFWvFQFUYu2QA248LyaSRVd21mpW8AYhF3fPOnIAGlkzmrZZC8KNlcztMqOFByANDsi3YIAKE7AoqTv+v0k+k0ZvRrdretakd03dWII4BtkYBZPrnXypRPc2/vXcgsdo76xIyDEE7SKV+MYyjPidyjExioaYXk37t3LDlFgwaMK2rnuqifvXs3gyS2l8m7KUkMxxe1tCf3W1B/KiywIec0whFbGj+8oPQkHzWNBqKHZdxGUDTLP1kO9k6rreaCFYC/xix9mntRQ62WD7tjcs9x3Rek1W/EDZUkD4y5rOhIOBkyIQShvoKqTeSmXEjA8jnFYJUusV9ZbwbyoNx3jf5+MrsyHUZg7Tefr4zGShw+Z+v3xVaWZHrJ6wPtLdRxuyrTkcDkRODcbJk9ZDdWtDh9DvHOsaluGwHrD2luDcRkR4c7oKW66ooDT2fVBupkVxGymVINrYVvXiKG8b1IgDDZq14u20Ge9dvjFMhXHDbl1y5zLPSCD+cu/wDKBdT9cZccMcJcP7GGMjLzhY9wlTsy/hw6UmNasPbWu9AT1GPmJa+jjK7+nplyi2JFzDhXCu5vgYsWHlCLUY2ZNNqMuOdVwh+mal9WBz9XwBu8Y620dGNaUbbg3M5jjFGxdL1q+4UVzyJoeo4RBti61oGIJwWmqf4TceUeLVxsb+VuhnnjTUZtRgqml6OrIx5EUPTnHC01TRXKHIPUqeAb4GMKdazOI1TvBQ9RdOgi3YXOmtvT4qaHznQJtrpHdFB33uXpnzkdorPkbQVxf1LPkMTyEY3a+h1BNtZk5VqacLoo/lDopbUS1s2a6pJIVedPKT9qUixBHrBaDK9UHLOdZsWuslDDvkatmOHe5dYpdN0Qn85bo5x1bwg/d+csTtnRcrWz8flKkL7dZ9nius512GFfZB3D7O+VEBfu+Qt+UOiZW1nsrfj0ibPtnR7S8WyBT+K/WbhdcN/94/8ACxVloxY6oFTmtbhvY5fdxjbHRQDU+s2RyX3R8f7RVl2pooFFtUA557dpmt23oo/zkyGeeEf0MVaE/vJrdgnrNVibkQYk7FHmT4CTaV+UOious1qhwCqCbybh/eeZ/wAwaKW1mt7Mu1wvNAO6t1w8+ghcDFXhWZtZ72IoAPZVe6vhU59ALbKyoJ59l2vooxtrMkjaYQ7d0Yn9NZdScOUBiqdJtwiFsRsAvY1oANpJuHGBodgQPW9pjrWhF4DbBuAAHKuZnk2Pb2jWtqSbaz9HYtqpeTr2mrUnDBQ3Unuz0z2zotwFsl5pndn5QGD6eN491aebEcRHWloLNGc4IjMeAFfKQr2xoutQWqALRQBW4AV+PhE9q9s6N6LVFqn5x7NTj7DOA2XdLRwWV7PZ1iUs0U4qiKTtYAAmUKv30nm2HbWjf95DXjKbPtfRj/mpnt3ysxOK3T19QnulGPuqwLeAMFRQ+Ey27T0ZlINql6kHHAyOx7Z0ZlBNslSorjjQVhbDxeHqsteIkukISKr7a3rkDtU7jh0OUWnbejXH0qX+rnBt+1NFrfaoOZhmDFMudQwwO24g7DsII5UisK14tw73z65yMdsaNZ2lDbWZW1O+q2gBPQgHmN8fbdraML/TWYIzvk08VttYkHWTHNcA4+DDbyORDLG2DDW5MKEEEXEEY1k47a0Wl1qmrhSp9Ui6nUSbS+09HU61nbWevT2SSFtMgCaXHKvwwBivTtLCt4k1nrWZotKZ2ZuXivd8vOT6L+UmiumsLazGTKSaqcwaZw37Z0VsbazqNhPyiGHoaO4auqSKe1ZtivLrhcaXSg2d24/d8/PW/bOiqQTb2YP4WUkN5fSP0X8p9FLBTbWesagMtaNQVoRkaA/d0JRZXovovdu/VN68u7yu3RNCDQ+qdhpQ8DgfOae3NGGNql5pnj9gzT2topH6WzIIrQ1II6QslGKy0slYUdQeIrTeMxENoPdNR3XvHJvszm7R0YezbWdMdVi1ORpURS9uaJUj0yAg0ZSTUZ8DcRI8H9iJKACmpTJgSvI18Jk09v6JT9NZ40zpX7E6OSFqy+bubuD/AAEk0M/9Q28fCdOhPFbXzHrriP3v9MbZ/H4zJ0hbz8/32+Mf2cfzS+6f6jOnSvxP6vszf/DAtRnsaz8xOnSVJO1v0S/tE855RXA/rLd1nTpc8Ivl6NnZgrfndFKtK0J9kZ7vp4zp0Rp+yVoH/bsetmhnrkXp73+gzp0rV5LT4Bo+J99viPhFdp+wnvp5ibOink74ej2eKrU5CnjLrEeR+M2dJNlp7PIzyNFPqj3fOnynTo4FNgLl98fGM0sX8p06IPGtmLWtn+0P9Dy63Nx4fOZOjpT9JT2eFrajxadpGI5ec6dAPM7Os6K9Cb2ZjfmSTLNHsRSt+AxNcg3xpynTo75KeEulp6wG8+RmaIKW1n+0P/zedOhBXuFauBvJ8PrDX2R7q+QnTpCyj8DPO/zbT31/oSZOjIDj1f8A2f7p06dCG//Z');
    background-position: center;
    background-repeat: no-repeat;
    display: block;

    background-size: cover;
    background-attachment: fixed;
}

p {
    font-family: 'Karla', sans-serif;
    margin: 2.5%;
    padding:0;
}
.title {
    text-align: center;
}
.container {

    margin: 0 auto;
    background: #f9f9f9;
    font-size: 24px;
    object-fit: cover;

}

.parallax {
    background: url('data:image/jpeg;base64,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') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    min-height: 400px;
    z-index:-1;


}

.b1{
    text-align: center;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 82%;
    left: 42.5%;
}

.pic-1{
    height:280px; 
    width:420px;
    float: left;
    padding-left: 100px;
}


.pic-2{
    height:280px; 
    width:420px;
    float: right;
    padding-right: 100px;  

}

#Header-1 {
    font-family: 'Lobster', cursive;
    font-size: 35px;
}

ul {
    margin: 0 auto;
    width: 350px;
    // border: 2px solid  red;
    overflow: hidden;
}

ul li{
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 100px;


}

ul li a{
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #1e1e1e;
    padding:0px 20px;

}



#nav {
    width:100%;
    height:80px;
    // background-color:#fff;
}
<html>

<head>
    <title>Croydon Cycles</title>
    <link rel="shortcut icon" type="image/png" href="images/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link href="style.css" rel= "stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="parallax.min.js"></script>
</head>

<body background="background.jpg" z-index="1">

    <div class="title">
        <h1>Croydon Cycles</h1>
    </div>
    <div class="menu">

        <nav id="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li><a href="location.html">Location</a></li>

            </ul>
        </nav>

    </div>


    <div class="container">



        <div class="parallax" data-parallax="scroll" data-z-index="-1">
            <div class="b1">
                <a href="shop.html">

                    <input type="button" class="button" value="view all bikes" >
                </a>
            </div>




        </div>



    </div>
    <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
        all areas of cyclesports. The club has a rich history of racing both on the 
        road and track. We also have an active social side and regular training trips away. 
        Croydon Cycles is located in mostly around Thornton heath pond, 
        however we still are active around all of Croydon.</p>


    <div class="profiles">

            <p id="Header-1">Here are some of the members of Croydon Cycles:</p>

        <div class="pic-1">
            <img src="images/profile-1.jpg" alt="Proffesional biker"  height="280px" width="420px">
            <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                    all areas of cyclesports. The club has a rich history of racing both on the 
                    road and track. We also have an active social side and regular training trips away. 
                    Croydon Cycles is located in mostly around Thornton heath pond, 
                    however we still are active around all of Croydon.</p>
        </div>



        <div class="pic-2">
        <img src="images/profile-2.jpg" alt="Proffesional biker"  height="280px" width="420px">
        <p>The Croydon Cycles was founded in 2001 in order to promote and encourage 
                all areas of cyclesports. The club has a rich history of racing both on the 
                road and track. We also have an active social side and regular training trips away. 
                Croydon Cycles is located in mostly around Thornton heath pond, 
                however we still are active around all of Croydon.</p>
        </div>
    </div>

</body>

</html>

Upvotes: 1

Related Questions