1590307675
Create yourself a Macbook with HTML and CSS3/Sass by Natália Fernandes
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>MacBook</title>
<script src="main.js"></script>
</head>
<body>
<button id="light-switch">Switch lights</button>
<div id="mac-book">
<div id="display">
<div id="frame">
<div id="screen">
<div class="app-window" style="top: 60px; left: 80px">
<div class="app-buttons">
<div class="app-button" style="background-color: #e04b4b"></div>
<div class="app-button" style="background-color: #d9af2f"></div>
<div class="app-button" style="background-color: #2ab82a"></div>
</div>
</div>
<div class="app-window" style="top: 100px; left: 180px">
<div class="app-buttons">
<div class="app-button" style="background-color: #e04b4b"></div>
<div class="app-button" style="background-color: #d9af2f"></div>
<div class="app-button" style="background-color: #2ab82a"></div>
</div>
</div>
<div id="dock">
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
<div class="app-icon" style="background-color: #6f6fcb"></div>
<div class="app-icon" style="background-color: #b69253"></div>
<div class="app-icon" style="background-color: #9a439a"></div>
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
<div class="app-icon" style="background-color: #6f6fcb"></div>
<div class="app-icon" style="background-color: #b69253"></div>
<div class="app-icon" style="background-color: #9a439a"></div>
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
</div>
<div id="logo">MacBook Air</div>
</div>
</div>
</div>
<div id="keyboard">
<div id="keyboard-slope">
<div class="key-row">
<div class="key half-height key-text">esc</div>
<div class="key half-height key-text">F1</div>
<div class="key half-height key-text">F2</div>
<div class="key half-height key-text">F3</div>
<div class="key half-height key-text">F4</div>
<div class="key half-height key-text">F5</div>
<div class="key half-height key-text">F6</div>
<div class="key half-height key-text">F7</div>
<div class="key half-height key-text">F8</div>
<div class="key half-height key-text">F9</div>
<div class="key half-height key-text">F10</div>
<div class="key half-height key-text">F11</div>
<div class="key half-height key-text">F12</div>
<div id="touch-id" class="key half-height"></div>
</div>
<div class="key-row">
<div class="key">~</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">-</div>
<div class="key">+</div>
<div class="key key-delete-tab key-text">delete</div>
</div>
<div class="key-row">
<div class="key key-delete-tab key-text">tab</div>
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key">\</div>
</div>
<div class="key-row">
<div class="key key-caps-return key-text">caps lock</div>
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key">;</div>
<div class="key">'</div>
<div class="key key-caps-return key-text">return</div>
</div>
<div class="key-row">
<div class="key key-shift key-text">shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key key-shift key-text">shift</div>
</div>
<div class="key-row">
<div class="key key-text">fn</div>
<div class="key key-text">control</div>
<div class="key key-text">option</div>
<div class="key key-command key-text">command</div>
<div id="key-space" class="key"></div>
<div class="key key-command key-text">command</div>
<div class="key key-text">option</div>
<div id="arrows">
<div class="arrow-row">
<div id="key-up" class="key half-height">^</div>
</div>
<div class="arrow-row">
<div id="key-left" class="key half-height"><</div>
<div id="key-down" class="key half-height">v</div>
<div id="key-right" class="key half-height">></div>
</div>
</div>
</div>
</div>
<div id="trackpad">
</div>
</div>
</div>
</body>
</html>
$key-size: 34px
*
box-sizing: border-box
body
margin: 0
overflow: auto
#light-switch
position: absolute
top: 140px
right: 60px
padding: 6px 10px
font-size: 14px
background-color: #a44ce3
color: #fff
border: none
border-radius: 4px
#mac-book
margin: 40px auto
width: 640px
font-family: Arial, sans-serif
#display
margin: 0 10px 2px
height: 420px
padding: 3px
background-color: #ffd0c4
border-radius: 20px
#frame
padding: 22px 14px
height: 100%
border-radius: 18px
background-color: #333
#screen
position: relative
height: 100%
background-color: #e5e4f2
.app-window
position: absolute
width: 300px
height: 200px
border-radius: 5px
background: rgb(255, 239, 235)
background: linear-gradient(150deg, rgb(247, 235, 233) 0%, rgb(217, 199, 195) 100%)
box-shadow: 0 0 17px rgba(0, 0, 0, .2)
.app-buttons
display: flex
position: absolute
top: 0
bottom: 0
padding: 4px
.app-button
width: 6px
height: 6px
border-radius: 50%
margin-right: 2px
cursor: pointer
#dock
display: flex
position: absolute
justify-content: space-between
bottom: 0
left: 140px
width: 300px
height: 26px
padding: 5px
border-top-left-radius: 6px
border-top-right-radius: 6px
background-color: rgba(0, 0, 0, .15)
.app-icon
height: 18px
width: 18px
border-radius: 50%
cursor: pointer
#logo
position: absolute
bottom: -16px
left: 0
width: 100%
font-size: 13px
color: #d9cbc7
text-align: center
#keyboard
margin: auto
height: 420px
background-color: #ffd0c4
border-radius: 20px
transform: perspective(1200px) rotateX(35deg) translateZ(100px)
overflow: auto
box-shadow: 0 6px 4px rgba(0, 0, 0, 0.6)
#keyboard-slope
height: 224px
margin: 25px 25px 7px
padding: 8.6px
text-align: center
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15), inset 0 -2px 3px rgba(255, 255, 255, 0.4)
border-radius: 10px
.key-row
display: flex
align-content: flex-start
justify-content: space-between
margin-bottom: 4px
.key
height: $key-size
width: $key-size
color: #fff
font-size: 11px
line-height: $key-size
border-radius: 4px
background-color: #333
cursor: pointer
.half-height
height: calc(#{$key-size} / 2)
width: calc(#{$key-size} + 4.8px)
font-size: 12px
line-height: calc(#{$key-size} / 2)
#touch-id
width: calc(#{$key-size} / 2)
.key-delete-tab
width: 54px
.key-caps-return
width: 70px
.key-shift
width: 86px
.key-command
width: 50px
#key-space
width: 182px
.key-text
font-size: 9px
#arrows
height: $key-size
width: 120px
position: relative
top: -1px
.arrow-row
display: flex
justify-content: space-evenly
margin-bottom: 2px
#key-up
border-bottom-left-radius: 0
border-bottom-right-radius: 0
#key-down
border-top-left-radius: 0
border-top-right-radius: 0
#trackpad
margin: auto
height: 154px
width: 270px
border: 1px solid rgba(171, 120, 129, 0.5)
border-radius: 12px
body.lights-off
background-color: #222
.key
text-shadow: 0 0 6px #fff, 0 0 18px #fff
box-shadow: 0 0 4px #fff
#sass #css3
What is GEEK
Buddha Community
1590307675
Create yourself a Macbook with HTML and CSS3/Sass by Natália Fernandes
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>MacBook</title>
<script src="main.js"></script>
</head>
<body>
<button id="light-switch">Switch lights</button>
<div id="mac-book">
<div id="display">
<div id="frame">
<div id="screen">
<div class="app-window" style="top: 60px; left: 80px">
<div class="app-buttons">
<div class="app-button" style="background-color: #e04b4b"></div>
<div class="app-button" style="background-color: #d9af2f"></div>
<div class="app-button" style="background-color: #2ab82a"></div>
</div>
</div>
<div class="app-window" style="top: 100px; left: 180px">
<div class="app-buttons">
<div class="app-button" style="background-color: #e04b4b"></div>
<div class="app-button" style="background-color: #d9af2f"></div>
<div class="app-button" style="background-color: #2ab82a"></div>
</div>
</div>
<div id="dock">
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
<div class="app-icon" style="background-color: #6f6fcb"></div>
<div class="app-icon" style="background-color: #b69253"></div>
<div class="app-icon" style="background-color: #9a439a"></div>
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
<div class="app-icon" style="background-color: #6f6fcb"></div>
<div class="app-icon" style="background-color: #b69253"></div>
<div class="app-icon" style="background-color: #9a439a"></div>
<div class="app-icon" style="background-color: #d54e4e"></div>
<div class="app-icon" style="background-color: #4c994c"></div>
</div>
<div id="logo">MacBook Air</div>
</div>
</div>
</div>
<div id="keyboard">
<div id="keyboard-slope">
<div class="key-row">
<div class="key half-height key-text">esc</div>
<div class="key half-height key-text">F1</div>
<div class="key half-height key-text">F2</div>
<div class="key half-height key-text">F3</div>
<div class="key half-height key-text">F4</div>
<div class="key half-height key-text">F5</div>
<div class="key half-height key-text">F6</div>
<div class="key half-height key-text">F7</div>
<div class="key half-height key-text">F8</div>
<div class="key half-height key-text">F9</div>
<div class="key half-height key-text">F10</div>
<div class="key half-height key-text">F11</div>
<div class="key half-height key-text">F12</div>
<div id="touch-id" class="key half-height"></div>
</div>
<div class="key-row">
<div class="key">~</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">0</div>
<div class="key">-</div>
<div class="key">+</div>
<div class="key key-delete-tab key-text">delete</div>
</div>
<div class="key-row">
<div class="key key-delete-tab key-text">tab</div>
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key">[</div>
<div class="key">]</div>
<div class="key">\</div>
</div>
<div class="key-row">
<div class="key key-caps-return key-text">caps lock</div>
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key">;</div>
<div class="key">'</div>
<div class="key key-caps-return key-text">return</div>
</div>
<div class="key-row">
<div class="key key-shift key-text">shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key">,</div>
<div class="key">.</div>
<div class="key">/</div>
<div class="key key-shift key-text">shift</div>
</div>
<div class="key-row">
<div class="key key-text">fn</div>
<div class="key key-text">control</div>
<div class="key key-text">option</div>
<div class="key key-command key-text">command</div>
<div id="key-space" class="key"></div>
<div class="key key-command key-text">command</div>
<div class="key key-text">option</div>
<div id="arrows">
<div class="arrow-row">
<div id="key-up" class="key half-height">^</div>
</div>
<div class="arrow-row">
<div id="key-left" class="key half-height"><</div>
<div id="key-down" class="key half-height">v</div>
<div id="key-right" class="key half-height">></div>
</div>
</div>
</div>
</div>
<div id="trackpad">
</div>
</div>
</div>
</body>
</html>
$key-size: 34px
*
box-sizing: border-box
body
margin: 0
overflow: auto
#light-switch
position: absolute
top: 140px
right: 60px
padding: 6px 10px
font-size: 14px
background-color: #a44ce3
color: #fff
border: none
border-radius: 4px
#mac-book
margin: 40px auto
width: 640px
font-family: Arial, sans-serif
#display
margin: 0 10px 2px
height: 420px
padding: 3px
background-color: #ffd0c4
border-radius: 20px
#frame
padding: 22px 14px
height: 100%
border-radius: 18px
background-color: #333
#screen
position: relative
height: 100%
background-color: #e5e4f2
.app-window
position: absolute
width: 300px
height: 200px
border-radius: 5px
background: rgb(255, 239, 235)
background: linear-gradient(150deg, rgb(247, 235, 233) 0%, rgb(217, 199, 195) 100%)
box-shadow: 0 0 17px rgba(0, 0, 0, .2)
.app-buttons
display: flex
position: absolute
top: 0
bottom: 0
padding: 4px
.app-button
width: 6px
height: 6px
border-radius: 50%
margin-right: 2px
cursor: pointer
#dock
display: flex
position: absolute
justify-content: space-between
bottom: 0
left: 140px
width: 300px
height: 26px
padding: 5px
border-top-left-radius: 6px
border-top-right-radius: 6px
background-color: rgba(0, 0, 0, .15)
.app-icon
height: 18px
width: 18px
border-radius: 50%
cursor: pointer
#logo
position: absolute
bottom: -16px
left: 0
width: 100%
font-size: 13px
color: #d9cbc7
text-align: center
#keyboard
margin: auto
height: 420px
background-color: #ffd0c4
border-radius: 20px
transform: perspective(1200px) rotateX(35deg) translateZ(100px)
overflow: auto
box-shadow: 0 6px 4px rgba(0, 0, 0, 0.6)
#keyboard-slope
height: 224px
margin: 25px 25px 7px
padding: 8.6px
text-align: center
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15), inset 0 -2px 3px rgba(255, 255, 255, 0.4)
border-radius: 10px
.key-row
display: flex
align-content: flex-start
justify-content: space-between
margin-bottom: 4px
.key
height: $key-size
width: $key-size
color: #fff
font-size: 11px
line-height: $key-size
border-radius: 4px
background-color: #333
cursor: pointer
.half-height
height: calc(#{$key-size} / 2)
width: calc(#{$key-size} + 4.8px)
font-size: 12px
line-height: calc(#{$key-size} / 2)
#touch-id
width: calc(#{$key-size} / 2)
.key-delete-tab
width: 54px
.key-caps-return
width: 70px
.key-shift
width: 86px
.key-command
width: 50px
#key-space
width: 182px
.key-text
font-size: 9px
#arrows
height: $key-size
width: 120px
position: relative
top: -1px
.arrow-row
display: flex
justify-content: space-evenly
margin-bottom: 2px
#key-up
border-bottom-left-radius: 0
border-bottom-right-radius: 0
#key-down
border-top-left-radius: 0
border-top-right-radius: 0
#trackpad
margin: auto
height: 154px
width: 270px
border: 1px solid rgba(171, 120, 129, 0.5)
border-radius: 12px
body.lights-off
background-color: #222
.key
text-shadow: 0 0 6px #fff, 0 0 18px #fff
box-shadow: 0 0 4px #fff
#sass #css3
1595318322
Know Everything About HTML With HTML Experts
HTML stands for a hypertext markup language. For the designs to be displayed in web browser HTML is the markup language. Technologies like Cascading style sheets (CSS) and scripting languages such as JavaScript assist HTML. With the help of HTML websites and the web, designs are created. Html has a wide range of academic applications. HTML has a series of elements. HTML helps to display web content. Its elements tell the web how to display the contents.
The document component of HTML is known as an HTML element. HTML element helps in displaying the web pages. An HTML document is a mixture of text nodes and HTML elements.
Basics of HTML are-
The simple fundamental components oh HTML is
- Head- the setup information for the program and web pages is carried in the head
- Body- the actual substance that is to be shown on the web page is carried in the body
- HTML- information starts and ends with and labels.
- Comments- come up in between
Html versions timeline
- HTML was created in 1990. Html is a program that is updated regularly. the timeline for the HTML versions is
- HTML 2- November, 1995
- HTML 3- January, 1997
- HTML 4- December, 1997; April, 1998; December, 1999; May, 2000
- HTML 5- October, 2014; November, 2016; December, 2017
HTML draft version timelines are
- October 1991
- June 1992
- November 1992
- June 1993
- November 1993
- November 1994
- April 1995
- January 2008
- HTML 5-
2011, last call
2012 candidate recommendation
2014 proposed recommendation and recommendation
HTML helps in creating web pages. In web pages, there are texts, pictures, colouring schemes, tables, and a variety of other things. HTML allows all these on a web page.
There are a lot of attributes in HTML. It may get difficult to memorize these attributes. HTML is a tricky concept. Sometimes it gets difficult to find a single mistake that doesn’t let the web page function properly.
Many minor things are to be kept in mind in HTML. To complete an HTML assignment, it is always advisable to seek help from online experts. These experts are well trained and acknowledged with the subject. They provide quality content within the prescribed deadline. With several positive reviews, the online expert help for HTML assignment is highly recommended.
#html assignment help #html assignment writing help #online html assignment writing help #html assignment help service online #what is html #about html
1617789060
HTML Tutorial For Beginners
The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.
What is HTML?
Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.
HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.
#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates
1625652623
HTML - A Complete Guide to Master the Top Programming Language
In this era of technology, anything digital holds a prime significance in our day-to-day life. Hence, developers have submerged themselves to create a major impact using programming languages.According to Statista, HTML/CSS holds the second position (the first being Javascript), in the list of most widely-used programming languages globally (2020).Interested to learn this language? Then head on to this tutorial and get to know all about HTML! Plus we have added numerous examples such that you can learn better! So happy learning!
html for beginners
#html #html-for-beginners #html-tutorials #introduction-to-html #learn-html #tutorials-html
1596090180
Commonly Used HTML Tags with Examples
HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag, some content, and an ending tag. The web browser reads the HTML document from top to bottom, left to right. Each HTML tag defines a new property that helps in rendering the website.
HTML Tags
The ‘<>’ brackets contain an HTML tag. There are two types of HTML tags- empty tags or singleton tags and container tags. Singleton tags or empty tags do not contain any content such as an image or a paragraph and hence do not need to be closed, whereas container tags should be closed.
Syntax
- Some Content
Examples of:
Empty tag:
,
,etc.
Container tags:
Paragraph
- <!DOCTYPE>
Paragraph
Heading
- Bold
- Italic
- Underline
Output-
Head tags:
#html tutorials #html image tags #html link tags #html list tags #html tags #html