Извините, я пропустил тот журнал, который я сделал. это означает, что я не писал журнал о части HTML и CSS. Так что я напишу это очень быстро, Кратко.
Создание журнала фильмов (просто нажмите Ctrl C и V)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title> bootstrap practice </title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mytitle {
background-color: aqua;
height: 250px;
width: 100%;
background-image: url(https://images.immediate.co.uk/production/volatile/sites/4/2021/08/edge-of-the-universe-5dfee93.jpg?quality=90&webp=true&resize=1200,510);
background-size: cover;
background-position: center;
color: black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: black;
border-radius: 50px;
border: 1px solid black;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid black;
}
.mycomment {
color: gray;
}
.wrap {
max-width:1200px;
width:95%;
margin: 20px auto 0 auto;
}
.mypost {
max-width:500px;
width:95%;
margin: 20px auto 0 auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.mybtn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1> My Favorite Moives </h1>
<button onclick="hey()"> Movie log</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">movie URL </label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Ratings</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</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="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-light">Write</button>
<button type="button" class="btn btn-dark">Close</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://yunhuei.files.wordpress.com/2022/12/avatar-wayofwater-en_a56a9e95.webp?w=600&zoom=2"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Synopsis</h5>
<p class="card-text">Set more than a decade after the events of the first film, “Avatar: The Way of Water”
begins to tell the story of the Sully family (Jake, Neytiri, and their kids), the trouble that follows them,
the lengths they go to keep each other safe, the battles they fight to stay alive, and the tragedies they
endure..</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> This space is for comment </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://yunhuei.files.wordpress.com/2014/04/the-best-offer-poster.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Synopsis</h5>
<p class="card-text">The Best Offer is the tale of the solitary, cultured Virgil Oldman (Geoffrey Rush), no
longer young, whose reluctance to engage with others is matched only by the dogged obsessiveness with which
he practices his profession of art expert and auctioneer. Asked to handle the valuation and sale of a
mysterious woman, Claire Ibbeston’s (Sylvia Hoeks) priceless heirlooms, Virgil finds himself enveloped by a
passion that will transform his grey existence forever..</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> This space is for comment </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://yunhuei.files.wordpress.com/2022/06/top-gun-maverick-movie-new-hd-poster-.webp?w=1272&zoom=2"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Synopsis</h5>
<p class="card-text">Facing an uncertain future and confronting the ghosts of his past, Maverick is drawn into
a confrontation with his own deepest fears. Culminating in a mission that demands the ultimate sacrifice
from those who will be chosen to fly it.</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> This space is for comment </p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://yunhuei.files.wordpress.com/2021/10/a7230c52-f8c1-11ea-abff-2457eb7eaea0.webp?w=960&zoom=2"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Synopsis</h5>
<p class="card-text"> In No Time To Die, Bond has left active service and is enjoying a tranquil life in
Jamaica. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help.
The mission to rescue a kidnapped scientist turns out to be far more treacherous than expected, leading Bond
onto the trail of a mysterious villain armed with dangerous new technology.</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> This space is for comment </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
практика JAVASCRIPT
Нечетное число и четное число
- Кончик.
- == означает равенство
2. % означает деление
3. напишите этот код, а затем нажмите кнопку (журнал движения)
4. Этот код похож на +1, когда я нажимаю кнопку. и разделите нажатое число. если число равно 0. показать «четное число», если число не равно 0. показать «нечетное число».
</style>
<script>
let count = 0
function hey(){
count += 1
if (count % 2 == 0) {
alert('Even number')
} else {
alert('Odd number')
}
}
