#javascript #html #css #responsive-design
Вопрос:
Я пытаюсь сделать эту навигационную панель отзывчивой на
Это сработало, но я понял, что когда я снова изменяю размер экрана до >480 пикселей, навигационная панель все еще скрыта, потому что стиль «дисплей:нет» встроен.
Может ли кто-нибудь предложить лучшее решение ?
let counter = 1;
let myinterval = setInterval(startInterval,2000);
function startInterval(){
document.getElementById("select" counter).checked = true;
counter
if(counter > 3){
counter = 1
}
}
for(let i = 0 ; i < 3 ; i ){
document.getElementsByTagName("label")[i].onclick = function(){
clearInterval(myinterval)
}
}
let drop = document.getElementsByClassName("dropdown")[0]
drop.onclick = function(){
let menu = document.getElementById("navdrop")
if(menu.style.display === "none" || menu.style.display ===""){
menu.style.display = "flex"
}else{
menu.style.display = "none"
}
} *,*::after,*::before{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
height:5000px;
padding-top:71.7px
}
.container1{
height:96.5vh;
display: flex;
flex-direction: column;
}
.container1 nav{
display: flex;
height:11%;
padding: 10px 140px;
font-family: 'Roboto', sans-serif;
position:fixed;
background-color: white;
z-index: 999;
width: 100%;
top:0;
}
.container1 nav .dropdown{
display:none;
flex-direction: column;
height:50%;
width:40px;
margin-left:auto;
position: absolute;
right:20px;
top:50%;
transform: translateY(-50%);
justify-content: center;
cursor:pointer;
}
.container1 nav .dropdown:hover div{
background-color: black ;
}
.container1 nav .dropdown div{
height:5%;
width:100%;
background-color: rgb(211, 208, 208);
transition: all 0.2s ease;
}
.container1 nav .logo svg{
width:100%;
height:100%
}
.container1 nav ul{
display:flex;
list-style-type: none;
margin-left: auto;
margin-right: 1%;
align-items: center;
width:43%;
justify-content: space-between;
gap:4%
}
.container1 nav ul li{
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(0.8rem,1.150vw,1.3rem)
}
.container1 nav ul li a:hover{
color:black
}
.container1 nav ul li a{
text-decoration: none;
color:#777;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: color 0.3s ease;
}
.container1 nav ul li:last-child button{
border:none;
padding:0px 14px;
background-image: linear-gradient(90deg,#8b62ff 0,#3b1bff);
color:white;
font-size:clamp(0.9rem,1.1vw,1.2rem);
height:90%;
transition:all 0.2s ease;
cursor:pointer;
border-radius: 3px;
}
.container1 nav ul li:last-child button:hover,.main button:hover{
color:rgb(194, 194, 194)
}
.main{
height:100%;
border:1px solid black;
background-image: url("second.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.main{
padding-left:13%;
color:White;
display: flex;
justify-content: center;
flex-direction: column;
gap:5%;
font-family: 'Lato', sans-serif;
position: relative;
}
.main::before{
content:'';
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:black;
opacity:0.2
}
.main h1{
font-size:clamp(2rem,3vw,50px);
z-index: 1;
}
.main p {
width:43.5%;
line-height: 1.7;
z-index: 1;
word-spacing: 3px;
font-size: clamp(0.9rem,1.15vw,2rem)
}
.main button{
width:max-content;
padding:10px 12px;
border:none;
font-size:clamp(1.2rem,1.2vw,1.5rem);
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color:white;
z-index: 1;
cursor:pointer
}
.container2{
height:82vh;
width:100%;
display: flex;
flex-direction: column;
padding-top:10px;
font-family: 'Fira Sans', sans-serif;
position: relative;
}
.container2::before{
content:'';
position: absolute;
bottom:0;
left:0;
right:0;
background-color:black;
height:1px;
opacity: 0.1;
}
.row1{
height:40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:7%
}
.container2 h1{
font-size:clamp(1.8rem,2.3vw,40px)
}
.row2 h2{
font-size:clamp(1.2rem,1.6vw,1.6rem)
}
.container2 p{
font-size: clamp(0.9rem,1.1vw,1.3rem);
}
.row1 p {
width:50%;
text-align: center;
line-height: 1.6;
}
.row2{
display: flex;
justify-content: center;
gap:35px;
height:60%;
padding:0 150px;
}
.row2 div{
text-align: center;
width:32%;
display: flex;
flex-direction: column;
align-items: center ;
gap:18px;
}
.row2 div p{
text-align: left;
line-height:1.6;
max-height: 100%;
}
.row2 div i{
width:110px;
height:60px;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(2.5rem,4vw,3rem);
}
.container3{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider{
width:60%;
height:70%;
overflow: hidden;
border-radius: 10px;
}
.slides{
width:500%;
height:100%;
display: flex;
}
.slides input{
display: none;
}
.slide{
width:20%;
transition: 1s;
}
.slide img{
width:100%;
height: 100%;
}
.navigation_manual{
width:60%;
position: absolute;
display: flex;
justify-content: center;
margin-top:10px
}
.manual_btn{
border-radius:10px;
border:2px solid #eee;
padding:5px;
cursor:pointer;
transition: 0.2s ease;
}
.manual_btn:not(:last-child){
margin-right: 30px;
}
.manual_btn:hover{
background-color:black
}
#select1:checked ~ .imgone{
margin-left: 0%;
}
#select2:checked ~ .imgone{
margin-left: -20%;
}
#select3:checked ~ .imgone{
margin-left: -40%;
}
.navigation_auto{
position:absolute;
display: flex;
width:60%;
justify-content: center;
margin-top:33.45%;
}
.navigation_auto div{
border:2px solid #23E3C9;
border-radius:10px;
padding:5px;
}
.navigation_auto div:not(:last-child){
margin-right: 30px;
}
#select1:checked ~ .navigation_auto .auto_btn1{
background-color:#000 ;
}
#select2:checked ~ .navigation_auto .auto_btn2{
background-color:#000 ;
}
#select3:checked ~ .navigation_auto .auto_btn3{
background-color:#000 ;
}
.container4{
background-color: #0C0633;
color: white;
display: flex;
flex-direction: column ;
justify-content: center;
align-items: center;
padding:6.5% 0;
font-family: 'Fira Sans', sans-serif;
gap:20px
}
.container4 h1{
font-size:clamp(2rem,2.8vw,2.5rem)
}
.container4 p{
width:72%;
text-align: center;
line-height: 1.5;
font-size: 1rem;
font-weight: 300;
}
.container4 button{
border:0;
padding:10px 15px;
font-size: 1.2rem;
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color: white;
cursor: pointer;
}
.container4 button:hover{
color:rgb(194, 194, 194)
}
.container5{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contain{
width:75%;
height: 80%;
display: grid;
grid-template-columns: 1.7fr 0.3fr 1fr ;
grid-template-rows: 70% 30%;
}
.leftUp{
grid-column: 1/2;
grid-row: 1/2;
}
.rightUp{
grid-column: 3/4;
grid-row: 1/2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.rightUp ul{
width:100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
gap:6px;
font-family: 'Fira Sans', sans-serif;
}
.rightUp ul li{
padding-left:10px
}
.rightUp ul li::marker{
content: 'f058';
font-family: 'Font Awesome 5 Free';
font-weight: 700;
color: #A07FFF;
font-size: clamp(1.2rem,1.5vw,1.5rem);
}
.rightUp ul li h1{
font-size: clamp(1.2rem,1.8vw,1.8rem);
margin-bottom: 8px;
}
.rightUp ul li p{
line-height: 1.7;
font-size: clamp(0.8rem,1.2vw,1rem);
font-weight: 500;
color: #555555
}
.downall{
grid-column: 1/4;
grid-row: 2/3;
display: flex;
}
.downall div{
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
.downall div img{
width:clamp(125px,12vw,300px)
}
.leftUp img{
width:100%;
height: 100%;
}
.container6{
height:45vh;
display: flex;
gap:15px;
padding:10px 11%;
font-family: 'Fira Sans', sans-serif;
}
.container6 div{
width:100%;
display: flex;
flex-direction: column;
gap:12px
}
.container6 h2{
font-size: clamp(1rem,1.5vw,24px);
}
.container6 p{
font-size: clamp(0.8rem,1.1vw,16px);
}
.container6 div:nth-child(2) div{
display: flex;
flex-direction: row;
}
.container6 div:nth-child(2) div a{
border:1px solid #ddd;
width:30px;
height:30px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 50%;
color: black;
padding:7px ;
transition:0.2s ease
}
.container6 div:nth-child(2) div a:hover{
color:#3b1bff
}
.container6 div:nth-child(3) div{
display: flex;
flex-direction: row;
position: relative;
}
.container6 div:nth-child(3) div input:first-child{
width:100%;
height: clamp(100%,4vw,200%);
}
.container6 div:nth-child(3) div input:nth-child(2){
position: absolute;
right: 0;
height:clamp(100%,4vw,200%);
width:13.5%;
border: 0;
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color: white;
}
.container6 div:nth-child(3) div input:nth-child(2):focus{
outline: 0 solid black;
}
@media screen and (max-width:782px) {
.container1 nav ul{
margin-right: 17%;
}
.container1 nav {
padding:10px 70px;
}
}
@media screen and (max-width:624px){
.container1 nav ul{
margin-right: 38%;
}
}
@media screen and (max-width:480px) {
.container1 nav ul{
display: none;
flex-direction: column;
background-color: white;
width: 100%;
height:max-content;
gap: 20px;
padding-left: 27.5px;
padding-top: 10px;
padding-bottom: 10px;
}
.container1 nav ul li a{
justify-content: left;
}
.container1 nav ul li:last-child{
justify-content: left;
}
.container1 nav ul li:last-child button{
padding:5px
}
.container1 nav .dropdown{
display:flex;
flex-direction:column ;
gap:3px;
}
.container1 nav{
flex-direction: column;
padding:10px 0 ;
gap:0;
}
.container1 nav .logo{
width:70%;
height:120%;
display: flex;
justify-content: left;
}
.container1 nav .logo svg{
width:20%;
height: 80%;
margin-left: 20px;
}
} <div class="container1">
<nav>
<div class="logo"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="34" viewBox="0 0 33 34">
<g fill="none" fill-rule="evenodd" stroke="#000" transform="matrix(1 0 0 -1 0 34)">
<polyline stroke-linecap="round" points="4.81 32.607 .28 28.112 .28 .3 27.688 .3 27.688 28.112 10.068 28.112 10.068 10.133 22.373 10.133"/>
<polyline stroke-linecap="round" points="28.19 .3 32.72 4.795 32.72 32.607 5.312 32.607 5.312 5.074 22.653 5.074 22.653 23.064 10.068 23.055"/>
<path d="M5.31355932 5.07573214L10.3474576 10.413444M27.6864407 27.8312406L22.6525424 23.0553932"/>
</g>
</svg>
</div>
<ul id="navdrop">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Components</a></li>
<li><button>Download</button></li>
</ul>
<div class="dropdown">
<div class="drop1"></div>
<div class="drop2"></div>
<div class="drop3"></div>
</div>
</nav>
<div class="main">
<h1>Posuere lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing commodo elit at imperdiet dui accumsan sit. Ipsum dolor sit amet consectetur adipiscing elit.</p>
<button>Download</button>
</div>
</div>
<div class="container2">
<div class="row1">
<h1>Vivamus laoreet</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.
Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum.</p>
</div>
<div class="row2">
<div class="one">
<i class="far fa-comments"></i>
<h2>Consectetur</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
<div class="two">
<i class="far fa-heart"></i>
<h2>Malesuada</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
<div class="three">
<i class="far fa-bell"></i>
<h2>Phasellus</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
</div>
</div>
<div class="container3">
<div class="slider">
<div class="slides">
<input type="radio" id="select1" name="slide">
<input type="radio" id="select2" name="slide">
<input type="radio" id="select3" name="slide">
<div class="slide imgone"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
<div class="navigation_auto">
<div class="auto_btn1"></div>
<div class="auto_btn2"></div>
<div class="auto_btn3"></div>
</div>
</div>
<div class="navigation_manual">
<label for="select1" class="manual_btn"></label>
<label for="select2" class="manual_btn"></label>
<label for="select3" class="manual_btn"></label>
</div>
</div>
</div>
<div class="container4">
<h1>Vivamus laoreet</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac. Id cursus metus aliquam eleifend mi.</p>
<button>Download</button>
</div>
<div class="container5">
<div class="contain">
<div class="leftUp"><img src="comp.png"></div>
<div class="rightUp">
<ul>
<li class="firstrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
<li class="secondrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
<li class="thirdrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
</ul>
</div>
<div class="downall">
<div>
<img src="logo1.png" alt="">
</div>
<div>
<img src="logo2.png" alt="">
</div>
<div>
<img src="logo3.png" alt="">
</div>
</div>
</div>
</div>
<div class="container6">
<div class="one">
<h2>About us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet consectetur dolor</p>
</div>
<div class="two">
<h2>Do you like ? Share this !</h2>
<div class="socials">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
<p>© Domain Name | Website created with Mashup Template/Unsplash</p>
</div>
<div class="three">
<h2>Subscribe to newsletter</h2>
<div class="search">
<input type="text">
<input type="button" value="OK">
</div>
</div>
</div> Ответ №1:
Я думаю, что самым простым решением для вас было бы добавить медиа-запрос в самом низу вашего css-файла, который делает ваш #navdrop элемент всегда видимым всякий раз, когда размер экрана превышает 480 пикселей. Вы можете добиться этого, используя min-width в медиа-запросе вместо max-width . С помощью !important этого вы можете переопределить даже встроенные стили. Это не очень хорошая практика, чтобы злоупотреблять !important , но я думаю, что если это только этот случай, то все должно быть в порядке. См. Предлагаемый код ниже.
@media screen and (min-width:480px) {
#navdrop{
display: flex !important;
}
}
Кроме того, вы можете добавить выполняемый прослушиватель onresize , который может переопределить встроенный стиль, когда обнаруженная чувствительность экрана превышает 480 пикселей. См.предлагаемую функцию ниже.
window.addEventListener('resize', ()=>{
if (document.getElementsByTagName("body")[0].clientWidth > 480){
document.getElementById("navdrop").style.display = "flex"
}
});
Во фрагменте я использую только css, но вы можете добавить логику onresize в любом месте вашего JS, предпочтительно в верхней части.
let counter = 1;
let myinterval = setInterval(startInterval,2000);
function startInterval(){
document.getElementById("select" counter).checked = true;
counter
if(counter > 3){
counter = 1
}
}
for(let i = 0 ; i < 3 ; i ){
document.getElementsByTagName("label")[i].onclick = function(){
clearInterval(myinterval)
}
}
let drop = document.getElementsByClassName("dropdown")[0]
drop.onclick = function(){
let menu = document.getElementById("navdrop")
if(menu.style.display === "none" || menu.style.display ===""){
menu.style.display = "flex"
}else{
menu.style.display = "none"
}
} *,*::after,*::before{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
height:5000px;
padding-top:71.7px
}
.container1{
height:96.5vh;
display: flex;
flex-direction: column;
}
.container1 nav{
display: flex;
height:11%;
padding: 10px 140px;
font-family: 'Roboto', sans-serif;
position:fixed;
background-color: white;
z-index: 999;
width: 100%;
top:0;
}
.container1 nav .dropdown{
display:none;
flex-direction: column;
height:50%;
width:40px;
margin-left:auto;
position: absolute;
right:20px;
top:50%;
transform: translateY(-50%);
justify-content: center;
cursor:pointer;
}
.container1 nav .dropdown:hover div{
background-color: black ;
}
.container1 nav .dropdown div{
height:5%;
width:100%;
background-color: rgb(211, 208, 208);
transition: all 0.2s ease;
}
.container1 nav .logo svg{
width:100%;
height:100%
}
.container1 nav ul{
display:flex;
list-style-type: none;
margin-left: auto;
margin-right: 1%;
align-items: center;
width:43%;
justify-content: space-between;
gap:4%
}
.container1 nav ul li{
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(0.8rem,1.150vw,1.3rem)
}
.container1 nav ul li a:hover{
color:black
}
.container1 nav ul li a{
text-decoration: none;
color:#777;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: color 0.3s ease;
}
.container1 nav ul li:last-child button{
border:none;
padding:0px 14px;
background-image: linear-gradient(90deg,#8b62ff 0,#3b1bff);
color:white;
font-size:clamp(0.9rem,1.1vw,1.2rem);
height:90%;
transition:all 0.2s ease;
cursor:pointer;
border-radius: 3px;
}
.container1 nav ul li:last-child button:hover,.main button:hover{
color:rgb(194, 194, 194)
}
.main{
height:100%;
border:1px solid black;
background-image: url("second.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.main{
padding-left:13%;
color:White;
display: flex;
justify-content: center;
flex-direction: column;
gap:5%;
font-family: 'Lato', sans-serif;
position: relative;
}
.main::before{
content:'';
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:black;
opacity:0.2
}
.main h1{
font-size:clamp(2rem,3vw,50px);
z-index: 1;
}
.main p {
width:43.5%;
line-height: 1.7;
z-index: 1;
word-spacing: 3px;
font-size: clamp(0.9rem,1.15vw,2rem)
}
.main button{
width:max-content;
padding:10px 12px;
border:none;
font-size:clamp(1.2rem,1.2vw,1.5rem);
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color:white;
z-index: 1;
cursor:pointer
}
.container2{
height:82vh;
width:100%;
display: flex;
flex-direction: column;
padding-top:10px;
font-family: 'Fira Sans', sans-serif;
position: relative;
}
.container2::before{
content:'';
position: absolute;
bottom:0;
left:0;
right:0;
background-color:black;
height:1px;
opacity: 0.1;
}
.row1{
height:40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:7%
}
.container2 h1{
font-size:clamp(1.8rem,2.3vw,40px)
}
.row2 h2{
font-size:clamp(1.2rem,1.6vw,1.6rem)
}
.container2 p{
font-size: clamp(0.9rem,1.1vw,1.3rem);
}
.row1 p {
width:50%;
text-align: center;
line-height: 1.6;
}
.row2{
display: flex;
justify-content: center;
gap:35px;
height:60%;
padding:0 150px;
}
.row2 div{
text-align: center;
width:32%;
display: flex;
flex-direction: column;
align-items: center ;
gap:18px;
}
.row2 div p{
text-align: left;
line-height:1.6;
max-height: 100%;
}
.row2 div i{
width:110px;
height:60px;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: clamp(2.5rem,4vw,3rem);
}
.container3{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.slider{
width:60%;
height:70%;
overflow: hidden;
border-radius: 10px;
}
.slides{
width:500%;
height:100%;
display: flex;
}
.slides input{
display: none;
}
.slide{
width:20%;
transition: 1s;
}
.slide img{
width:100%;
height: 100%;
}
.navigation_manual{
width:60%;
position: absolute;
display: flex;
justify-content: center;
margin-top:10px
}
.manual_btn{
border-radius:10px;
border:2px solid #eee;
padding:5px;
cursor:pointer;
transition: 0.2s ease;
}
.manual_btn:not(:last-child){
margin-right: 30px;
}
.manual_btn:hover{
background-color:black
}
#select1:checked ~ .imgone{
margin-left: 0%;
}
#select2:checked ~ .imgone{
margin-left: -20%;
}
#select3:checked ~ .imgone{
margin-left: -40%;
}
.navigation_auto{
position:absolute;
display: flex;
width:60%;
justify-content: center;
margin-top:33.45%;
}
.navigation_auto div{
border:2px solid #23E3C9;
border-radius:10px;
padding:5px;
}
.navigation_auto div:not(:last-child){
margin-right: 30px;
}
#select1:checked ~ .navigation_auto .auto_btn1{
background-color:#000 ;
}
#select2:checked ~ .navigation_auto .auto_btn2{
background-color:#000 ;
}
#select3:checked ~ .navigation_auto .auto_btn3{
background-color:#000 ;
}
.container4{
background-color: #0C0633;
color: white;
display: flex;
flex-direction: column ;
justify-content: center;
align-items: center;
padding:6.5% 0;
font-family: 'Fira Sans', sans-serif;
gap:20px
}
.container4 h1{
font-size:clamp(2rem,2.8vw,2.5rem)
}
.container4 p{
width:72%;
text-align: center;
line-height: 1.5;
font-size: 1rem;
font-weight: 300;
}
.container4 button{
border:0;
padding:10px 15px;
font-size: 1.2rem;
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color: white;
cursor: pointer;
}
.container4 button:hover{
color:rgb(194, 194, 194)
}
.container5{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contain{
width:75%;
height: 80%;
display: grid;
grid-template-columns: 1.7fr 0.3fr 1fr ;
grid-template-rows: 70% 30%;
}
.leftUp{
grid-column: 1/2;
grid-row: 1/2;
}
.rightUp{
grid-column: 3/4;
grid-row: 1/2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.rightUp ul{
width:100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
gap:6px;
font-family: 'Fira Sans', sans-serif;
}
.rightUp ul li{
padding-left:10px
}
.rightUp ul li::marker{
content: 'f058';
font-family: 'Font Awesome 5 Free';
font-weight: 700;
color: #A07FFF;
font-size: clamp(1.2rem,1.5vw,1.5rem);
}
.rightUp ul li h1{
font-size: clamp(1.2rem,1.8vw,1.8rem);
margin-bottom: 8px;
}
.rightUp ul li p{
line-height: 1.7;
font-size: clamp(0.8rem,1.2vw,1rem);
font-weight: 500;
color: #555555
}
.downall{
grid-column: 1/4;
grid-row: 2/3;
display: flex;
}
.downall div{
width:100%;
display: flex;
justify-content: center;
align-items: center;
}
.downall div img{
width:clamp(125px,12vw,300px)
}
.leftUp img{
width:100%;
height: 100%;
}
.container6{
height:45vh;
display: flex;
gap:15px;
padding:10px 11%;
font-family: 'Fira Sans', sans-serif;
}
.container6 div{
width:100%;
display: flex;
flex-direction: column;
gap:12px
}
.container6 h2{
font-size: clamp(1rem,1.5vw,24px);
}
.container6 p{
font-size: clamp(0.8rem,1.1vw,16px);
}
.container6 div:nth-child(2) div{
display: flex;
flex-direction: row;
}
.container6 div:nth-child(2) div a{
border:1px solid #ddd;
width:30px;
height:30px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 50%;
color: black;
padding:7px ;
transition:0.2s ease
}
.container6 div:nth-child(2) div a:hover{
color:#3b1bff
}
.container6 div:nth-child(3) div{
display: flex;
flex-direction: row;
position: relative;
}
.container6 div:nth-child(3) div input:first-child{
width:100%;
height: clamp(100%,4vw,200%);
}
.container6 div:nth-child(3) div input:nth-child(2){
position: absolute;
right: 0;
height:clamp(100%,4vw,200%);
width:13.5%;
border: 0;
background-image:linear-gradient(90deg,#8b62ff 0,#3b1bff) ;
color: white;
}
.container6 div:nth-child(3) div input:nth-child(2):focus{
outline: 0 solid black;
}
@media screen and (max-width:782px) {
.container1 nav ul{
margin-right: 17%;
}
.container1 nav {
padding:10px 70px;
}
}
@media screen and (max-width:624px){
.container1 nav ul{
margin-right: 38%;
}
}
@media screen and (max-width:480px) {
.container1 nav ul{
display: none;
flex-direction: column;
background-color: white;
width: 100%;
height:max-content;
gap: 20px;
padding-left: 27.5px;
padding-top: 10px;
padding-bottom: 10px;
}
.container1 nav ul li a{
justify-content: left;
}
.container1 nav ul li:last-child{
justify-content: left;
}
.container1 nav ul li:last-child button{
padding:5px
}
.container1 nav .dropdown{
display:flex;
flex-direction:column ;
gap:3px;
}
.container1 nav{
flex-direction: column;
padding:10px 0 ;
gap:0;
}
.container1 nav .logo{
width:70%;
height:120%;
display: flex;
justify-content: left;
}
.container1 nav .logo svg{
width:20%;
height: 80%;
margin-left: 20px;
}
}
@media screen and (min-width:480px) {
#navdrop{
display: flex !important;
}
} <div class="container1">
<nav>
<div class="logo"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="34" viewBox="0 0 33 34">
<g fill="none" fill-rule="evenodd" stroke="#000" transform="matrix(1 0 0 -1 0 34)">
<polyline stroke-linecap="round" points="4.81 32.607 .28 28.112 .28 .3 27.688 .3 27.688 28.112 10.068 28.112 10.068 10.133 22.373 10.133"/>
<polyline stroke-linecap="round" points="28.19 .3 32.72 4.795 32.72 32.607 5.312 32.607 5.312 5.074 22.653 5.074 22.653 23.064 10.068 23.055"/>
<path d="M5.31355932 5.07573214L10.3474576 10.413444M27.6864407 27.8312406L22.6525424 23.0553932"/>
</g>
</svg>
</div>
<ul id="navdrop">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Components</a></li>
<li><button>Download</button></li>
</ul>
<div class="dropdown">
<div class="drop1"></div>
<div class="drop2"></div>
<div class="drop3"></div>
</div>
</nav>
<div class="main">
<h1>Posuere lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing commodo elit at imperdiet dui accumsan sit. Ipsum dolor sit amet consectetur adipiscing elit.</p>
<button>Download</button>
</div>
</div>
<div class="container2">
<div class="row1">
<h1>Vivamus laoreet</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.
Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum.</p>
</div>
<div class="row2">
<div class="one">
<i class="far fa-comments"></i>
<h2>Consectetur</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
<div class="two">
<i class="far fa-heart"></i>
<h2>Malesuada</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
<div class="three">
<i class="far fa-bell"></i>
<h2>Phasellus</h2>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac.</p>
</div>
</div>
</div>
<div class="container3">
<div class="slider">
<div class="slides">
<input type="radio" id="select1" name="slide">
<input type="radio" id="select2" name="slide">
<input type="radio" id="select3" name="slide">
<div class="slide imgone"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
<div class="navigation_auto">
<div class="auto_btn1"></div>
<div class="auto_btn2"></div>
<div class="auto_btn3"></div>
</div>
</div>
<div class="navigation_manual">
<label for="select1" class="manual_btn"></label>
<label for="select2" class="manual_btn"></label>
<label for="select3" class="manual_btn"></label>
</div>
</div>
</div>
<div class="container4">
<h1>Vivamus laoreet</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Porta non pulvinar neque laoreet. Viverra ipsum nunc aliquet bibendum. Iaculis urna id volutpat lacus. Turpis egestas pretium aenean pharetra magna ac. Id cursus metus aliquam eleifend mi.</p>
<button>Download</button>
</div>
<div class="container5">
<div class="contain">
<div class="leftUp"><img src="comp.png"></div>
<div class="rightUp">
<ul>
<li class="firstrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
<li class="secondrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
<li class="thirdrow">
<h1>Dui augue</h1>
<p>Auctor augue mauris augue neque. Posuere lorem ipsum dolor sit amet consectetur adipiscing.</p>
</li>
</ul>
</div>
<div class="downall">
<div>
<img src="logo1.png" alt="">
</div>
<div>
<img src="logo2.png" alt="">
</div>
<div>
<img src="logo3.png" alt="">
</div>
</div>
</div>
</div>
<div class="container6">
<div class="one">
<h2>About us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet consectetur dolor</p>
</div>
<div class="two">
<h2>Do you like ? Share this !</h2>
<div class="socials">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
<p>© Domain Name | Website created with Mashup Template/Unsplash</p>
</div>
<div class="three">
<h2>Subscribe to newsletter</h2>
<div class="search">
<input type="text">
<input type="button" value="OK">
</div>
</div>
</div>