개발/부트캠프

사전캠프 : 숙제_HTML, CSS를 활용하여 화면 만들기

EJ EJ 2024. 12. 17. 17:33
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>푸드파이터</title>
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="../static/firebase2.js" type="module"></script>
<style>

* {
font-family: "Gowun Dodum", sans-serif;
}

.titi {
font-family: "Black Han Sans", sans-serif;
}

/* 구글 폰트 import url 넣어주세요. */
/* 구글 폰트 CSS rules를 전체 적용해 주세요. */

.conten {
width: 600px;
margin-left: 140px;
}

body {
background-color: white;
color: black;
}

.header {
background-size: cover;
background-image:
background-position: right;
height: 650px;
display: flex;
flex-direction: column;
}

.header>h1 {
margin: 0;
font-size: 40px;
}

.header>div {
font-size: 18px;
margin-top: 10px;
}

.form-button {
width: 150px;
height: 40px;
background-color: transparent;
border: 1px solid tr;
color: black;
font-size: 15px;
margin: 20px 10px 0px 0px;
}

.form-button:hover {
border: 2px solid black;
}

.info-button {
margin: 20px 0 0 15px;
height: 40px;
font-size: 14px;
}

.post {
width: 500px;
margin: 20px 0px 1px 20px;
padding: 20px;
box-shadow: 0px 0px 3px 0px transparent;
background-color: wheat;
}

.form-floating input,
.form-floating textarea {
color: black;
background-color: white;
}

.button2 {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}

.button2>button {
margin-right: 10px;
}

.mycards {
width: 1600px;
margin: 30px auto;

flex-direction: row;
align-items: center;
}

.card {
border-radius: 30px;
background-color: white;
border: none;
color: black;
margin-left: 50px;
}

.card-img-top {
object-fit: cover;
height: 250px;
border-radius: 20px;
}

.card-title {
margin-top: 10px;
font-size: 18px;
}

.card-body {
border: blanchedalmond 2px solid;
border-radius: 20px;
}

.card-text {
color: black;
}

.comment {
color: black;
}

.play-button {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}

a.nav-link {
color: #F17228;
font-size: large;
}

.icon {
height: 50px;
}

.card-button {
background-color: orange;
color: white;
text-align: center;
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
}

.card-title {
font-weight: bold;
}

.card-button> :hover {
background-color: darkorange;
}

#input-card {
width: 500px;
margin: 0px 0px 0px 135px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: left;
}

.form-floating input,
.form-floating textarea {
color: black;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}

.form-floating label {
color: #333;
}

.input-group button,
.input-group select {
background-color: rgb(168, 161, 161);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}

.input-group button:hover,
.input-group select:hover {
background-color: gray;
}

.button2 {
text-align: right;
}

.button2 button {
background-color: #F17228;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button2 button:hover {
background-color: #f3620f;
}

.jumbotron-message {
margin-left: 150px;
font-size: 1500px;
}
</style>
</head>

<body>
<!-- Navbar -->
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
class="icon"></li>
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."
aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="header">
<div class="ff">
<div class="conten">
<h1 style="padding-top: 70px;" class="display-5 fw-bold"><span class="titi">스파르타 푸드파이터</span></h1>
<p class="col-md-8 fs-4">본인만의 맛집을 소개하는 사이트입니다.</p>
<p class="col-md-8 fs-4">맛집을 소개해 주세요!</p>
</div>
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="foodTitle" placeholder="영화 제목">
<label for="foodTitle">음식명</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">별점</button>
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected>별점 선택</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

<!-- 점보 트론 적용 jumbotron -->
- Bootstrap 사이트에서 jumbotron가져와 vscode에 붙여 넣어주세요.
- 배경 이미지 적용을 위해 <div class="header"> 로 감싸주세요.
- jumbotron의 내용을 예시사진과 똑같게 내용을 변경해 주세요.
- 필요 없는 버튼, div를 적절하게 삭제
- jumbotron <h1> 태그안에 `Blank Han Sans` 폰트 스타일을 적용해 주세요. -->

<!-- 부트스트랩 인풋 박스 적용-->



<!-- 부트스트랩 카드 적용-->
<div class="mycards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
alt="...">
<div class="card-body">
<h5 class="card-title">하와이안 피자</h5>
<p class="card-text">⭐⭐⭐⭐</p>
<p class="card-text">이건 꼭 먹어봐야 해!</p>
<button type="button" class="card-button" id="addBtn"> 주문하기 </button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">크리스피 버거</h5>
<p class="card-text">⭐⭐⭐</p>
<p class="card-text">최고의 수제버거!</p>
<button type="button" class="card-button" id="addBtn"> 주문하기 </button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="data:image/jpeg;base64,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"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">해물 라면</h5>
<p class="card-text">⭐⭐⭐⭐⭐</p>
<p class="card-text">국물이 아주 시원해요!</p>
<button type="button" class="card-button" id="addBtn"> 주문하기 </button>
</div>
</div>
</div>
</div>
</div>
- Bootstrap 사이트에서 cards 가져와 vscode에 붙여 넣기
- *Docs → Card → Grid cards에서 3번째 코드입니다.*
- <button> 태그를 생성해 주세요.
- <button> 태그안에 `card-button` 클래스를 부여해 주세요.
- 카드에 내용은 자유롭게 채워 주세요. -->
</div>

<div class="container2">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
</a>
<p class="text-body-secondary">©Teamsparta 2024</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>

<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>

<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>
</div>
</body>

</html>

'개발 > 부트캠프' 카테고리의 다른 글

사전캠프 : 웹개발 종합반 3  (0) 2024.12.16
사전캠프 : 웹개발 종합반 2  (1) 2024.12.13
사전캠프 : 웹개발 종합반 1  (0) 2024.12.10
사전캠프 Spring 퀘스트 2  (1) 2024.12.06
사전캠프 Spring 퀘스트 1  (0) 2024.12.05

'개발/부트캠프'의 다른글

  • 현재글사전캠프 : 숙제_HTML, CSS를 활용하여 화면 만들기

관련글

티스토리툴바