MISC/me_html_css.tar at master · priyankkumar218/MISC · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
index.html000644 101065 101065 00000003725 14001002132 011241 0ustar00000000 000000 <!-- Tells browser HTML5 is used -->
<!DOCTYPE html>

<!-- Parent tag of all other tags -->
<html>
  <!-- Contains tags to set metadata for the HTML document -->
  <head>
    <!-- Set text to be shown on the browser's title bar -->
    <title>Getting Started with HTML</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <!-- Contains tags to set content of the HTML document -->
  <body>
    <!-- Set a header using h1 tag -->
    <div id="title">
      <h1>Learning HTML by doing!</h1>
      <div id="topics-learnt">Topics learnt: HTML, CSS</div>
    </div>

    <div class="hero-image">
      <img
        src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
      />
    </div>

    <div class="container">
      <h3>HTML</h3>

      <!-- div tag divides content across sections -->
      <div class="tile" id="tile1">
        <p>All HTML tags go inside the "html" element</p>
        <a href="https://www.crio.do">More</a>
      </div>
      <div class="tile">
        <p>"title" tag content is displayed on the browser's title bar</p>
        <a href="https://www.crio.do">More</a>
      </div>
      <div class="tile">"div" tag divides content across sections</div>
      <div class="tile">"b" tag makes text bold</div>
      <div class="tile">Class attribute groups HTML elements</div>
      <div class="tile">
        Id attribute can be used to uniquely identify an element
      </div>
      <div class="tile">
        Excepteur dolor ex ex tempor officia amet eu. Ea dolor ea laboris
        laborum irure duis. Esse ea aute eiusmod fugiat magna minim occaecat.
        Proident reprehenderit Lorem esse Lorem quis elit ex veniam enim. In
        excepteur eu pariatur fugiat ea exercitation non dolore.
      </div>
    </div>

    <!-- p tag's used to wrap text -->
    <!-- b tag makes the text it wrap, bold -->
    <p id="footer"><b>Created by: Crio.Do</b></p>
  </body>
</html>
css000755 101065 101065 00000000000 14000763727 007775 5ustar00000000 000000 css/styles.css000644 101065 101065 00000002456 14001001664 012102 0ustar00000000 000000 /* Set default margin and padding for all elements to 0 */
* {
  margin: 0px;
  padding: 0px;
}

/* CSS selector to set style for the <body> element */
body {
  /* Set the font of text displayed */
  font-family: Verdana;
  /* Set the background color */
  background-color: lightgrey;
}

h1 {
  /* Set border around the element */
  border: 1px solid black;
  /* Set text color */
  color: white;
}

h3 {
  width: 100%;
  height: 30px;
  background: white;
  /* Shorthand to set padding of 10px on all sides */
  padding: 10px;
}

.tile {
  background-color: #999999;
  margin: 5px;
  /* Set padding of 10px on top/bottom and 5px on right/left */
  padding: 10px 5px;
  height: 100px;
  width: 20%;
  text-align: center;
  /* Show a scroll if text overflows but not otherwise */
  overflow: auto;
}

#topics-learnt {
  font-family: "Courier New";
}

.container {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

#title {
  width: 100%;
  height: 60px;
  background-color: black;
  color: white;
  text-align: center;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 10px 0px;
  background-color: #efefef;
  text-align: center;
}

/* Change the color of the link on hovering */
a:hover {
  color: red;
}

.hero-image img {
  /* Set a specific height */
  height: 30vh;
  width: 100%;
}