Use CSS variable (@media screen)
This is CSS variable sheet(responsible)
/* Responsive web design using grid view CSS */
*{
box-sizing: border-box;
}
.header-grvu{
background-color: yellowgreen;
padding: 2% 4%;
text-align: center;
}
.nab-tuve{
background-color: rgb(13, 173, 168);
/* padding: 10px; */
/* background-size: 100%; */
/* height: 600px; */
/* display: flex; */
}
.nab-tuve .nav-tu2 a{
padding: 10px;
display: block;
/* margin-bottom: 20px; */
}
/* .nab-tuve a{
/* flex-direction: row; */
/* text-decoration: none;
color: black; */
/* margin: 10px; */
/* padding: 10px; */
/* background-color: rgba(101, 222, 226, 0.774); */
/* } */
.main-tuve{
background-color: rgb(5, 226, 219);
/* height: 600px; */
padding: 15px;
}
.aside-tuve{
background-color: rgb(2, 100, 97);
color: white;
padding: 10px;
/* height: 600px; */
}
.aside-tuve p{
color: white;
}
/* footer css */
.footer-tuve1 p{
color: white;
}
.footer-tuve2 a{
color: white;
}
/* .footer-tuve{
display: inline;
} */
.footer-tuve >div{
float: left;
width: 50%;
height: 85px;
padding: 10px;
color: rgb(238, 187, 187);
background-color: rgb(20, 19, 19);
}
/* footer css end*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"]{
float: left;
padding-left: 10px;
}
.nab-tuve,.main-tuve
{
height: 600px;
}
.aside-tuve
{
height: 600px;
}
.row1::after{
content: '';
clear: both;
display: table;
}
@media screen and (max-width:750px){
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
.nab-tuve,.main-tuve
{
height: 600px;
}
.aside-tuve
{
height: 250px;
}
}
@media screen and (max-width:600px)
{
.col-s10-1 {width: 8.33%;}
.col-s10-2 {width: 16.66%;}
.col-s10-3 {width: 25%;}
.col-s10-4 {width: 33.33%;}
.col-s10-5 {width: 41.66%;}
.col-s10-6 {width: 50%;}
.col-s10-7 {width: 58.33%;}
.col-s10-8 {width: 66.66%;}
.col-s10-9 {width: 75%;}
.col-s10-10 {width: 83.33%;}
.col-s10-11 {width: 91.66%;}
.col-s10-12 {width: 100%;}
[class*="col-s10-"]
{
width: 100%;
}
.nab-tuve{
height: 230px;
}
.main-tuve
{
height: 450px;
}
.aside-tuve
{
height: 300px;
}
}
/* [class*="col-"]{
width: 100%;
}
.nav-tu2 a{
/* background-color:turquoise; */
/* margin: 10px;
padding: 5px;
text-align: center;
} */
/* .nab-tuve .nav-tu2{ background-color: turquoise; */
This is HTML sheet
<div class="header-grvu">
<h1><cite>Ismail Sardar</cite></h1>
</div>
<div class="row1">
<div class="nab-tuve col-s10-12 col-s-3 col-2">
<div class="nav-tu2">
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">Python</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Help</a>
</div>
</div>
<div class="main-tuve col-s10-12 col-s-9 col-7">
<h1>Capa Tunue</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias illum totam corporis
deleniti dignissimos doloremque officiis adipisci debitis non, vero tempora
exercitationem culpa ducimus, ea doloribus soluta harum inventore ratione? <br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aliquam soluta facere
numquam fuga inventore qui, minima maxime tempore recusandae harum commodi distinctio
debitis aut sint dolorum cupiditate voluptates id deserunt neque nostrum esse dolorem
quae! Asperiores facere, nulla aliquid eveniet dolore rem libero fugiat possimus quidem
ducimus neque eum sint quasi necessitatibus optio illo atque a rerum odit porro vero et
quae illum perspiciatis. Ullam eum praesentium a. Facere quia nihil repellendus ex
assumenda! Rem fuga libero enim repudiandae! Lorem ipsum dolor sit, amet consectetur
adipisicing elit. <br><br> Illum non pariatur harum nobis provident? Tempore consectetur
sequi corrupti, esse nemo reiciendis illo repellendus nesciunt debitis numquam natus
possimus reprehenderit autem ea quod, qui veritatis recusandae. Natus cupiditate tempore
repudiandae doloremque.</p>
</div>
<div class="aside-tuve col-s-12 col-3">
<h2>what is love?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum excepturi eum obcaecati
beatae labore, explicabo voluptatum vitae nihil recusandae numquam.</p>
<h2>How?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore unde quisquam ipsam nam,
aut tempore deserunt sapiente ducimus? Aspernatur quas mollitia illum esse neque aliquid
minima, temporibus ipsum laboriosam excepturi.</p>
<h2>When?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus voluptatum
voluptatibus, fugiat officia aliquam ipsam expedita unde! Voluptas labore consectetur ut
aspernatur perferendis fuga doloribus facere. Mollitia fuga perferendis sit?</p>
</div>
</div>
<div class="footer-tuve">
<div class="footer-tuve1">
<P>
Ⓒ Ismail Sardar <br> 96,Dhanmondi, Dhaka. <br>
#1205,Mohamd Ali Road <br>
Dhanmondi, Dhaka</P>
</div>
<div class="footer-tuve2">
<label for="mail">E-mail :</label>
<a href="mailto:ismailsardar540@gmail.com">ismailsardar540@gmail.com</a><br>
<label for="wed">Website :</label>
<a href="https://www.wscubetech.com/">www.wscubetech.com/</a><br>
<label for="number">Phon Number :</label>
<a href="tel:+8801703980960">+88-01703980960</a>
</div>
</div>
Comments
Post a Comment