I M Rubel

Java / Android Developer, Trainer, Writer, Speaker

Friday, September 19, 2014

Artcell HTML / CSS Responsive Template

On 9:40 AM by Unknown in , , , , , ,    No comments

Like the article?

Just done with a new template with HTML/CSS. Artcell, one of my favorite bands. I've developed a  template for them with my developers team using simple HTML/CSS coding. And of course the template is supported in all kind of devices!

Browser Support:
- Google Chrome / Chromium
- Mozilla Firefox
- Internet Explorer
- All kind of Mobile Devices
- All kind of Tablets

Here is the look of the Responsive Artcell  HTML/CSS Template:

HTML/CSS Artcell Responsive Template




 Here is the HTML Part: 

<html>
<head>
<link href="style.css" rel="Stylesheet"/>
</head>
<body>

<div class="wrapper">
    <div class="top_bar">
        <h2> ARTCELL</h2>
    </div>
    <div class="text_area"> 
        <p>   
            Arcell is a famous undergroud rock Band from Dhaka. It was formed in 1999 and there are doing well current time.
            The current band members are Ershad, Shaju, Lincon, Cezanne. They develop their songs based on heavy rock, heavy metal 
            format. In country, they are counted as one of the leading bands. Ershad is their main vocal.
        </p>
    </div>
    <div class="albums">
        <h2>Albums</h2>
    </div>
    <div class="albums_holder">
        <a class="link1s" href="#"> Dhushor Somoy </a>
        <a class="link1s" href="#">Aniket Prantor</a>
        <a class="link1s" href="#">Mixed Rockers</a>
        <a class="link1s" href="#">Rock 202</a>
        <a class="link1s" href="#">Unreleased</a>
    </div>
    <div class="bandmembers">
        <h2>Band Members</h2>   
    </div>
    <div class="band_members_full">
        <div class="single_member"><a class="link2s" href="#"><img class="img1" alt="artist" src="member.PNG" /></a></div>
        <div class="single_member"><a class="link2s" href="#"><img class="img1" alt="artist" src="member.PNG" /></a></div>
        <div class="single_member"><a class="link2s" href="#"><img class="img1" alt="artist" src="member.PNG" /></a></div>
        <div class="single_member"><a class="link2s" href="#"><img class="img1" alt="artist" src="member.PNG" /></a></div>
    </div>
   
    <div class="footer">
        <a class="link3" href="http://carnivalbd.com/apps">Developed by: Carnivalbd.com</a>
    </div>
</div>

</body>
</html>


And, Here is the CSS Part: 

 .wrapper {
    padding: 0% 2% 0% 2%;
}

.top_bar {
    width: 100%;
    height: 80px;
    color: #2b3c50;
    text-align: center;
}

.top_bar h2 {
    font-size: 48px;
    border-bottom: 1px dashed #2b3c50;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.text_area {
    border-left: 8px solid #2b3c50;
    height: auto;
    width: 94%;
    text-align: justify;
    padding: 5px 4% 5px 2%;   
    margin-top: 20px;
    margin-bottom: 50px;
    background: #f9f9f9;   
}


.albums h2 {
    padding: 0px 0px 0px 2%;
    border-left: 8px solid #2b3c50;
    font-size: 30px;
    color: #2b3c50;
    background: #f9f9f9;
    width: 98%;
}

.albums_holder {
    height: auto;
    width: 100%;
    overflow: hidden;
}

a.link1s:link , a.link1s:visited, a.link1s:hover{
    color: #f9f9f9;
    background: #2b3c50;
    width: 96%;
    height: 35px;
    text-decoration: none;
    margin: 5px 2% 5px 2%;
    padding: 10px 0px 0px 10px;
    float: left;
}


.bandmembers {
    height: auto;
    width: 100%;
}

.bandmembers h2 {
    padding: 0px 0px 0px 2%;
    border-left: 8px solid #2b3c50;
    font-size: 30px;
    color: #2b3c50;
    background: #f9f9f9;
    width: 98%;
}

.band_members_full {
    width: 100%;
}

.single_member {
    height: auto;
    width: 20%;
    border: 1px solid #2b3c50;
    float: left;
    margin: 2%;
}

.img1 {
    width: 100%;
    border: none;
}


a.link2s:link , a.link2s:visited {

}


.footer {
    height: 70px;
    width: 98%;
    border-top: 5px solid #000;
    padding: 40px 10px 10px 10px;
    text-align: center;
    background: #2b3c50;
    overflow: hidden;
    margin-top: 15px;
}


a.link3:link , a.link3:visited{
    color: #f9f9f9;
    text-shadow: 1px 1px #000;
    font-size: 20px;
    text-decoration: none;
    display: block;
}


 

This is a free template. Anybody is free to use this.  Subscribe for more!
RELATED POSTS

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)