Tutorial about: Vertical menu with CSS & HTML in ATOM (Open Source)
Video Language : Turkish Language
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 going to learn create vertical menu,how add border , how to add soft in menu,how to add different color for everymenu and we learn add background color in this video tutorial.
We Learn About
- Add border
- Background color
- Change color wtih hovar codes
- Transition-duration
- Add every menu different color
- Text-decoration
- Padding-float
- List-style
Requirements
1- ATOM Program
2- Basic ATOM, usage information.
3- Basic CSS code knowledge.
4- Basic HTML code knowledge.
My Operating System
Difficulty
- Basic Level
Description
ATOM is free and open-source project. It has a github repo on github.com and github repository is here I describe the CSS and HTML in video.
We talked about how to add border , how to add soft view every menu, how to add every menu different color , change font background color, change color wtih hovar codes,transition.
Also with CSS and HTML codes we are continue a series
Video Tutorial - Turkish Language - 720p
Curriculum
ATOM OFFICIAL WEBSITE & GITHUB REPOSITORY
And More Details About Video
.menu {width:250px;}
.menu ul {list-style:none;}
.menu ul li a {background:#242221;
color:#fff;
font:14px verdana, arial;
display:block;
padding:20px 0px;
text-decoration:none;
text-align:center;}
#MainPage {border-left:3px solid #CF9E1E;}
#MainPage:hover {background:#CF9E1E;}
#about {border-left:3px solid #247C9E;}
#About:hover {background:#247C9E;}
#Exam {border-left:3px solid #4A9E50;}
#Exam:hover {background:#4A9E50;}
#Nots {border-left:3px solid #B114BA;}
#Nots:hover {background:#B114BA;}
#MainPage, #About, #Exam, #Nots {transition-duration:0.3s;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="yatay.css" type="text/css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#" id="MainPage">MainPage</a></li>
<li><a href="#" id="About">About</a></li>
<li><a href="#" id="Exam">Exam</a></li>
<li><a href="#" id="Nots">Nots</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</body>
</html>
Author : @rdvn
Posted on Utopian.io - Rewarding Open Source Contributors
Cool
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
originalworks
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for approval and information.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Teşekkürler hocam
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
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
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit