<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style3.css">
<script src="https://kit.fontawesome.com/c62ab2423f.js" crossorigin="anonymous"></script>
<title>Document</title>
<Style>
*{
margin: 0;
padding: 0;
}
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
header{
text-align: center;
margin-top: 20px;
}
#main-nav{
margin: 20px;
padding: 10px;
border-width: 1px 0;
border-color: gray;
border-style: solid;
}
#main-nav a{
text-decoration: none;
padding: 0 20px;
text-transform: uppercase;
color: black;
font-size: 12px;
font-weight: bold;
}
header p{
font-style: italic;
color: gray;
font-size: 13px;
}
main{
clear: both;
display: block;
padding: 10px 60px;
}
article{
width: 70%;
float: left;
padding: 20px;
}
article p{
color: gray;
margin-top: 20px;
}
section{
margin-top: 40px;
clear: both;
display: block;
}
figure{
float: left;
}
figure img{
width: 400px;
height: 250px;
margin: 20px 20px 0 0;
}
figcaption{
font-size: 12px;
font-style: italic;
color: gray;
}
aside{
width: 20%;
padding: 20px;
text-align: center;
float: right;
}
aside img{
width: 90px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
}
#social-icon{
margin-bottom: 20px;
}
#social-icon i{
padding: 0 5px;
font-size: 12px;
color: gray;
}
#author-name{
font-size: 12px;
font-weight: bold;
}
aside p{
font-size: 12px;
color: gray;
}
footer{
width: 100%;
background: #999;
display :inline-block;
font-size: 12px;
color: white;
}
footer p{
padding: 0 20px;
}
footer a{
text-decoration: none;
color: white;
font-style: italic;
}
</Style>
</head>
<body>
<header>
<h1>WEB DESIGN</h1>
<p>Simplicity at its best</p>
<nav id="main-nav">
<a href="index.html">Home</a>
<a href="about.html.html" target="_blank">About Us</a>
<a href="#">Services</a>
<a href="survery form.html" target="_blank">Contact Us</a>
</nav>
</header>
<main>
<article>
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum numquam illum placeat in. Iusto odio, consequuntur doloribus sint perferendis sequi nemo quam amet error enim quos sed excepturi dolore. Praesentium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis deserunt eos hic ex expedita explicabo, voluptatum consequuntur aut sequi, repellendus vero aspernatur ab nobis esse facilis, impedit excepturi debitis error.</p>
<section>
<h2>Skills and Techniques</h2>
<figure>
<img src="sneaker bg.jpg" alt="this is an image" width="80px" height="auto">
<figcaption>Photography by Soemone# unsplash</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, quis ea sit, nesciunt cupiditate cumque culpa unde praesentium blanditiis exercitationem quibusdam ipsum deleniti quidem voluptatum dolores veritatis aliquid voluptas officiis expedita odit assumenda est porro ex maiores! Ipsum necessitatibus unde cum. Quisquam quaerat, beatae, impedit sunt maxime quos doloribus dolores fugit perspiciatis quidem inventore suscipit aperiam voluptates. Itaque, ab voluptatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, illum?</p>
</section>
<section>
<h2>User experience Design and interactive design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem nisi reiciendis suscipit vitae ullam sit iste vel minus eaque sunt, nulla molestias ipsam ex nam quidem vero tempora magni impedit explicabo nostrum saepe nesciunt doloremque possimus. Cumque maxime in eius? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime, odit.</p>
</section>
<section>
<h2>Typography</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur aut laborum excepturi vitae, libero, at ab ad nam alias eius maiores temporibus! Quasi ipsa dolorum consequatur aperiam, amet soluta ad sequi ex enim pariatur ipsum nam quae omnis aspernatur, possimus, reprehenderit minus placeat repudiandae! Dolorem sequi vel ut asperiores. Impedit dolores odio sequi nobis illum.</p>
</section>
</article>
<aside>
<img src="girl smiling.jpg" alt="this is an image" width="80px" height="auto">
<p id="author-name">Sharifa Nazari</p>
<nav id="social-icon">
<a href="#"><i class="fab fa-snapchat"></i></a>
<a href=""><i class="fab fa-whatsapp"></i></a>
<a href=""><i class="fab fa-instagram"></i></i></a>
</nav>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt fugiat libero debitis itaque veniam commodi excepturi minima autem a mollitia. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et, deserunt!</p>
</aside>
</main>
<footer>
<p>Posted by: Sharifa Nazari</p>
<p>Contact information: <a href="mailto:englishwithsharifa4u@gmail.com">SharifaNazari@gmail.com</a></p>
</footer>
</body>
</html>
Comments
Post a Comment