Add basic structure for webpage.

This commit is contained in:
Ceda EI 2019-06-20 00:03:45 +05:30
parent 4902942f39
commit a337495110
4 changed files with 182 additions and 0 deletions

BIN
images/abstract_squares.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

108
images/webionite.svg Normal file
View File

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Creator: CorelDRAW 2017 -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xml:space="preserve"
width="387.13275mm"
height="241.84073mm"
version="1.1"
style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
viewBox="0 0 38713.275 24184.073"
id="svg103"
sodipodi:docname="webionite.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
id="metadata107"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview105"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.37350347"
inkscape:cx="710.99897"
inkscape:cy="416.86288"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg103"><inkscape:grid
type="xygrid"
id="grid157"
originx="-3000.0005"
originy="-10264.602" /></sodipodi:namedview>
<defs
id="defs87"><style
type="text/css"
id="style85">
<![CDATA[
.fil5 {fill:#325090}
.fil4 {fill:#1A4091}
.fil0 {fill:#1A4091}
.fil1 {fill:#8A326B}
.fil2 {fill:#9E377A}
.fil3 {fill:#C24496}
]]>
</style></defs>
<g
id="Camada_x0020_1"
transform="translate(-10656.862,-17908)">
<metadata
id="CorelCorpID_0Corel-Layer" />
<path
class="fil0"
d="m 47852,29974 c 1283,2264 1388,2528 1451,2812 63,284 84,588 53,889 -30,300 -112,597 -219,846 -107,249 -240,450 -407,631 -167,182 -367,344 -607,475 -240,131 -520,230 -798,279 -278,49 -555,47 -799,15 -244,-33 -455,-96 -667,-193 -213,-97 -427,-229 -608,-370 -181,-142 -330,-293 -443,-427 -113,-133 -191,-248 -733,-1177 -542,-929 -1548,-2671 -2129,-3645 -200,-335 -349,-578 -466,-761 h 3108 v -3932 h 652 c 966,1678 1947,3387 2612,4559 z"
id="path90"
inkscape:connector-curvature="0"
style="fill:#1a4091" />
<path
class="fil1"
d="m 12175,30034 c -1283,-2264 -1388,-2528 -1451,-2812 -63,-284 -84,-588 -53,-889 30,-300 112,-597 219,-846 107,-249 240,-450 407,-631 167,-182 367,-344 607,-475 240,-131 520,-230 798,-279 278,-49 555,-47 799,-15 244,33 455,96 667,193 213,97 427,229 608,370 181,142 330,293 443,427 113,133 191,248 733,1177 542,929 1548,2671 2129,3645 582,974 739,1180 895,1342 156,161 312,278 523,385 211,107 479,204 740,256 262,51 517,57 755,31 237,-26 456,-84 651,-158 195,-75 367,-166 540,-288 173,-122 348,-275 474,-399 126,-125 202,-221 240,-269 38,-48 38,-48 39,1610 1,1659 2,4976 3,6634 1,1659 1,1659 -50,1731 -51,72 -153,217 -264,349 -112,132 -233,252 -411,382 -178,130 -414,272 -634,372 -221,100 -427,158 -661,187 -233,29 -494,29 -721,2 -227,-28 -421,-83 -609,-164 -188,-81 -370,-188 -540,-323 -170,-135 -328,-298 -439,-428 -110,-130 -172,-228 -1433,-2408 -1262,-2180 -3723,-6444 -5006,-8707 z"
id="path92"
inkscape:connector-curvature="0"
style="fill:#8a326b" />
<path
class="fil2"
d="m 19616,36122 c -1283,2264 -1388,2528 -1451,2812 -63,284 -84,588 -53,889 30,300 112,597 219,846 107,249 240,450 407,631 167,182 367,344 607,475 240,131 520,230 798,279 278,49 555,47 799,15 244,-33 455,-96 667,-193 213,-97 427,-229 608,-370 181,-142 330,-293 443,-427 113,-133 191,-248 733,-1177 542,-929 1548,-2671 2129,-3645 582,-974 739,-1180 895,-1342 156,-161 312,-278 523,-385 211,-107 479,-204 740,-256 262,-51 517,-57 755,-31 237,26 456,84 651,158 195,75 367,166 540,288 173,122 348,275 474,399 126,125 202,221 240,269 38,48 38,48 39,-1610 1,-1659 2,-4976 3,-6634 1,-1659 1,-1659 -50,-1731 -51,-72 -153,-217 -264,-349 -112,-132 -233,-252 -411,-382 -178,-130 -414,-272 -634,-372 -221,-100 -427,-158 -661,-187 -233,-29 -494,-29 -721,-2 -227,28 -421,83 -609,164 -188,81 -370,188 -540,323 -170,135 -328,298 -439,428 -110,130 -172,228 -1433,2408 -1262,2180 -3723,6444 -5006,8707 z"
id="path94"
inkscape:connector-curvature="0"
style="fill:#9e377a" />
<path
class="fil3"
d="m 27057,30034 c -1283,-2264 -1388,-2528 -1451,-2812 -63,-284 -84,-588 -53,-889 30,-300 112,-597 219,-846 107,-249 240,-450 407,-631 167,-182 367,-344 607,-475 240,-131 520,-230 798,-279 278,-49 555,-47 799,-15 244,33 455,96 667,193 213,97 427,229 608,370 181,142 330,293 443,427 113,133 191,248 733,1177 542,929 1548,2671 2129,3645 582,974 739,1180 895,1342 156,161 312,278 523,385 211,107 479,204 740,256 262,51 517,57 755,31 237,-26 456,-84 651,-158 195,-75 367,-166 540,-288 173,-122 348,-275 474,-399 126,-125 202,-221 240,-269 38,-48 38,-48 39,1610 1,1659 2,4976 3,6634 1,1659 1,1659 -50,1731 -51,72 -153,217 -264,349 -112,132 -233,252 -411,382 -178,130 -414,272 -634,372 -221,100 -427,158 -661,187 -233,29 -494,29 -721,2 -227,-28 -421,-83 -609,-164 -188,-81 -370,-188 -540,-323 -170,-135 -328,-298 -439,-428 -110,-130 -172,-228 -1433,-2408 -1262,-2180 -3723,-6444 -5006,-8707 z"
id="path96"
inkscape:connector-curvature="0"
style="fill:#c24496" />
<path
class="fil4"
d="m 34498,36122 c -1283,2264 -1388,2528 -1451,2812 -63,284 -84,588 -53,889 30,300 112,597 219,846 107,249 240,450 407,631 167,182 367,344 607,475 240,131 520,230 798,279 278,49 555,47 799,15 244,-33 455,-96 667,-193 213,-97 427,-229 608,-370 181,-142 330,-293 443,-427 113,-133 191,-248 733,-1177 542,-929 1548,-2671 2129,-3645 582,-974 739,-1180 895,-1342 156,-161 312,-278 523,-385 211,-107 479,-204 740,-256 262,-51 517,-57 755,-31 237,26 456,84 651,158 195,75 367,166 540,288 173,122 348,275 474,399 126,125 202,221 240,269 38,48 38,48 39,-1610 1,-1659 2,-4976 3,-6634 1,-1659 1,-1659 -50,-1731 -51,-72 -153,-217 -264,-349 -112,-132 -233,-252 -411,-382 -178,-130 -414,-272 -634,-372 -221,-100 -427,-158 -661,-187 -233,-29 -494,-29 -721,-2 -227,28 -421,83 -609,164 -188,81 -370,188 -540,323 -170,135 -328,298 -439,428 -110,130 -172,228 -1433,2408 -1262,2180 -3723,6444 -5006,8707 z"
id="path98"
inkscape:connector-curvature="0"
style="fill:#1a4091" />
<ellipse
class="fil5"
cx="42779"
cy="19972"
rx="2011"
ry="2064"
id="ellipse100"
style="fill:#325090" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

51
index.css Normal file
View File

@ -0,0 +1,51 @@
* {
box-sizing: border-box;
text-align: justify;
}
body {
margin: 0;
padding: 0;
color: #FFF;
}
.top-body {
display: flex;
}
.left-pane {
width: 60%;
background-color: #121212;
}
.right-pane {
position: fixed;
right: 0;
width: 40%;
background-image: url("images/abstract_squares.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3em;
}
.title-image {
width: 400px;
}
h1 {
font-family: D3 Euronism;
font-weight: 100;
font-size: 4em;
line-height: 0;
}

23
index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ceda EI </title>
<link rel="stylesheet" type="text/css" href="index.css">
<meta property="og:description" content="Homepage of Ceda EI." />
<meta property="og:image" content="https://webionite.com/images/webionite.jpg" />
</head>
<body>
<div class="top-body">
<div class="left-pane">
<div class="page">
<img src="images/webionite.svg" class="title-image"/>
<h1>Webionite</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis. Pellentesque iaculis lectus at erat fermentum ultricies. Curabitur est ante, accumsan in tortor vitae, molestie elementum ante. Duis tristique tellus eu molestie porta. Mauris euismod id sem ut ultrices. </p>
</div>
</div>
<div class="right-pane">
</div>
</div>
</body>
</html>