This is CSS variable sheet( Responsive page Layout)
dt{font-weight: bold;}
dd{margin-left: 20px;}
.body12{
height: 100%;
/* background-color: khaki; */
display: grid;
grid-template-rows: min-content auto min-content;
grid-template-areas:
'hg1'
'mg1'
'mg1'
'mg1'
'fg1';
background-color: white;
}
.header12{
grid-area: hg1;
background-image: url(cod.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 140px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
color: white;
}
.header12 .srgu1{
height: 100px;
padding: 5px;
}
.header12 h1{
margin: 0 40px;
font-size: 50px;
}
.main12{
grid-area: mg1;
height: 100%;
display: flex;
flex-wrap: wrap;
}
article{
/* display: flex; */
display: grid;
grid-template-areas:
's10 a10'
's20 a20'
's30 .';
padding: 20px;
}
.sect10{
padding: px;
}
.footer12{
grid-area: fg1;
height: 100%;
display: grid;
grid-template-areas:
'foot1 foot2';
background-color: black;
color: white;
padding: 20px;
height: 100px;
/* justify-content: center; */
}
.boox{
/* width: 45%; */
height: 350px;
border: 2px solid rgba(119, 105, 105, 0.253);
margin: 10px;
background-color: rgba(247, 240, 240, 0);
box-shadow: 10px 10px 15px black;
padding: 10px;
}
.sect10{grid-area: s10;}
.sect20{grid-area: s20;}
.sect30{grid-area: s30;}
.asi10{grid-area: a10;}
.asi20{grid-area: a20;}
.addrs{grid-area: foot1;}
.contac{grid-area: foot2;}
@media screen and (max-width: 700px){
article{
grid-template-areas:
's10'
's20'
's30'
'a10'
'a20';
padding: 20px;
}
}
This is HTML sheet
<div class="body12">
<div class="header12">
<img src="rt.png" alt="sr" class="srgu1">
<h1>Sarder Group</h1>
</div>
<div class="main12">
<article>
<section class="sect10 boox">
<dl>
<dt>HTML</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!</dd>
</dl>
</section>
<section class="sect20 boox">
<dl>
<dt>JAVA</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!</dd>
</dl>
</section>
<section class="sect30 boox">
<dl>
<dt>Python</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!</dd>
</dl>
</section>
<aside class="asi10 boox">
<dl>
<dt>Letest News</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!</dd>
</dl>
</aside>
<aside class="asi20 boox">
<dl>
<dt>Aside</dt>
<dd>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi natus cumque animi corporis quos facere tempore fugit, maiores autem illo sequi ex numquam vel nesciunt voluptatibus non cupiditate nobis adipisci!</dd>
</dl>
</aside>
</article>
</div>
<div class="footer12">
<div class="addrs">
<address>
<P>
Ⓒ Ismail Sardar <br> 96,Dhanmondi, Dhaka. <br>
#1205,Mohamd Ali Road <br>
Dhanmondi, Dhaka</P>
</address>
</div>
<div class="contac">
<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>
</div>
Comments
Post a Comment