Scribd
Upload
32 views

Message

The document is a website for an outdoor adventure shop called Aome Outdoor. The website contains navigation menus at the top, an introductory header section with the company name and description, a portfolio section with examples of their work, and a section listing the services they offer such as web design, search optimization, an online shop, and social media. Styling is applied throughout to control layout and formatting of text and images.

Uploaded by

Shin Pyae Chan Min Maung
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
32 views

Message

The document is a website for an outdoor adventure shop called Aome Outdoor. The website contains navigation menus at the top, an introductory header section with the company name and description, a portfolio section with examples of their work, and a section listing the services they offer such as web design, search optimization, an online shop, and social media. Styling is applied throughout to control layout and formatting of text and images.

Uploaded by

Shin Pyae Chan Min Maung
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<title>Unit6 Activity</title>

<style type="text/css">
#navbar{
width: 100%;
height: 70px;
background-color: #c4c4c4;
background: #c4c4c4;
}

#navlink{
width: 500px;
height: 50px;
display: block;
float: right;
margin-right: 600px;
margin-top: -55px;

#navlink a:hover{
color: white;
font-weight: bolder;
background-color: cadetblue;
padding: 5px;
border-radius: 20px;
}

ul li{
display: block;
float: right;
padding-left: 10px;
}

ul a{
color: black;

font-family: var(--font-primary);
text-decoration: none;
}

a :hover{
color: black;
text-decoration: dashed;
text-decoration-color: mediumpurple;
text-decoration-style: initial;
font-size: 22px;
}

#icon{
width: 200px;
height: 50px;
display: block;
float: right;
margin-right: 30px;
margin-top: 10px;
}

body{
background-color: #DCDCDC;
}
.bottom-left {
position: absolute;
bottom: 10px;
left: 10px;
color: white;
font-size: 20px;
z-index: 1;
}
#title{
position: relative;
bottom: 500px;
left: 300px;
color: white;
width: 400px;
height: 300px;
margin-right: 50px;
margin-top: 70px;
}
#text{
position: relative;
bottom: 825px;
left: 300px;
color: white;
width: 300px;
height: 300px;
margin-right: 50px;
margin-top: 70px;
}
#button{
color: white;
position: relative;
bottom: 1100px;
left: 300px;
width: 90px;
height: 30px;
margin-right: 50px;
margin-top: 70px;
font-family: var(--font-primary);
}
.button {
background-color: black;
color: black;
border: 2px solid swhite;
}

.button:hover {
background-color: #555555;
color: white;
}
#blocks{
width: 100%;
height: 700px;
background-color: #c4ccc6;
margin-top: -882px;
}
#blocktitle{
color: darkolivegreen;
font-family: comfortaa;
font-weight: bold;
}
#blockbutton{
display: block;
float: right;
width: 90px;
height: 30px;
margin-top: -50px;
margin-right: 10px;
}
#block1{
width: 300px;
height: 300px;
display: block;
float: left;
margin-left: 75px;
border: 15px solid #fff9ea;
margin-top: 40px;
margin-right: 50px;
}
#block2{
width: 300px;
height: 300px;
display: block;
float: left;
margin-left: 80px;
border: 15px solid #fff9ea;
margin-top: 40px;
margin-right: 50px;
}
#block3{
width: 300px;
height: 300px;
display: block;
float: left;
margin-left: 100px;
border: 15px solid #fff9ea;
margin-top: 40px;
margin-right: 50px;
}
#block1cap{
color: white;
text-align: center;
padding: 70px;
}
#block2cap{
color: white;
text-align: center;
padding: 70px;
}
#block3cap{
color: white;
padding: 70px;
text-align: center;
}
#last{
width: 100%;
height: 700px;
}
#lasttitle{
color: darkolivegreen;
text-align: center;
font-family: comfortaa;
font-weight: bold;
}
#lasttext{
color: darkolivegreen;
text-align: center;
font-family: comfortaa;
}
#last1{
width: 250px;
height: 200px;
display: block;
float: left;
margin-left: 50px;
margin-top: 40px;
margin-right: 30px;
}
#last2{
width: 250px;
height: 200px;
display: block;
float: left;
margin-left: 80px;
margin-top: 40px;
margin-right: 30px;
}
#last3{
width: 250px;
height: 200px;
display: block;
float: left;
margin-left: 80px;
margin-top: 40px;
margin-right: 30px;
}
#last4{
width: 250px;
height: 200px;
display: block;
float: right;
margin-left: 80px;
margin-top: 40px;
margin-right: 30px;
}
#lastcap{
color: darkolivegreen;
font-family: Comfortaa;
}
#lastbutton{
color: darkolivegreen;
display: block;
float: right;
}
.lastbutton {
border-color: #e7e7e7;
color: black;
}

.lastbutton:hover {
background: #e7e7e7;
}

</style>
</head>
<body>
<div id="navbar">
<div id="icon">
<ul>
<li><a href="#"><i class="fa fa-facebook-f" style="font-
size:24px"></a></i></li>
<li><a href="#"><i class="fa fa-instagram" style="font-
size:24px"></a></i></li>
<li><a href="#"><i class="fa fa-twitter"
style="font-size:24px"></a></i></li>
<li><a href="#"><i class="fa fa-youtube-play" style="font-
size:24px"></a></i></li>
</ul>
</div>
</div>
<div id="navlink">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Home</a></li>
</ul>

</div>

</div>
<div class="container">
<img src="mountainview.jpg" id="img1" height="800px"width="100%" >
<h1 id="title">Serving you since 1989</h1>
<p id="text">Aome outdoor is an outdoor and adventure shop located in the
boothouse district oklahoma city</p>
<button id="button" class="button">Show More</button>
</div>

<div id="blocks">
<h1 id="blocktitle">Our Portfolio</h1>
<button id="blockbutton">Show More</button>
<div id="block1">
<p id="block1cap"><i class="fa fa-camera"
style="font-size:36px"></i></p>
</div>
<div id="block2">
<p id="block2cap"><i class="fa fa-camera"
style="font-size:36px"></i></p>
</div>
<div id="block3">
<p id="block3cap"><button style="font-size:24px">Details <i class="fa
fa-eye"></i></button></p>
</div>
</div>
<div id="last">
<h1 id="lasttitle">What We Offer</h1>
<p id="lasttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation</p>
<div id="last1">
<h2>Web design</h2>
<p id="lastcap">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation</p>
<button id="lastbutton" class="lastbutton">Details</button>
</div>
<div id="last2">
<h2>Search Optimization</h2>
<p id="lastcap">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation</p>
</div>
<div id="last3">
<h2>Online Shop</h2>
<p id="lastcap">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation</p>
<button id="lastbutton" class="lastbutton">Details</button>
</div>
<div id="last4">
<h2>Social Media</h2>
<p id="lastcap">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation</p>
</div>
</div>

</body>
</html>

You might also like