Scribd
Upload
15 views3 pages

Complete Responsive Web Site

Uploaded by

jeyow22118
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views3 pages

Complete Responsive Web Site

Uploaded by

jeyow22118
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1 <!

DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 * {
6 box-sizing: border-box;
7 }
8
9 body {
10 font-family: Arial;
11 padding: 10px;
12 background: #f1f1f1;
13 }
14
15 /* Header/Blog Title */
16 .header {
17 padding: 20px;
18 text-align: center;
19 background: pink;
20 }
21
22 .header h1 {
23 font-size: 50px;
24 }
25
26 /* Style the top navigation bar */
27 .topnav {
28 overflow: hidden;
29 background-color: #333;
30 }
31
32 /* Style the topnav links */
33 .topnav a {
34 float: left;
35 display: block;
36 color: #f2f2f2;
37 text-align: center;
38 padding: 14px 16px;
39 text-decoration: none;
40 }
41
42 /* Change color on hover */
43 .topnav a:hover {
44 background-color: #ddd;
45 color: black;
46 }
47
48 /* Create two unequal columns that floats next to each other */
49 /* Left column */
50 .leftcolumn {
51 float: left;
52 width: 75%;
53 }
54
55 /* Right column */
56 .rightcolumn {
57 float: left;
58 width: 25%;
59 background-color: #f1f1f1;
60 padding-left: 20px;
61 }
62
63 /* Fake image */
64 .fakeimg {
65 background-color: #aaa;
66 width: 100%;
67 padding: 20px;
68 }
69
70 /* Add a card effect for articles */
71 .card {
72 background-color: white;
73 padding: 20px;
74 margin-top: 20px;
75 }
76
77 /* Clear floats after the columns */
78 .row:after {
79 content: "";
80 display: table;
81 clear: both;
82 }
83
84 /* Footer */
85 .footer {
86 padding: 20px;
87 text-align: center;
88 background: #ddd;
89 margin-top: 20px;
90 }
91
92 /* Responsive layout - when the screen is less than 800px wide, make the two columns
stack on top of each other instead of next to each other */
93 @media screen and (max-width: 800px) {
94 .leftcolumn, .rightcolumn {
95 width: 100%;
96 padding: 0;
97 }
98 }
99
100 /* Responsive layout - when the screen is less than 400px wide, make the navigation
links stack on top of each other instead of next to each other */
101 @media screen and (max-width: 400px) {
102 .topnav a {
103 float: none;
104 width: 100%;
105 }
106 }
107 </style>
108 </head>
109 <body>
110
111 <div class="header">
112 <h1>My Website</h1>
113 <p>Resize the browser window to see the effect.</p>
114 </div>
115
116 <div class="topnav">
117 <a href="#">About</a>
118 <a href="#">Home</a>
119 <a href="#">Gallery</a>
120 <a href="#" style="float:right">Link</a>
121 </div>
122
123 <div class="row">
124 <div class="leftcolumn">
125 <div class="card">
126 <h2>TITLE HEADING</h2>
127 <h5>Title description, Dec 7, 2017</h5>
128 <div class="fakeimg" style="height:200px;">
129 <img src="PIC2.jpg"></div>
130 <p>Some text..</p>
131 <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
132 </div>
133 <div class="card">
134 <h2>TITLE HEADING</h2>
135 <h5>Title description, Sep 2, 2017</h5>
136 <div class="fakeimg" style="height:200px;">
137 <img src="PIC6.jpg" width="200"></div>
138 <p>Some text..</p>
139 <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
140 </div>
141 </div>
142 <div class="rightcolumn">
143 <div class="card">
144 <h2>About Me</h2>
145 <div class="fakeimg" style="height:100px;">
146 <img src="PIC8.jpg" width="100"></div>
147 <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
148 </div>
149 <div class="card">
150 <h3>Popular Post</h3>
151 <div class="fakeimg"><p>Image</p></div>
152 <div class="fakeimg"><p>Image</p></div>
153 <div class="fakeimg"><p>Image</p></div>
154 </div>
155 <div class="card">
156 <h3>Follow Me</h3>
157 <p>Some text..</p>
158 </div>
159 </div>
160 </div>
161
162 <div class="footer">
163 <h2>Footer</h2>
164 </div>
165
166 </body>
167 </html>
168
169
170

You might also like