Слетают стили, при изменении размера сайта + на десктопной версии не правильно отображается фото (Она должна находится под надписью "Это я"). Борюсь весь день, не могу найти причину А насчет адаптивного дизайна, на мобильной версии все слишком маленькое и растянутое... Можете посмотреть на сайт тут - https://kayabots.ru Html:
<!DOCTYPE html>
<html lang="ru">
<head>
<link href="style.css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="48x48" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="144x144" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="256x256" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="384x384" href="img/Logo/logo.png">
<link rel="icon" type="image/png" sizes="512x512" href="img/Logo/logo.png">
<link rel="apple-touch-icon" href="img/Logo/logo.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/Logo/logo.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/Logo/logo.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/Logo/logo.png">
<title>KayaBots</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar">
<h1 class="brand"><img src="img/Logo/white.png" height="35" width="174" alt="KayaBots"></h1>
<div class="toggle-btn">
<span></span>
<span></span>
</div>
<ul class="links-container">
<li class="links-item"><a href="#" class="link active">главная</a></li>
<li class="links-item"><a href="#project-section" class="link">проекты</a></li>
<li class="links-item"><a href="#about-section" class="link">обо мне</a></li>
<li class="links-item"><a href="#contact-section" class="link">контакты</a></li>
</ul>
</nav>
<section class="home">
<div class="hero-content">
<h1 class="hero-heading"><span class="highlight">Привет, </span>я Саша</h1>
<p class="profession">Chat-Bots developer</p>
<p class="info">Начал свой путь в IT-сфере с 2015 года. Функциональных чат-ботов создаю с 2019 года. <span class="highlight">Автоматизирую бизнес-процессы.</span></p>
<a href="#contact-section" class="btn">связаться</a>
</div>
<img src="img/home.png" class="image" height="435" width="435" alt="">
</section>
<!-- about section -->
<section class="about" id="about-section">
<h2 class="heading">Обо <span class="highlight">мне</span></h2>
<p class="sub-heading">Александр Кая</p>
<div class="seperator"></div>
<div class="about-me-container">
<div class="left-col">
<img src="img/ava.jpg" class="about-image" alt="">
</div>
<div class="right-col">
<p class="about-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus totam quia numquam tempora nostrum earum similique enim laudantium iusto. Quaerat illo numquam minus pariatur, cum qui ipsum sapiente, atque optio voluptatibus necessitatibus, quis dolores veniam delectus inventore beatae? Accusamus, illum! Non nam dolores assumenda quibusdam repellat beatae quae eum atque sed, velit culpa, at animi cumque suscipit. Ratione delectus dolores odit dicta ipsum libero molestiae et reprehenderit sapiente earum. Alias aut architecto quis, earum iusto beatae quibusdam maiores, rerum, consequatur aliquid doloribus? Quas accusantium quidem eos ex, aperiam recusandae. Veritatis</p>
</div>
</div>
<h2 class="heading">languages and framework i know</h2>
<div class="seperator"></div>
<div class="skill-container">
<div class="skill-card" style="--bg: #f06529">
<p class="skill">HTML</p>
</div>
<div class="skill-card" style="--bg: #379ad6">
<p class="skill">CSS</p>
</div>
<div class="skill-card" style="--bg: #cc6699">
<p class="skill">SCSS</p>
</div>
<div class="skill-card" style="--bg: #f7df1e">
<p class="skill">JavaScript</p>
</div>
<div class="skill-card large" style="--bg: #5ed9fb">
<p class="skill">ReactJS</p>
</div>
<div class="skill-card large" style="--bg: #83cd29">
<p class="skill">NodeJS</p>
</div>
<div class="skill-card" style="--bg: #326690">
<p class="skill">Postgres SQL</p>
</div>
<div class="skill-card" style="--bg: #ffa000">
<p class="skill">Firebase</p>
</div>
<div class="skill-card large" style="--bg: #5ed9fb">
<p class="skill">Much More</p>
</div>
</div>
</section>
<!-- project section -->
<section class="project" id="project-section">
<h2 class="heading">Project<span class="highlight">s</span></h2>
<p class="sub-heading">Lorem ipsum dolor sit amet consectetur. </p>
<div class="seperator"></div>
<div class="filters">
<button class="filter-btn active" id="all">все</button>
<button class="filter-btn" id="builder">конструктор</button>
<button class="filter-btn" id="code">самописный</button>
<button class="filter-btn" id="integration">с интеграцией</button>
<button class="filter-btn" id="fullstack">fullStack</button>
</div>
<div class="project-container">
<!--<div class="project-card">
<img src="img/project1.png" alt="">
<div class="content">
<h1 class="project-name">project one</h1>
<span class="tags">#javascript</span>
</div>
</div>-->
</div>
</section>
<script src="project.js"></script>
<script src="app.js"></script>
<section class="about" id="about-section">
<h2 class="heading">Контакты</h2>
<div class="seperator"></div>
<div class="skill-container">
<div class="skill-card" style="--bg: #36a1d4">
<a href=""><p class="skill">Telegram</p></a>
</div>
<div class="skill-card" style="--bg: #f2c200">
<a href=""><p class="skill">Почта</p></a>
</div>
<div class="skill-card" style="--bg: #e51919">
<a href=""><p class="skill">Телефон</p></a>
</div>
<div class="skill-card" style="--bg: #36a1d4">
<p class="skill">Telegram канал</p>
</div>
</div>
</section>
<h6 class="heading" id="copyright">© Copyright KayaBots 2022 </h6>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
width: 100%;
position: relative;
background: #050B20;
color: #fff;
font-family: 'roboto', sans-serif;
}
/* navbar */
.navbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #050B20;
padding: 0 10vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 9;
}
.brand{
text-transform: capitalize;
font-weight: 500;
}
.links-container{
display: flex;
list-style: none;
}
.link{
text-transform: capitalize;
color: #fff;
text-decoration: none;
margin: 0 10px;
padding: 10px;
position: relative;
}
.link:hover:not(.active){
opacity: 0.7;
}
.link.active::before,
.seperator::before{
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
}
.link.active::after,
.seperator::after{
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}
/* home section */
.home{
width: 100%;
min-height: calc(100vh - 60px);
height: auto;
margin-top: 60px;
padding: 0 10vw;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.hero-content{
width: 50%;
}
.hero-heading{
font-size: 5rem;
text-transform: capitalize;
font-weight: 500;
}
.highlight{
color: #00D795;
}
.profession{
width: fit-content;
display: block;
margin: 10px 0 20px;
margin-left: auto;
text-transform: capitalize;
position: relative;
padding: 10px 20px;
color: #1d1d1d;
z-index: 2;
}
.profession::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e3e3e3;
z-index: -1;
transform: skewX(10deg);
}
.profession::after{
content: '';
position: absolute;
top: 0;
left: -100px;
width: 100px;
height: 2px;
background: #e3e3e3;
}
.info{
line-height: 30px;
margin-bottom: 50px;
}
.btn{
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
background: #00D795;
color: #fff;
text-transform: capitalize;
border: none;
}
/* about section */
.about{
width: 100%;
height: auto;
padding: 50px 10vw;
}
.heading{
text-align: center;
font-weight: 500;
font-size: 3.5rem;
text-transform: capitalize;
}
.sub-heading{
text-align: center;
font-size: 1rem;
margin: 10px;
opacity: 0.7;
}
.seperator{
width: 25%;
margin: 20px auto;
position: relative;
}
.about-me-container{
margin: 150px 0 100px;
width: 100%;
display: grid;
grid-template-columns: 40% 60%;
grid-gap: 50px;
}
.left-col, .right-col{
position: relative;
}
.left-col::before{
content: 'да, это я';
text-transform: capitalize;
position: absolute;
right: 0;
top: -20px;
}
.left-col::after{
content: '';
position: absolute;
top: -10px;
right: 80px;
width: 50px;
height: 2px;
background: #fff;
transform-origin: right;
transform: rotate(-30deg);
}
.about-image{
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
position: absolurt;
}
.about-para{
font-size: 1.2rem;
font-weight: 300;
line-height: 35px;
margin-bottom: 40px;
}
::-webkit-scrollbar {
width: 7px;
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color: #00D795;
}
.skill-container{
position: relative;
margin-top: 100px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.skill-card{
height: 200px;
border-radius: 10px;
border: 1px solid #464646;
text-align: center;
position: relative;
cursor: pointer;
transition: .5s;
}
.skill{
font-size: 2rem;
color: #464646;
line-height: 200px;
}
.skill-card:hover{
background: var(--bg);
}
.skill-card:hover .skill{
color: #fff;
}
.skill-card.large{
grid-column: 2 span;
}
/* project section */
.project, .contact{
position: relative;
padding: 50px 10vw;
}
.filters{
width: fit-content;
display: block;
margin: 100px auto;
}
.filter-btn{
padding: 10px 20px;
border-radius: 5px;
border: none;
text-transform: capitalize;
margin: 0 5px 10px;
cursor: pointer;
}
.filter-btn.active{
background: #00D795;
color: #fff;
}
.project-container{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.project-card{
position: relative;
cursor: pointer;
display: block;
}
.project-card img{
width: 100%;
height: 100%;
object-fit: cover;
}
.project-card .content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
text-transform: capitalize;
opacity: 0;
}
.project-name{
font-weight: 300;
font-size: 2.5rem;
text-align: center;
}
.tags{
position: absolute;
bottom: 20px;
opacity: 0.6;
width: 90%;
}
.project-card:hover .content{
opacity: 1;
}
.project-card.hide{
display: none;
}
a {
text-decoration: none;
}
#copyright{
font-size: 15px;
}
.contacts {
background-color: #050B20;
color: #00D795;
text-align: center;
width: 100%;
height: auto;
margin-top: 60px;
padding: 0 10vw;
}
.contact_block{
height: 287px;
width: 300px;
margin: 0;
display: inline-block;
border: 2px solid #00D795;
text-align: center;
vertical-align: middle;
margin-right: 50px;
}
.last {
margin: 0;
}
.contact {
width: 100%;
margin-top: 70px;
}
.divider_tel {
height: 100px;
width: 100%;
padding-top: 30px;
text-align: center;
vertical-align: middle;
}
.divider_tel_2 {
height: 2px;
background-color: #00D795;
}
.tel2 {
text-decoration: none;
color: white;
}
.tel2:hover {
color: #00D795; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: none;
transition: 0.7s;
}
.tel {
margin: 0;
font-size: 27px;
height: 180px;
padding-top: 22%;
text-align: center;
vertical-align: middle;
display: inline-block;
}
#number {
display: inline-block;
vertical-align: middle;
}
.text_tel {
display: inline-block;
vertical-align: middle;
font-size: 33px;
margin: 0;
margin-left: 5px;
}
.last_d {
background-color: gray;
}
.copy p {
margin: 0;
display: inline-block;
vertical-align: middle;
margin-top: 20px;
}
.copy {
background-color: black;
height: 60px;
text-align: center;
color: gray;
}
/* tablet view */
@media screen and (max-width: 1350px){
html{
font-size: 14px;
}
/* toggle btn */
.image {
margin-bottom: 0;
}
.toggle-btn{
position: absolute;
width: 40px;
height: 40px;
right: 10vw;
cursor: pointer;
}
.toggle-btn span{
position: absolute;
width: 100%;
height: 2px;
background: #fff;
top: 30%;
transition: .5s;
}
.toggle-btn span:nth-child(2){
top: 70%;
}
.toggle-btn.active span:nth-child(1){
top: 50%;
transform: rotate(45deg);
}
.toggle-btn.active span:nth-child(2){
top: 50%;
transform: rotate(-45deg);
}
/* links */
.links-container{
position: absolute;
top: 60px;
background: #1d1d1d;
width: 100%;
left: 0;
padding: 0 10vw;
flex-direction: column;
transition: .5s;
opacity: 0;
pointer-events: none;
}
.links-container.show{
opacity: 1;
pointer-events: all;
}
.link{
margin-left: auto;
text-align: center;
display: block;
height: 50px;
}
/* home section */
.home{
flex-direction: column-reverse;
height: 2000px;
padding-bottom: 50px;
}
.home .image{
width: 250px;
margin: 40px;
}
.hero-content{
width: 70%;
min-width: 350px;
text-align: center;
}
.hero-heading{
font-size: 4.5rem;
}
/* about-section */
.about-me-container{
grid-template-columns: 1fr;
}
.left-col{
margin: auto;
width: 50%;
min-width: 320px;
}
.skill-container, .project-container{
grid-template-columns: repeat(2, 1fr);
}
.skill-card{
grid-column: 1 span !important;
}
}
/* mobile view */
@media screen and (max-width: 1090px){
html{
font-size: 12px;
}
p, .sub-heading, .about-para, .left-col::before, .tags{
font-size: 1.4rem;
}
.image {
margin-bottom: 0;
}
.about-image{
width: 90%;
margin: auto;
display: block;
}
.skill-container, .project-container{
grid-template-columns: 1fr;
}
.skill{
font-size: 2.5rem;
}
.project-name{
font-size: 3rem;
}
.name{
flex-direction: column;
}
.name input{
width: 100%;
}
.first-name{
margin-bottom: 20px !important;
}
}
Может кто увидит ошибку... Буду очень благодарен за помощь