Сегодня вы узнаете как создать НЕ адаптивный дизайн шапки сайта для личного портфолио используя HTML, CSS и jаvascript. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом.
Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Personal Portfolio Website Design using HTML CSS and jаvascript</title>
<!---link file css--->
<link rel="stylesheet" href="styleShop.css">
<!--link font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<header>
<h1 class="logo"><span>self</span>code </h1>
<nav class="nabar">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">service</a>
<a href="#">product</a>
<a href="#">contact</a>
</nav>
</header>
<!-----------------------------section Home----------------------------------->
<section class="Home">
<div class="content">
<h1>new <span>winter</span> <br> collection 2024</h1>
<p>I design website - If you follow the step-by-step <br>video you will
able to make a beautiful website using <br> HTML & CSS</p>
<a href="#" class="btn">shop now</a>
</div>
<div class="mainImg">
<img src="home1.jpg" alt="" id="mainimg">
</div>
<div class="smallImg">
<img src="home1.jpg" alt="">
<img src="home2.jpg" alt="">
<img src="home4.jpg" alt="">
<img src="home5.jpg" alt="">
<img src="home6.jpg" alt="">
<img src="home7.jpg" alt="">
</div>
</section>
<!----------------link file jаvascript---------------->
<script src="file.js"></script>
</body>
</html>CSS КОД:
/*add link font google*/
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
transition: .4s ease-in-out;
}
body{
height: 100vh;
background-color: #f1f1f1;
}
header{
width: 100%;
padding: 20px 5%;
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
}
header .logo{
position: relative;
font-size: 35px;
text-transform: capitalize;
letter-spacing: 1px;
padding: 8px 10px;
cursor: pointer;
}
header .logo span{
color: #c96649;
}
header .logo:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-left: solid 6px #c96649;
border-top:solid 6px #c96649 ;
transition: .3s linear;
}
header .logo:after{
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
border-right: solid 6px #c96649;
border-bottom:solid 6px #c96649 ;
transition: .3s linear;
}
header .logo:hover::before ,
header .logo:hover::after{
width: 100%;
height: 100%;
}
header .nabar a {
font-size: 18px;
text-decoration: none;
text-transform: capitalize;
font-weight: 500;
color: #222;
padding: 4px 8px;
transition: .3s ease-in-out;
border-bottom: solid 3px transparent;
}
header .nabar a:hover{
border-bottom: solid 3px #c96649;
color: #c96649;
}
/*--------------------------section Home---------------------------------*/
.Home{
position: relative;
height: 100vh;
display: flex;
align-items: center;
padding: 5%;
justify-content: space-between;
overflow: hidden;
}
.Home .content h1{
font-size: 60px;
text-transform: capitalize;
color: #222;
}
.Home .content h1 span{
color: #c96649;
}
.Home .content p{
color: #111;
font-size: 17px;
margin: 20px 0 30px;
line-height: 1.6;
}
.Home .content .btn{
display: inline-block;
padding: 10px 30px;
background-color: #c96649;
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
text-decoration: none;
color: #f1f1f1;
transition: .3s ease-in-out;
border-radius: 10px;
}
.Home .content .btn:hover{
transform: scale(.95);
}
.Home .mainImg img{
height: 450px;
cursor: pointer;
animation: animated 3s linear infinite alternate-reverse;
transform-origin: top;
}
.Home .mainImg img:hover{
animation-play-state: paused;
}
.Home .smallImg img{
height: 70px;
cursor: pointer;
margin: 0 4px;
animation: animated 5s linear infinite alternate-reverse;
transform-origin: top;
}
.Home .smallImg img:hover{
animation-play-state: paused;
}
.Home .smallImg{
position: absolute;
bottom: 30px;
left: 45%;
transform: translateX(-50%);
padding: 6px;
}
.Home .smallImg::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-left: solid 6px #c96649;
border-top: solid 6px #c96649;
transition: .3s linear;
z-index: 2;
}
.Home .smallImg::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
border-right: solid 6px #c96649;
border-bottom: solid 6px #c96649;
transition: .3s linear;
}
@keyframes animated{
0%{
transform: rotate(-10deg);
}
100%{
transform: rotate(20deg);
}
}jаvascript КОД:
let smallImg = document.querySelectorAll(".smallImg img");
let mainImg = document.querySelector("#mainimg");
smallImg[0].onclick = function () {
mainImg.src = smallImg[0].src
}
smallImg[1].onclick = function () {
mainImg.src = smallImg[1].src
}
smallImg[2].onclick = function () {
mainImg.src = smallImg[2].src
}
smallImg[3].onclick = function () {
mainImg.src = smallImg[3].src
}
smallImg[4].onclick = function () {
mainImg.src = smallImg[4].src
}
smallImg[5].onclick = function () {
mainImg.src = smallImg[5].src
};
