Exercise 7- CSS Layout and web page concept
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #e04138;
}
.header {
padding: 30px;
text-align: center;
background: #e04138;
}
.header h1 {
font-size: 50px;
}
.topnav {
overflow: hidden;
background-color:#05101f;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: grey;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
background-color: #e04138;
padding-left: 20px;
}
.card {
background-color: grey;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 5px;
text-align: center;
background: grey;
margin-top: 5px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>All About Valorant </h1>
<img src="https://i.ibb.co/yXtcKDW/Valorant-Wallpaper-Boys-Dark-Display.jpg" alt="Valorant-Wallpaper-Boys-Dark-Display" border="0">
</div>
<div class="topnav">
<a href="#">About me</a>
<a href="#">My favorite agent</a>
<a href="#">wallpapers</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>MY Favorite Agent</h2>
<h5></h5>
<a href="https://ibb.co/56PpCgB"><img src="https://i.ibb.co/G0qYG4c/V9RZPkF.png" alt="V9RZPkF" border="0"></a>
<p>Phoenix </p>
<p>Phoenix is an explosive pyromancer who excels at initiating combat for his team. He can use his flames to not only manipulate the battlefield, but also heal himself. With a ton of offensive options, he's one of the best 1v1 fighters among the Valorant agents.</p>
</div>
<div class="card">
<h2>2nd Favorite Agent</h2>
<img src="https://i.ibb.co/DKXHyjn/original.webp" alt="original"
<p>Sova</p>
<p>Sova is a VALORANT agent, who specializes in scouting and reconnaisance. Sova's entire kit is built around finding the enemies and marking them for his allies. Owl Drone and Recon Bolt are a single target and AoE scanners, respectively<br><br> Abilities: <br>
Shock Bolt; Owl Drone<br>
Signature Ability: Recon Bolt<br>
Ultimate: Hunter's Fury<br></p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<p>Hi Im Adrian Im a small time wanna be gamer and this is my website about Valorat<br>
<br> you can watch my strean @wannabegamer.gg</p>
</div>
<div class="card">
<h3>TIPS</h3>
<p><br>Always communicate with your teammates.<br>
<br>Practice shooting as much as possible.<br>
<br>In the beginning, avoid movement while shooting.<br>
<br>Get familiar with gun recoil.<br>
<br>Use strafe movements in a head-on battle.<br></p>
</div>
<div class="card">
<h3>Follow Me</h3>
<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>
</div>
</div>
</div>
<div class="footer">
<img src="https://i.ibb.co/TTyQ0Vb/4cc22fbc-valorant-killbanners-top-half.jpg" alt="4cc22fbc-valorant-killbanners-top-half" style=width:985px;height:224.5px;;border: 1px
</div>
</body>
</html>
No comments:
Post a Comment