html - 响应式——如何从我当前的移动屏幕设置中获得这种想要的布局？
问题描述
我很难将我的移动显示器转换为桌面版本。我尝试了一些 display: grid 和它的一些属性，但没有什么能真正正确地完成工作。澄清一下，我需要帮助我的“about__cta”部分，这些卡片紧跟在带有标题“我们是创意者”的 hero 部分之后”。
这是我的 HTML：
<!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">
<title>Sunnyside agency landing page_challenge_1</title>
<link rel="stylesheet" href="style.css">
<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=Barlow:wght@600&display=swap" rel="stylesheet">
<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=Fraunces:wght@700;900&display=swap" rel="stylesheet">
</head>
<body>
<!--HEADER-->
<header>
<nav>
<a href="#">
<img src="./images/logo.svg" alt="Sunnyside logo" class="logo">
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links">
<a href="#" class="header__text" class="header__link">About</a>
<a href="#" class="header__text" class="header__link">Services</a>
<a href="#" class="header__text" class="header__link">Projects</a>
<a href="#" class="btn btn-contact" class="header__link">Contact</a>
</div>
</nav>
</header>
<!--HERO-->
<section class="home__hero">
<div class="container">
<h1 class="title">We are Creatives</h1>
<img src="./images/icon-arrow-down.svg" alt="down arrow" class="hero__arrow">
</div>
</section>
<!--ABOUT-->
<section class="about__cta">
<div class="container">
<div class="about__card bg__spec__img__1">
</div>
<div class="about__card">
<h4 class="transform__title">Transform your brand</h4>
<p class="transform__par">We are a full-service creative agency specializing
in helping brands grow fast.Engage your clients
through compelling visuals that do most of the marketing
for you.
</p>
<a href="#" class="btn btn__cta">Learn More</a>
</div>
<div class="about__card bg__spec__img__2">
</div>
<div class="about__card">
<h4 class="standout__title">Stand out to the right audience</h4>
<p class="standout__par">Using a collaborative formula of designers, researchers,
photographers, videographers, and copywriters, we'll
build and extend your brain in digital places.
</p>
<a href="#" class="btn btn__cta">Stand out</a>
</div>
<div class="about__card graphic__design__card">
<h4>Graphic Design</h4>
<p>Great design makes you memorable.We deliver artwork
that underscores your brand message and captures
potential client's attention.
</p>
</div>
<div class="about__card photo__card">
<h4>Photography</h4>
<p>Increase your credibility by getting the most stunning,
high-quality photos that improve your business image.
</p>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h4>Client Testimonials</h4>
<div class="testimonial__card">
<img src="./images/image-emily.jpg" alt="client profile image" class="test__image">
<p class="test__par">We put our trust in Sunnyside and they
delivered, making sure our needs were met and deadlines
were always hit.
</p>
<div class="name__container">
<span class="name">Emily R.</span>
<span class="position">Marketing Director</span>
</div>
</div>
</div>
<div class="container">
<h4>Client Testimonials</h4>
<div class="testimonial__card">
<img src="./images/image-thomas.jpg" alt="client profile image" class="test__image">
<p class="test__par">WSunnyside's enthusiasm coupled with
their keen interest in our brands's success made it a
satisfying and enjoyable experience.
</p>
<div class="name__container">
<span class="name">Thomas S.</span>
<span class="position">Chief Operating Officer</span>
</div>
</div>
</div>
<div class="container">
<h4>Client Testimonials</h4>
<div class="testimonial__card">
<img src="./images/image-jennie.jpg" alt="client profile image" class="test__image">
<p class="test__par">Incredible end result!Our sales increased
over 400% when we worked with Sunnyside.Highly recommended!
</p>
<div class="name__container">
<span class="name">Jenny F.</span>
<span class="position">Business Owner</span>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
这是我的 CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* font-family: 'Fraunces', serif;
font-family: 'Barlow', sans-serif; */
/* global styles
---------------- */
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
/* typography
------------- */
.transform__title,
.standout__title {
font-size: 2rem;
font-weight: 900;
font-family: 'Fraunces', serif;
margin: 2.5em 1em 1.5em 1em;
text-align: center;
width: 55vw;
}
.transform__par,
.standout__par {
font-family: 'Barlow', sans-serif;
font-weight: 600;
line-height: 1.6;
text-align: center;
padding-bottom: 1.5em;
margin: 0em 1em 1em 1em;
width: 80vw;
font-size: 1.125em;
color: hsl(232, 10%, 55%);
}
.graphic__design__card h4,
.photo__card h4 {
margin: 12em 1.5em 1.5em 1.5em;
font-size: 2rem;
font-family: 'Fraunces', serif;
color: hsl(198, 62%, 26%);
}
.graphic__design__card p,
.photo__card p {
text-align: center;
font-size: 1.125em;
width: 80vw;
line-height: 1.6;
font-family: 'Barlow', sans-serif;
font-weight: 600;
color: hsl(198, 62%, 26%);
}
/* buttons
--------- */
.btn {
border: none;
outline: none;
background: white;
text-decoration: none;
text-transform: uppercase;
padding: 0.6em 1.75em;
border-radius: 50px;
font-family: 'Fraunces', serif;
font-weight: 900;
color: hsl(212, 27%, 19%);
}
.btn__cta {
margin-bottom: 3em;
}
@media (min-width: 50em) {
s .btn {
font-size: 0.925em
}
.header__text {
font-size: 0.925em;
}
}
@media (min-width: 60em) {
.btn {
font-size: 1em;
}
}
/* header
--------- */
header {
position: absolute;
left: 0;
right: 0;
}
nav {
height: 7vh;
width: 100%;
padding: 2.5em 1.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__menu {
position: absolute;
right: 5%;
top: 50%;
transform: translate(5%, -50%);
}
span {
display: block;
width: 25px;
height: 2px;
background: white;
margin: 5px;
transition: all 400ms ease-in-out;
}
.header__links {
font-size: 1.125em;
font-family: 'Barlow', sans-serif;
font-weight: 200;
z-index: 98;
}
.header__text {
text-decoration: none;
color: white;
font-weight: 200;
z-index: 99;
}
.header__text:hover {
color: #eee;
}
.header__text:not(:last-child) {
margin-right: 1.125em;
}
/* header===responsive
-------------------- */
@media screen and (min-width: 23.4375em) {
body {
overflow-x: hidden;
}
.header__links {
// display: none;
position: absolute;
top: 110%;
right: 50%;
transform: translateX(160%);
transition: transform 400ms ease-in-out;
background: white;
width: 90vw;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.header__links::after {
content: '';
position: absolute;
top: -1em;
right: 0em;
border-width: 1em;
border-style: solid;
border-color: transparent white transparent transparent;
}
.header__text {
color: hsl(213, 9%, 39%);
}
.header__text:hover {
color: hsl(210, 4%, 67%);
}
.btn {
background: hsl(51, 100%, 49%);
}
}
@media screen and (min-width: 50em) {
.header__menu {
display: none;
}
.header__links {
position: relative;
transform: translateX(55%);
background: transparent;
height: 7vh;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-right: 1em;
font-size: 1em;
}
.header__text {
color: white;
}
.header__text:hover {
color: #eee;
}
.header__links::after {
display: none;
}
}
/* ------------------------------ */
/* mobileMenu
------------- */
.burgerActive {
transform: translateX(50%);
}
.header__menu.anim span:nth-child(1) {
transform: translate(5px, 8px) rotate(135deg);
}
.header__menu.anim span:nth-child(2) {
opacity: 0;
}
.header__menu.anim span:nth-child(3) {
transform: translate(5px, -8px) rotate(-135deg);
}
/* ----------------------------- */
/* --------------------------------------------- */
/* home-hero
------------ */
.home__hero {
background-image: url('./images/mobile/image-header.jpg');
padding: 10em 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom 20% right;
font-family: 'Fraunces', serif;
}
.title {
color: hsl(0, 0%, 100%);
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3rem;
padding-bottom: 3.5em;
}
.container {
position: relative;
}
.hero__arrow {
position: absolute;
right: 50%;
top: 60%;
transform: translateX(50%);
}
/* about
------------ */
.about__cta {
display: grid;
grid-template-columns: auto;
}
.about__card {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg__spec__img__1,
.bg__spec__img__2,
.graphic__design__card,
.photo__card {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bg__spec__img__1 {
background-image: url('./images/mobile/image-transform.jpg');
min-height: 45vh;
}
.bg__spec__img__2 {
background-image: url('./images/mobile/image-stand-out.jpg');
min-height: 45vh;
}
.graphic__design__card,
.photo__card {
min-height: 80vh;
}
.graphic__design__card {
background-image: url('./images/mobile/image-graphic-design.jpg');
background-position: top;
}
.photo__card {
background-image: url('./images/mobile/image-photography.jpg');
}
@media (min-width: 50em) {
}
这是我想要的桌面布局
：
更准确地说，我在我的“about__cta”部分挣扎，这些卡片，就在带有标题“我们是创意者”的英雄部分之后
解决方案
推荐阅读
- git - git 忽略文件以进行更改，但不要忽略文件以在存储库中合并
- amazon-web-services - Amazon Aurora 快照备份是完整的还是增量的？
- javascript - 触发器选项不在 jquery 中执行 ajax 调用
- python - skfuzzy 中的 AND 运算符
- java - Micronaut - Springframework @Bean 等价物是什么？
- android - 即使在用户从最近的应用程序中删除应用程序后，如何安排和发送通知？
- javascript - Hover over image to add effect, hover again to make it dissapear
- scala - 数据框到 RDD 代码段不起作用
- mysql - Laravel中的Mysql数据库迁移错误
- html - 引导表越过智能手机的屏幕边缘