Exercise 7- CSS Layout and web page concept
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Creating three column responsive layout
</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<h1></h1> <a href="https://ibb.co/fvtXQpJ"><img src="https://i.ibb.co/yS5NVy2/banner-image-portfolio-latest-camera.jpg" alt="banner-image-portfolio-latest-camera" border="0"></a>
</header>
<div class="topnav">
<a class="active" href="#home">About me</a>
<a href="#news">ROTC</a>
<a href="#contact">Wedding</a>
<a href="#about">Photoshoot</a>
</div>
<main>
<div class="col col1">
<h2>About me</h2>
<br><p>HI! I'm <h1>Adrian Guisihan</h1><br> Aspiring photographer/videographer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino
</div>
<div class="col col2">
<h2>My Experience</h2>
<p><br><ul>
<li> Photography
<p> Itake pictures in events in School and also I tried taking pictures on a wedding</p><br>
<li> Video and Film Productions
<p> I have some short fils in my youtube channel and also I'm making highlight in game play</p><br>
<li> Digital arts
<p>I make my own digital art and vector art I posted it on my instagram account</p>
</ul></p>
</div>
<div class="col col3">
<a href="https://ibb.co/0JCkn7j"><img src="https://i.ibb.co/F759hrb/DSC-0041.jpg" alt="DSC-0041" width="400"height="auto" margin="10"></a>
</div>
<div class="col col1">
<h2>ROTC BAND</h2>
<br><p>This is some shot of ROTC band instruments</p><br>
<a href="https://ibb.co/K92p769"><img src="https://i.ibb.co/30p9W10/DSC-1437-Copy.jpg" alt="DSC-1437-Copy" width="400"height="auto" margin="10" ></a><br><br>
<p> I took this photo before they they start the ceremony of the graduates of ROTC
</div>
<div class="col col2">
<h2>ROTC officers </h2>
<br> <p>In this photo, they currenty calling the officers that will recieve medals in the graduation</p><br>
<a href="https://ibb.co/g7PTfQ0"><img src="https://i.ibb.co/sP6wNcT/DSC-1490-Copy.jpg" alt="DSC-1490-Copy" width="400"height="auto" margin="10"></a>
</div>
<div class="col col3">
<h2> ROTC Graduates </h2>
<br> <p>picture of Graduate batch 2020</p><br>
<a href="https://ibb.co/yq2qh8s"><img src="https://i.ibb.co/jDtDVL4/DSC-1783-Copy.jpg" alt="DSC-1783-Copy" width="400"height="auto" margin="10"></a>
</div>
<div class="col col1">
<h2>Groom</h2><br><br><br>
<a href="https://ibb.co/5hv0sXN"><img src="https://i.ibb.co/1GKgRYD/DSC-0150.jpg" alt="DSC-0150" width="400"height="auto" margin="10"></a>
<p>
</div>
<div class="col col2">
<h2>Wedding Shoot</h2>
<br> <p>This are some of my shot in the wedding that I cover</p><br>
<a href="https://ibb.co/L80VZ2Y"><img src="https://i.ibb.co/R9gRDVY/DSC-0019.jpg" alt="DSC-0019"width="400"height="auto" margin="10"></a>
</div>
<div class="col col3">
<h2>Bride</h2><br><br><br>
<a href="https://ibb.co/NZntWbr"><img src="https://i.ibb.co/vZvVLRh/DSC-0155.jpg" alt="DSC-0155" width="400"height="auto" margin="10"></a>
<p>
</div>
<div class="col col1">
<h2></h2>
<a href="https://ibb.co/S6LWz7J"><img src="https://i.ibb.co/9pMz73G/DSC-0033.jpg" alt="DSC-0033" width="400"height="auto" margin="10"></a><br><a href="https://ibb.co/2KLYHb8"><img src="https://i.ibb.co/dK3Jxhb/DSC-0025.jpg" alt="DSC-0025" width="400"height="auto" margin="10"></a>
<p>
</div>
<div class="col col2">
<h2></h2>
<p></p>
<a href="https://ibb.co/wY4wBRM"><img src="https://i.ibb.co/JCHymK5/DSC-0080.jpg" alt="DSC-0080" width="400"height="auto" margin="10"></a>
</div>
<div class="col col3">
<h2></h2>
<a href="https://ibb.co/y6XYNXj"><img src="https://i.ibb.co/x1Df2DT/DSC-0031.jpg" alt="DSC-0031" width="400"height="auto" margin="10"></a><br><a href="https://ibb.co/SXjdLP7"><img src="https://i.ibb.co/MDvGXs5/DSC-0137.jpg" alt="DSC-0137" width="400"height="auto" margin="10"></a>
<p>
</div>
<div class="col col1">
<h2></h2><br><br><br>
<a href="https://ibb.co/850qF2H"><img src="https://i.ibb.co/Z8V5yK0/DSC-0173-3.jpg" alt="DSC-0173-3" width="400"height="auto" margin="10"></a>
<p>
</div>
<div class="col col2">
<h2>Photo shoot </h2>
<p>These are some picture I take from my classmates</p>
<a href="https://ibb.co/qCw4L06"><img src="https://i.ibb.co/PM8bsTk/DSC-0177-3.jpg" alt="DSC-0177-3" width="400"height="auto" margin="10"></a>
</div>
<div class="col col3">
<h2></h2><br><br><br>
<a href="https://ibb.co/q1kNJxV"><img src="https://i.ibb.co/Yjpc0bw/DSC-0171-2.jpg" alt="DSC-0171-2"width="400"height="auto" margin="10"></a>
<p>
</div>
</main>
<footer>
© 2021 | Adywooooow
<p> <a href="https://www.facebook.com/adrian.guisihan.3"> Facebook </a> </p>
<p> <a href="https://www.youtube.com/channel/UC5ldvw522w9QWRgNZgdd2Ww"> YouTube </a> </p>
<p><a href="https://frst-blog-101.blogspot.com/ " target =
blank> Portfolios </a> </p>
</footer>
</body>
</html>
CSS
body,html,h1,h2,p, div,a,img,header,footer,span{
margin: 0;
padding: 0;
}
*{box-sizing:border-box}
html{background:#343434;}
footer,header{background: #00b4de; color: #fbfbfb; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; padding: 2em 0;}
main{
width:94.75%;
margin: 0 auto;
overflow: hidden;
}
.col{
width: 33.333%;
height:500px;
float: left;
text-align: center;
padding:1rem;
}
.col1{ background: #9bd5ff;}
.col2{ background: #ffd587;}
.col3{ background: #ff8787;}
footer{
clear:both;
}
@media only screen and (max-width:768px){
.col1, .col2{
width:50%;
}
.col3{
width:100%;
}
}
@media only screen and (max-width:480px){
.col{
float: none;
width:100%;
}
}
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #444d87;
color: white;
}
Comments
Post a Comment