6편 Omnifood section-testimonials

1.HTML

    <section class="section-testimonials">
        <div class="row">
            <h2>Our customers can't live without us</h2>
        </div>

        <div class="row">
            <div class="col span-1-of-3">
                <blockquote>
                    Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so
                    Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
                    <cite><img src="./public/img/customer-1.jpg" alt="customer-1">Alberto Duncan</cite>
                </blockquote>
            </div>

            <div class="col span-1-of-3">
                <blockquote>
                    Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food
                    delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
                    <cite><img src="./public/img/customer-2.jpg" alt="customer-2">Joana Silva</cite>
                </blockquote>
            </div>

            <div class="col span-1-of-3">
                <blockquote>
                    I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and
                    ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
                    <cite><img src="./public/img/customer-3.jpg" alt="customer-3">Milton Chapman</cite>
                </blockquote>
            </div>
        </div>

    </section>

blockquote 태그

 

HTML <blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타낸다. 

 

cite태그

 

cite 요소는 인용된 자원을 나타낸다.

 

작가와 같은 사람의 이름을 마크업하시면 안되고

 

작품의 제목을 넣어야 한다.

 

인용이 아니더라도, 작품명을 언급할 때에 사용하면 된다.

 

2.CSS

.section-testimonials {
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.8)),url(../img/back-customers.jpg);
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
}

blockquote {
    padding:2%;
    font-style: italic;
    line-height: 145%;
    position: relative;
    margin-top: 40px;
}

blockquote:before {
    content: "\201C";
    font-size: 400%;
    display: block;
    position: absolute;
    top: -5px;
    left: -3px;
}

cite {
    font-size: 90%;
    margin-top: 25px;
    display: block;
}

cite img {
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

background-size

 

contain 값을 지정하면, 배경 이미지의 가로, 세로

 

모두 요소보다 작다는 조건하에 가능한 크게 조정한다.

 

값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다

 

크다는 조건하에 가능한 배경 이미지를 작게 조정한다.

 

background-attachment

 

CSS background-attachment 속성은 배경 이미지를 뷰포트 내에서 고정할지,

 

아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정한다.

 

참고:https://developer.mozilla.org/ko/docs/Web/CSS/background-attachment

background-attachment