Simple template in HTML and CSS
<!doctype html>
<html>
<head>
<title>Week-1 Test </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="color-code">
<div class="color1"> </div>
<div class="color2"> </div>
<div class="color2"> </div>
<p>D5245B</p>
<p>131A2D</p>
<p>D0C4AB</p>
</div>
<div class="mainsection">
<div class="header">
<div class="logo"><img src="logo.png" alt="logo"/></div>
<div class="header-title"><h1>JANE DOTTE</h1><p>Frond End Ninja</p></div>
</div>
<div class="banner"><img src="banner.png" alt="banner" width="955px"/></div>
<div class="section1">
<b><p id="feature-size" style="color:grey">FEATURED WORK</p></b>
<div class="small-img">
<img src="img.png" alt=""/>
<p style="color:grey">APPIFY<br>
<a href="https://github.com/udacity/Appify/"><small style="color:grey">http/github.com</small></p></a>
</div>
<div class="small-img">
<img src="img.png" alt=""/>
<p style="color:grey">SUNFLOWER<br>
<a href="https://github.com/udacity/Appify/"><small style="color:grey">http/github.com</small></p></a>
</div>
<div class="small-img">
<img src="img.png" alt=""/>
<p style="color:grey">BOKEH<br>
<a href="https://github.com/udacity/Appify/"><small style="color:grey">http/github.com</small></p></a>
</div>
</div>
</div>
</div>
</body>
</html>
<!--CSS Styling-->
*{
margin : 0px;
padding : 0px;
}
.container{
width: 1099px;
max-width:100%;
margin:0 auto;
display:block;
}
.logo{
float: left;
}
.mainsection{
display: block;
float: right;
width: 87%;
}
.color-code{
display: inline-block;
float: left;
margin: 10px;
width: 10%;
padding-top: 205px;
}
.color-code p{
padding-left: 26px;
font-size: 20px;
}
.color1{
padding:30px;
background-color:#D5245B;
margin:20px;
width:10%;
}
.color2{
padding:30px;
background-color:#131A2D;
margin:20px;
width:10%;
}
.color3{
padding:30px;
background-color:#D0C4AB;
margin:20px;
width:10%;
}
.header-title{
padding-top: 38px;
float: right;
}
.header h1{
font-size:51px;
}
.header p{
padding-left: 210px;
}
.header{
border-bottom:3px solid #bcbbbb;
display:inline-block;
width:100%;
margin:7px;
}
.banner{
padding-top: 15px;
background-color:black;
}
.section1{
padding-top: 45px;
width: 100%;
background-color: black;
}
.small-img{
width:47%;
display: inline-block;
margin-left: 15px;
}
.small-img img{
display: inline-block;
margin: 10px;
width: 100%;
}
.small-img p{
display: inline-block;
margin: 0px 91px;
width: 100%;
font-size: 25px;
}
#feature-size{
font-size: 28px;
}
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment