src/views/flex.ejs

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <title>Oscar Rodriguez</title>
   6   <meta charset="UTF-8">
   7   <meta name="viewport" content="width=device-width, initial-scale=1">
   8   <style>
   9     * {
  10       box-sizing: border-box;
  11     }
  12
  13     /* Style the body */
  14     body {
  15       font-family: Helvetica;
  16       margin: 0;
  17       padding: 0;
  18     }
  19
  20     /* Header/logo Title */
  21     .header {
  22       position: relative;
  23       width: 100;
  24       height: 50vh;
  25       justify-content: center;
  26       align-items: center;
  27       overflow: hidden;
  28       padding: 60px;
  29       text-align: center;
  30       color: white;
  31
  32     }
  33
  34     .header::before {
  35       content: '';
  36       position: absolute;
  37       top: 0;
  38       left: 0;
  39       width: 100%;
  40       height: 90%;
  41       background: linear-gradient(45deg, #ff0081, #1abc9c);
  42       border-radius: 0 0 70% 70%/0 0 80% 80%;
  43
  44     }
  45
  46     .header::after {
  47       content: '';
  48       position: absolute;
  49       top: 10px;
  50       left: 10px;
  51       width: 100%;
  52       height: 90%;
  53       z-index: -1;
  54       background: linear-gradient(45deg, #ff8156, #1abc9c);
  55       border-radius: 0 0 70% 70%/0 0 80% 80%;
  56     }
  57
  58     .header h1,
  59     .header img {
  60       position: relative;
  61       z-index: 1;
  62       margin: 0;
  63       max-width: 50rem;
  64       text-align: center;
  65       padding: 0;
  66     }
  67
  68     .header img {
  69       margin-top: -1em;
  70       width: 20vmax;
  71       clip-path: circle(40% at 50% 50%);
  72
  73
  74     }
  75
  76     /* Style the top navigation bar */
  77     .navbar {
  78       display: flex;
  79       background-color: #333;
  80     }
  81
  82     /* Style the navigation bar links */
  83     .navbar a {
  84       color: white;
  85       padding: 14px 20px;
  86       text-decoration: none;
  87       text-align: center;
  88     }
  89
  90     /* Change color on hover */
  91     .navbar a:hover {
  92       background-color: #ddd;
  93       color: black;
  94     }
  95
  96     /* Column container */
  97     .row {
  98       display: flex;
  99       flex-wrap: wrap;
 100     }
 101
 102     /* Create two unequal columns that sits next to each other */
 103     /* Sidebar/left column */
 104     .side {
 105       flex: 30%;
 106       background-color: #f1f1f1;
 107       padding: 1.4em;
 108     }
 109
 110     /* Main column */
 111     .main {
 112       flex: 70%;
 113       background-color: #deffde;
 114       padding: 1.2em;
 115     }
 116
 117     /* Fake image, just for this example */
 118     .fakeimg {
 119       background-color: #aaa;
 120       width: 100%;
 121       padding: 1.2em;
 122     }
 123
 124     /* Footer */
 125     .footer {
 126       padding: 20px;
 127       text-align: center;
 128       background:
 129         linear-gradient(45deg, rgba(50, 70, 40, 0.9) 40%, rgba(0, 0, 0, 0)0%, rgba(20, 57, 90, 1) 60%, rgba(0, 0, 0, 0)0%);
 130     }
 131
 132     /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
 133     @media screen and (max-width: 700px) {
 134
 135       .row,
 136       .navbar {
 137         flex-direction: column;
 138       }
 139
 140     }
 141   </style>
 142 </head>
 143
 144 <body>
 145   <!-- Navigation Bar -->
 146   <div class="navbar">
 147     <a href="#">Link</a>
 148     <a href="#">Link</a>
 149     <a href="#">Link</a>
 150     <a href="#">Link</a>
 151   </div>
 152
 153   <!-- Header -->
 154   <div class="header">
 155     <h1>Oscar J. Rodriguez B.</h1>
 156     <img
 157       src="https://scontent-lhr3-1.cdninstagram.com/v/t51.2885-15/e35/57262952_386137918906120_2475495091722910682_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com&se=7&oh=7e906d85b42ba3e63cae32ede44d2361&oe=5DF78AC7&ig_cache_key=MjAyNTAyODcyODQ5Nzk3MTY2Mg%3D%3D.2"
 158       alt="">
 159   </div>
 160
 161   <!-- The flexible grid (content) -->
 162   <div class="row">
 163     <div class="side">
 164       <h2>About Me</h2>
 165       <h5>Photo of me:</h5>
 166       <div class="fakeimg" style="height:200px;">Image</div>
 167       <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
 168       <h3>More Text</h3>
 169       <p>Lorem ipsum dolor sit ame.</p>
 170       <div class="fakeimg" style="height:60px;">Image</div><br>
 171       <div class="fakeimg" style="height:60px;">Image</div><br>
 172       <div class="fakeimg" style="height:60px;">Image</div>
 173     </div>
 174     <div class="main">
 175       <h2>TITLE HEADING</h2>
 176       <h5>Title description, Dec 7, 2017</h5>
 177       <div class="fakeimg" style="height:200px;">Image</div>
 178       <p>Some text..</p>
 179       <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>
 180       <br>
 181       <h2>TITLE HEADING</h2>
 182       <h5>Title description, Sep 2, 2017</h5>
 183       <div class="fakeimg" style="height:200px;">Image</div>
 184       <p>Some text..</p>
 185       <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>
 186     </div>
 187   </div>
 188
 189   <!-- Footer -->
 190   <div class="footer">
 191     <h2>Footer</h2>
 192   </div>
 193
 194 </body>
 195
 196 </html>