fixed grid layout, started texturing title, started using reset sheet
added gradient to background of text, started working on adding a noise texture, reworked grid again (this time its final, it is fully working now!!), got reset sheet working. also added reference image of website plan
This commit is contained in:
WillowRo
parent
89e39ca2c9
commit
0182ccffb1
6 changed files with 77 additions and 51 deletions
2
.gitattributes
vendored
2
.gitattributes
vendored
|
|
@ -1,2 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
BIN
DesignPlan.png
Normal file
BIN
DesignPlan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
BIN
Images/NoiseFilter.png
Normal file
BIN
Images/NoiseFilter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
49
Mainpage.css
49
Mainpage.css
|
|
@ -1,3 +1,5 @@
|
|||
@import url("reset.css");
|
||||
|
||||
@font-face{
|
||||
font-family:"roboto";
|
||||
font-weight: 100;
|
||||
|
|
@ -5,45 +7,34 @@
|
|||
}
|
||||
|
||||
*{
|
||||
color: #ffffff;
|
||||
color: #FCC42F;
|
||||
font-family: "roboto";
|
||||
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 20;
|
||||
background-color: #221A0F;
|
||||
max-height: 100rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(10, 1fr);
|
||||
gap: 1%;
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
font-size: 50;
|
||||
font-size: 500%;
|
||||
padding-left: 6;
|
||||
background-color: #ffa500;
|
||||
margin-top: 120px;
|
||||
margin-left: 30px;
|
||||
background: radial-gradient(#E39823 40%, #8D5001);
|
||||
border-radius: 5px;
|
||||
/*url("C:/Users/Nye/Documents/GitHub/Portfolio-Site/Images/NoiseFilter.png");*/
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 5;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 4;
|
||||
}
|
||||
|
||||
div *{
|
||||
background-color: #ffa500;
|
||||
}
|
||||
|
||||
.row::after {
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
[class*="col-"] {
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* columns:
|
||||
col-1 = leftmost gutter
|
||||
col-2 = first column
|
||||
col-4 = second column
|
||||
col-6 = last column
|
||||
col-3, 5, 7 = gutters*/
|
||||
.col-1{width: 6.25%;}
|
||||
.col-2{width: 31.25%;}
|
||||
.col-3{width: 37.5%;}
|
||||
.col-4{width: 62.5%;}
|
||||
.col-5{width: 68.75%;}
|
||||
.col-6{width: 93.75;}
|
||||
.col-7{width: 100%}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,9 @@
|
|||
<link rel="stylesheet" href="Mainpage.css">
|
||||
</header>
|
||||
<body>
|
||||
<div class = "row">
|
||||
<h1 class="col-2">
|
||||
<h1 class="positioned">
|
||||
Nye Evans
|
||||
|
||||
<div style = "font-size: 20;">Portfolio</div>
|
||||
<div style = "font-size: 30%; padding-top: 10;">Portfolio</div>
|
||||
</h1>
|
||||
<div class = "col-2" style = "margin-top: 1000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
||||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.]m[</div>
|
||||
|
||||
<div class = "col-2" style = "margin-top: 1000;">Projects</div>
|
||||
</div>
|
||||
</body>
|
||||
</HTML>
|
||||
53
reset.css
Normal file
53
reset.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
||||
Altered a little bit for this website :)
|
||||
*/
|
||||
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Reference in a new issue