Code Snippets
Our Style to code HTML, Hope you will Enjoy
We are showing you our coding style which is very easy to understand and editable,
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title Tag -->
<title>Replace Me With Your Project Name</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="stylesheets/theme.css" type="text/css" />
</head>
<body>
<!-- Header start -->
<header class="header">
<div class="container">
<div class="header__logo">
<a href="#">Logo</a>
</div>
<nav class="header__navigation">
<ul class="header__nav">
<li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
<li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
<li class="header__nav__item"><a href="#" class="header__nav__link header__nav__link--active">Menu Item</a></li>
<li class="header__nav__item"><a href="#" class="header__nav__link">Menu Item</a></li>
</ul>
</nav>
</div>
</header>
<!-- Header end -->
<!-- Intro start -->
<div class="intro">
<img src="images/banner-img" alt="" class="intro__img">
<h1 class="intro__title">Intro title</h1>
<p class="intro__entry">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<!-- Intro end -->
<!-- Note start -->
<div class="note">
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
</div>
</div>
<!-- Note end -->
<!-- Footer start -->
<footer class="footer">
<div class="container">
<address class="footer__address">
1095 Hillview Street
Columbia
South Carolina
</address>
<a class="footer__telephone" href="tel:9999999999">9999999999</a>
<a class="footer__mail" href="mailto:mail@example.com">mail@example.com</a>
</div>
</footer>
<!-- Footer end -->
<!-- Scripts -->
<script src="javascripts/myexample.js"></script>
</body>
</html>
Our Style to code CSS, Hope you will like it
/* Header */
header {
background-color: #efefef;
&__logo {
//add css
}
&__navigation {
padding {
top: 10px;
bottom: 10px;
};
}
&__nav-item {
padding {
left: 10px;
right: 10px;
};
&__link {
color: red;
&:hover, &--active {
color: green;
}
}
}
}
/* Intro */
.intro {
&__img {
margin {
bottom: 10px;
};
}
&__title {
font-size: 32px;
color: black;
margin {
bottom: 5px;
}
}
&__entry {
font-size: 18px;
color: #efefef;
}
}
/* Note */
.note {
p {
font-size: 18px;
color: #efefef;
}
}
/* Footer */
.footer {
&__address {
font-size: 16px;
color: #efefef;
}
&__telephone {
//add css
}
&__mail {
//add css
}
}