Мобильная версияКод: Выделить всё
body {
background-color: hsl(210, 46%, 95%);
font-size: 13px;
font-family: "Barlow Semi Condensed", sans-serif;
height: 100vh;
}
svg {
position: absolute;
justify-self: right;
padding-right: 20px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
.testimonialsmain {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
gap: 20px;
padding: 20px;
}
.testimonialitem {
border-radius: 5px;
}
.testimonialitem:nth-child(3) {
grid-row: span 2;
background-color: hsl(0, 0%, 100%);
padding: 20px;
display: grid;
}
.testimonialitem:nth-child(1) {
grid-column: span 2;
background-color: hsl(263, 55%, 52%);
color: hsl(0, 0%, 81%);
padding: 20px;
display: grid;
width: auto;
}
.testimonialitem:nth-child(2) {
background-color: hsl(217, 19%, 35%);
color: hsl(0, 0%, 81%);
padding: 20px;
display: grid;
width: auto;
}
.testimonialitem:nth-child(4) {
background-color: hsl(0, 0%, 100%);
padding: 20px;
display: grid;
width: auto;
}
.testimonialitem:nth-child(5) {
grid-column: span 2;
background-color: hsl(219, 29%, 14%);
color: hsl(0, 0%, 81%);
padding: 20px;
display: grid;
width: auto;
}
.card {
display: grid;
grid-template-columns: 1fr 6fr;
}
.pic {
border-radius: 50%;
}
.intro {
padding-top: 10px;
font-size: large;
z-index: 2;
}
.testimonial {
padding-top: 10px;
}Код: Выделить всё
Frontend Mentor | Testimonials Grid
[img]./images/image-daniel.jpg[/img]
Daniel Clifford
Verified Graduate
I received a job offer mid-course, and the subjects I learned were
current, if not more so, in the company I joined. I honestly feel I
got every penny’s worth.
“ I was an EMT for many years before I joined the bootcamp. I’ve
been looking to make a transition and have heard some people who had
an amazing experience here. I signed up for the free intro course
and found it incredibly fun! I enrolled shortly thereafter. The next
12 weeks was the best - and most grueling - time of my life. Since
completing the course, I’ve successfully switched careers, working
as a Software Engineer at a VR startup. ”
[img]./images/image-jonathan.jpg[/img]
Jonathan
Walters
Verified Graduate
The team was very supportive and kept me motivated
“ I started as a total newbie with virtually no coding skills. I now
work as a mobile engineer for a big company. This was one of the
best investments I’ve made in myself. ”
[img]./images/image-kira.jpg[/img]
Kira Whittle
Verified Graduate
Such a life-changing experience. Highly recommended!
“ Before joining the bootcamp, I’ve never written a line of code. I
needed some structure from professionals who can help me learn
programming step by step. I was encouraged to enroll by a former
student of theirs who can only say wonderful things about the
program. The entire curriculum and staff did not disappoint. They
were very hands-on and I never had to wait long for assistance. The
agile team project, in particular, was outstanding. It took my
learning to the next level in a way that no tutorial could ever
have. In fact, I’ve often referred to it during interviews as an
example of my developent experience. It certainly helped me land a
job as a full-stack developer after receiving multiple offers. 100%
recommend! ”
[img]./images/image-jeanette.jpg[/img]
Jeanette
Harmon
Verified Graduate
An overall wonderful and rewarding experience
“ Thank you for the wonderful experience! I now have a job I really
enjoy, and make a good living while doing something I love. ”
[img]./images/image-patrick.jpg[/img]
Patrick Abrams
Verified Graduate
Awesome teaching support from TAs who did the bootcamp themselves.
Getting guidance from them and learning from their experiences was
easy.
“ The staff seem genuinely concerned about my progress which I find
really refreshing. The program gave me the confidence necessary to
be able to go out in the world and present myself as a capable
junior developer. The standard is above the rest. You will get the
personal attention you need from an incredible community of smart
and amazing people. ”
Challenge by
[url=https://www.frontendmentor.io?ref=challenge]Frontend Mentor. Coded by Aparna Gopalakrishnan[/url].
Я создал сетку с 3 столбцами и 2 строками. Но не могу централизовать его по вертикали и горизонтали.
Может ли кто-нибудь предложить решение, которое будет работать с написанным мной кодом?
Я пробовал использовать различные свойства, такие как align-items, align-self, align-content и т. д. Также упоминаются некоторые решения на этом форуме. Мне пока ничего не помогло.
Отступы работают. Но, исходя из моих базовых знаний, я понимаю, что это не лучший дизайн для адаптивной страницы.
Теперь сетка расположена в верхней части страницы. Ожидаемый результат — перемещение его до середины страницы, как показано на снимке экрана ниже.
[img]https://i.sstatic .net/HfpfqLOy.jpg[/img]
Подробнее здесь: https://stackoverflow.com/questions/786 ... a-css-grid
