반응형
Figma
Created with Figma
www.figma.com
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style>
</style>
</head>
<body>
<div class="l_wrapper">
<header class="header-title">
<h1>Business name:</h1>
<p>Exploration Station</p>
</header>
<main class="main-container">
<div class="main-contents">
<h2>Team members:</h2>
<p class="ir">Top features or possible solutions</p>
<div class="contents-card" >
<ul>
<li>John D.</li>
<li>Jane S.</li>
<li>Tom R.</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Solution:</h2>
<p>Top features or possible solutions</p>
<div class="contents-card">
We offer kids a fun and safe place to explore using science-based experimentation and live workshops.
</div>
</div>
<div class="main-contents">
<h2>Value proposition?:</h2>
<p>Why are you worth it? </p>
<div class="contents-card">
<ul>
<li>We make learning fun.</li>
<li>Our science experiments are safe but exciting.</li>
<li>There is not another science center in our area.</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Viability:</h2>
<p>Your company’s ability to grow and why it works.</p>
<div class="contents-card">
We offer families and kids a fun alternative to the movies, parks, or restaurants.
</div>
</div>
<div class="main-contents">
<h2>Existing alternatives:</h2>
<p>Problems that are already solved or competitors</p>
<div class="contents-card">
<ul>
<li>Bounce House Trampoline Park</li>
<li>Local parks</li>
<li>Local theaters</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Replacements:</h2>
<p>Existing solutions that might cause you to lose customers</p>
<div class="contents-card">
Kids may not want to come because they correlate learning activities with school.
</div>
</div>
<div class="main-contents">
<h2>Customer segments or target market:</h2>
<p>Your target customers</p>
<div class="contents-card">
Families and children from ages 6-15
</div>
</div>
<div class="main-contents">
<h2>Factors that help with success:</h2>
<p>Components that will help your business succeed</p>
<div class="contents-card">
<img src="./Thumbs up.svg" alt="" class="thumbs-icon">
<ul>
<li>We are unique and offer families something outside of the box.</li>
<li>There are no local competitors.</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Goals:</h2>
<p>Measurable goals for the business</p>
<div class="contents-card">
<ul>
<li>Increase brand awareness by 30%.</li>
<li>Gain placements on local radio and in newspaper.</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Marketing:</h2>
<p>How to acquire new customers</p>
<div class="contents-card">
<ul>
<li>Local PR</li>
<li>Social media following</li>
<li>Regular website updates</li>
</ul>
</div>
</div>
<div class="main-contents">
<h2>Unique value:</h2>
<p>The level of value you offer to your audience</p>
<div class="contents-card">
An affordable way to entertain kids
</div>
</div>
<div class="main-contents">
<h2>Vision:</h2>
<p>TWhat you want to accomplish</p>
<div class="contents-card">
<img src="./Star.svg" alt="" class="star-icon">
We aim to provide children a safe and fun place to learn with age-appropriate science-based workshops and activities.
</div>
</div>
</main>
</div>
</body>
</html>
CSS
/* 초기화 */
html{
font-size: 16px;
}
body,p, ul{
margin: unset;
}
h1,h2{
font-size: unset;
font-weight: unset;
margin: unset;
}
li{
margin: unset;
padding: unset;
list-style-type: disc;
}
/* 레이아웃 */
.ir {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.l_wrapper{
max-width: 1242px;
margin: 0 auto;
/* box-shadow: inset 0 0 10px black; */
}
.header-title{
min-height: 89px;
/* box-shadow: inset 0 0 10px red; */
background-color: #E6E6E6;
margin-bottom: 10px;
}
.header-title h1{
line-height: 150%;
}
.main-container{
gap: 20px;
/* border: 3px solid blue; */
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
/* grid-template-columns: 400px minmax(); */
}
.main-contents{
/* border: 3px solid yellow; */
background-color: var(--common-color);
}
.main-contents:nth-child(2){
grid-column-start: 2;
grid-column-end: 4;
width: auto;
}
.main-contents:nth-child(4){
grid-column-start: 2;
grid-column-end: 4;
width: auto;
}
.main-contents:nth-child(6){
grid-column-start: 2;
grid-column-end: 4;
width: auto;
}
.contents-card{
box-shadow: 0 1px 1px rgba(0,0,0,0.15),
0 2px 2px rgba(0,0,0,0.15),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.15);
position: relative;
}
.main-contents:nth-child(1) .contents-card{
background-color: var(--card-color-pink);
width: 128px;
height: 128px;
margin: 27px 0 18px 34px;
padding-right: 40px;
padding-top: 20px;
}
.main-contents:nth-child(2) .contents-card{
background-color: var(--card-color-pink);
width: 222px;
height: 128px;
margin: 14px 0 18px 33px;
padding: 23px;
}
.main-contents:nth-child(3) .contents-card{
background-color: var(--card-color-lightred);
width: 222px;
height: 128px;
margin: 28px 0 10px 60px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(4) .contents-card{
background-color: var(--card-color-lightred);
width: 222px;
height: 128px;
margin: 28px 0 18px 107px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(5) .contents-card{
background-color: var(--card-color-purple);
width: 222px;
height: 128px;
margin: 28px 45px 18px 133px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(6) .contents-card{
background-color: var(--card-color-purple);
width: 222px;
height: 128px;
margin: 28px 45px 18px 70px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(7) .contents-card{
background-color: var(--card-color-blue);
width: 128px;
height: 128px;
margin: 28px 150px 9px 121px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(8) .contents-card{
background-color: var(--card-color-green);
width: 222px;
height: 128px;
margin: 28px 94px 9px 84px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(9) .contents-card{
background-color: var(--card-color-blue);
width: 222px;
height: 128px;
margin: 28px 104px 9px 74px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(10) .contents-card{
background-color: var(--card-color-yellow);
width: 222px;
height: 128px;
margin: 28px 144px 9px 34px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(11) .contents-card{
background-color: var(--card-color-yellow);
width: 128px;
height: 128px;
margin: 28px 108px 9px 164px;
padding: 10px 10px 32px 10px;
}
.main-contents:nth-child(12) .contents-card{
background-color: #FFD966;
width: 222px;
height: 128px;
margin: 28px 89px 9px 89px;
padding: 10px 10px 32px 10px;
/* background-image: url(./Star.svg);
background-repeat: no-repeat; */
}
.star-icon{
position: absolute;
left:85%;
}
.thumbs-icon{
position: absolute;
left: 75%;
top: 64%;
}
/*타이포그래피*/
:root{
--font-size-title: 1.4rem;
--font-size-small: 0.87rem;
--common-color:#BDE3FF;
--card-color-pink:#FFBDF2;
--card-color-lightred:#FFAFA3;
--card-color-purple:#D9B8FF;
--card-color-blue:#75D7F0;
--card-color-green:#85E0A3;
--card-color-yellow:#FFC470;
}
:root{
font-family: 'inter',sans-serif;
}
.header-title h1{
font-size: var(--font-size-title);
line-height: 150%;
letter-spacing: -0.276px;
padding: 10px;
font-weight: 700;
}
.header-title p {
font-size: 2.3rem;
line-height: 150%;
letter-spacing: -0.511px;
padding: 10px;
font-weight: 500;
}
.main-contents h2{
font-size: var(--font-size-title);
font-weight: 700;
line-height: 150%;
letter-spacing: -0.276px;
padding: 7px 0 0 9px;
}
.main-contents p{
font-size: var(--font-size-small);
line-height: 150%;
letter-spacing: -0.165px;
padding-left: 9px;
}
결과물 문제점
- grid item 속성을 사용 했고 flex box를 사용 하는 방법 또 한 있을 것이다. (병합속성을 사용해야 할 것 같아서 grid 사용)
- position 속성을 사용하여 card의 부모에게 relative를 적용하고 자식인 card에 absolute를 적용하는 방법?
- nth-child 12번이나 사용했기에 코드가 지저분하다. 다른 방법이 있을 것 같다
- 반응형도 적용해봐야 하지만 우선적으로 레이아웃 연습.
반응형
'HTML - CSS' 카테고리의 다른 글
| (24.08.29) - 레이아웃 수련 1일차 [리뷰 필요] (0) | 2024.08.30 |
|---|