CREATING SOFT TRANSITION & HORIZONTAL MENU | with ATOM ( Turkish Video Tutorial)
CREATING A HORIZONTAL MENU | with ATOM ( Turkish Video Tutorial)
Tutorial about: Creating a horizontal menu with CSS & HTML – ATOM Turkish Video
Video Language : Turkish
Githup link: ATOM
Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. ATOM OFFICIAL WEBSITE
What We Can Learn?
We learn create horizontal menu and we learn add background color and we did soft menu transition in this video tutorial.
We Learn About
- Change font
- Background color
- Change color wtih hovar codes
- Transition-duration
- Text-decoration
- Padding-float
- List-style
Requirements
1- ATOM Program
2- Basic HTML code knowledge
3- Basic CSS code knowledge
4- Basic ATOM usage information
Difficulty
Basic Level – Intermediate Level
Description
ATOM is free and open-source project. It has a github repo on github.com , I describe the HTML and CSS in video.
We talked about change font background color, change color wtih hovar codes,transition.
Also with CSS and HTML codes we started a series
Video Tutorial - Turkish Language - 720p
Curriculum
I will add the other lessons here.This is the First Lesson.
ATOM OFFICIAL WEBSITE & GITHUB REPOSITORY
And More Details About Video
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css" type="text/css" media="all"/>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">ANASAYFA</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">E-MAIL</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">MENU</a></li>
</ul>
</div>
</body>
</html>
.menu ul {list-style:none;}
.menu ul li {float:left;}
.menu ul li a {padding:20px 70px;
text-decoration:none;
background-color:#323331;
color:#fff;
font:14px verdana, arial;
}
.menu ul li a:hover {background:red;
color:#000;
transition-duration:0.5s;}
Author : @rdvn
Posted on Utopian.io - Rewarding Open Source Contributors
@originalworks
Güzel anlatım olmuş. Bir sonraki derste artık atomu parçalarsın :))
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for approval.
Turkish is cool :)
Wow thank you , your accent cool too :)
Hey @rdvn I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x