Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Topic 0 - HTML & CSS Basics #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Topic 0 - HTML & CSS Basics #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions public/basics of css/2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div>
<header class="header" style="font-size: 46px">
<h1>Header</h1>
</header>
<nav class="navigation" style="font-size: 12px">
<h2>Navigation</h2>
</nav>
<section class="content" style="font-size: 14px">
<h3 class="oh-no-inline-styles" style="background:red">Section</h3>
<header class="header" style="font-size: 46px">
<h2>Header</h2>
</header>
<article class="article">
<h2>Article</h2>
</article>
<footer class="footer" style="font-size: 10px">
<h2>Footer</h2>
</footer>
</section>
<aside class="sidebar" style="font-size: 10px">
<h2>Aside</h2>
</aside>
<footer class="footer" style="font-size: 10px">
<h2>Footer</h2>
</footer>
</div>

<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
131 changes: 131 additions & 0 deletions public/basics of css/252.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style252.css">
</head>
<body>
<h1>Some nice albums...</h1>
<div class="row">
<div class="third">
<div class="aver">
<span class="screen">
<p class="title" contentEditable role='textbox' aria-multiline='true'>
Goo
</p>
</span>
<img src="https://img.discogs.com/b6SoNzlLRhwhAd5jqpDuXS4nRC4=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-370151-1462720365-8649.jpeg.jpg">
</div>
</div>

<div class="third">
<span class="screen">
<p class="title">
Metallica
</p>
</span>
<img src="https://img.discogs.com/ps4n2WeCrW6ptvq1azgnOgKgjxQ=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-4319735-1485049250-1235.jpeg.jpg">
</div>

<div class="third">
<span class="screen">
<p class="title">
The Undeserving
</p>
</span>
<img src="https://f4.bcbits.com/img/a3035455485_10.jpg">
</div>
</div>

<div class="row">
<div class="third">
<div class="aver">
<span class="screen">
<p class="title">
Youth Attack!
</p>
</span>
<img src="https://img.discogs.com/6FVS_U6ApnP_bWkf1lOYGAnSx_E=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-420075-1309967800.jpeg.jpg">
</div>
</div>

<div class="third">
<span class="screen">
<p class="title">
Pure Holocaust
</p>
</span>
<img src="https://cps-static.rovicorp.com/3/JPG_500/MI0000/592/MI0000592917.jpg?partner=allrovi.com">
</div>

<div class="third">
<span class="screen">
<p class="title">
K7
</p>
</span>
<img src="https://f4.bcbits.com/img/a2777735365_2.jpg">
</div>
</div>


<!--
<div class="container">
<div class="row clearfix">
<h1>Show case</h1>
<div class="column third">
<div class="imgbox">
<span class="screen">
<p class="title">
Sonic Youth - Bad moon rising
</p>
</span>
<img src="https://cdn-images-1.medium.com/max/800/0*a85uvpWrnU9G6Is0.jpg">
</div>
<div>
<span class="screen">
<p class="title">
Painkiller
</p>
</span>
<img src="http://www.metalmusicarchives.com/images/covers/painkiller-buried-secrets-20120520121810.jpg">
</div>
</div>
<div>
<div class="column third">
<img src="https://img.discogs.com/-9_iYFOpk8CmuYWP2PDefASxlik=/fit-in/600x597/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-1137124-1359846041-7507.jpeg.jpg" class="image">
<img src="https://f4.bcbits.com/img/a1764478040_10.jpg" class="image">
</div>
</div>
<div class="column third">
<img src="https://f4.bcbits.com/img/a3035455485_10.jpg" class="image">
<img src="https://2.bp.blogspot.com/-IqLc3-gRSuA/Uo1GhfIMZNI/AAAAAAAAGzg/XuP0vEm4Ekw/s1600/odioso+dios+-+demo.jpg"
class="image">
</div>
</div>
</div>-->

<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
48 changes: 48 additions & 0 deletions public/basics of css/css/normalize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
113 changes: 113 additions & 0 deletions public/basics of css/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
header, nav, aside, section, footer, article {
background-color: #505050;
border-radius: 10px;
text-align: center;
}

html {
font-family: Sans-serif;
}

body {
color: white;
background-color: #202020;
font-weight: 750;
}

/*SECTION*/
.content{
width: 660px;
background-color: #505050;
padding-top: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
float: left;
}

.content .header{
height: 40px;
padding-top: 12px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 20px;
color: white;
}
.content .article{
text-align: center;
height: 80px;
margin-left: 10px;
margin-right: 10px;
padding-top: 70px;
padding-bottom: 47px;
background-color: blue;
}
.content .footer{
margin-top: 10px;
height: 45px;
padding-top: 15px;
margin-right: 10px;
margin-left: 10px;
color: white;
}
/*END SECTION*/

.header {
color: black;
margin: 1%;
padding: 2%;
}

.footer {
height: 50px;
font-size: 10px;
margin-top: 10px;
clear: left;
color: black;
margin-left: 1%;
margin-right: 1%;
padding-top: 2%;
padding-bottom: 2%;
}

.navigation {
margin-left: 1%;
margin-right: 1%;
font-size: 12px;
text-align: center;
width: 275px;
height: 375px;
padding: 25px;
float: left;
background: blue;
color: black;
}

.sidebar {
font-size: 10px;
text-align: center;
width: 275px;
height: 375px;
padding: 25px;
margin-bottom: 10px;
margin-left: 1%;
float: left;
color: black;
}

/* I apply this only to mozilla due to some odd render */
@-moz-document url-prefix() {
.sidebar { padding-right: 1%; }
}

[class$="r"]:not([class='container']){
background: magenta;
}

[class*='a']:not([class$='r']):not([class$='e']){
background: blue;
}

h3 {
background: green !important;
}
Loading