Apple Shop Website.Today in this blog , we gonna learn about Apple Shop Website for Beginners.
Apple Shop Website
Hi Friends!
Today in this blog, we gonna learn about the Apple Shop Website for Beginners. In this Blog, I Will teach 'how to develop a website for beginners?'. This is my first website design. If you're a beginner you want to learn this carefully.
This Website is designed for apple shops. In the previous blog, we will learn about CSS Loading Dots if you're a beginner I will recommend learning that loader effect first. If you've learned that and this blog will help you to learn about the Apple Shop Website. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Apple Shop Website</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section>
<nav>
<img src="images/logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<div class="about">
<h2><span>Apple</span><br>The attractive fruit</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Suscipit aut expedita commodi id eaque ea fuga voluptates, qui voluptatum incidunt ex, porro explicabo, ipsum ab illo consectetur, ipsa pariatur odit.
<br>
<a href="#">Learn more</a>
</p>
<div class="icons">
<span><img src="images/facebook.png"></span>
<span><img src="images/instagram.png"></span>
<span><img src="images/twitter.png"></span>
</div>
</div>
<div class="apple">
<img src="images/apple.jpg">
</div>
</div>
</section>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
nav img{
margin: 10px;
}
ul{
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
ul li a{
display: inline-block;
position: relative;
margin: auto 50px;
padding: 5px;
text-decoration: none;
font-size: 20px;
color: black;
}
ul li a::after{
content: '';
display: inline-block;
position: absolute;
right: 100%;
top: 100%;
transition: 0.5s;
background-color: #E2042FFF;
box-shadow: 1px 1px 10px #E2042FFF;
}
ul li a:hover::after{
right: 0;
height: 20%;
width: 100%;
border-radius: 20px;
}
.content{
display: flex;
justify-content: space-around;
align-items: center;
}
.about{
margin: auto 50px;
cursor: pointer;
}
.apple{
padding: 50px 20px;
}
.about h2{
font-size: 40px;
font-weight: bold;
font-family: cursive;
}
.about h2 span{
font-size: 60px;
font-family: cursive;
color: #E2042FFF;
}
.about p{
font-size: 18px;
font-weight: 600;
padding: 10px;
}
.about p a{
display: inline-block;
position: relative;
margin: 20px;
padding: 5px 20px;
left: 65%;
text-decoration: none;
color: #E2042FFF;
transition: 0.5s;
border: 2px solid #E2042FFF;
border-radius: 20px;
}
.about p a:hover{
color: white;
background-color: #E2042FFF;
box-shadow: 1px 1px 40px #E2042FFF;
}
.icons span{
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
margin: 20px;
height: 50px;
width: 50px;
transition: 0.5s;
background-color: #E2042FFF;
border-radius: 50%;
}
.icons span:hover{
transform: translateY(-10px);
box-shadow: 1px 1px 40px #E2042FFF;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all concepts carefully to develop your skills. Repeating the code for your practice will help you to learn this website development more effectively and This video is also helpful to learn faster. I hope this tutorial will be helpful for learning the Apple Shop Website for beginners. I will give you Source Code and you can download it.
COMMENTS